为什么加载“大”文档时Firefox比Chrome浏览器更快?

问题描述 投票:1回答:1

我正在尝试对自定义html构建报告的接受程度差的问题进行排查,该报告需要非常长的时间才能加载到googlechrome上,而在firefox上加载时间要好得多。

  • 谈论约5秒。 vs〜110秒(使用Firefox和googlechrome Profiler测量)
  • 文件大小约为10MB

imo,关于html文件,没有任何“特殊”内容。

报告通常加载有后缀后缀,因此浏览器应在加载后跳到文件的最末尾(=“摘要部分”)。

我已将示例文件放在github仓库=> sample buildlog file

html google-chrome firefox page-load-time load-time
1个回答
0
投票

结果,您可以在HTML中包含TO FEW JAVASCRIPT:-/

如果仔细看一下Chrome分析器工具,您会发现任何页面的“ 初始渲染”都非常快,通常少于100毫秒,无论请求的页面是“大”还是“小” html /纯文本文件。

[最初渲染后,Chromium似乎更喜欢接收少量数据,在全部内容的每个垃圾/部分之后执行附加渲染收到。-这就是导致基于Chromium的浏览器处理速度大大降低的原因大量数据。

您可以通过在其上摩擦一些JavaScript来轻松绕过这个奇怪的“性能缺陷”:只需创建一个包装页面即可加载实际内容执行XMLHttpRequest请求,并且仅更新一次DOM。加载内容并将其设置为dom = 2后,将生成1个初始+ 1个后视图,而不是100.000ish。

通过使用以下代码,我已经能够将20 MB纯文本文件的加载时间从〜280秒降低到当前版本的Google Chrome浏览器中的大约4秒。

<body>
    <div id="file-content">loading, please wait</div>
    <script type="text/javascript">
        function delayLoad(path, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(xhr.responseText);
                    } else {
                        callback(null);
                    }
                }
            };
            xhr.open("GET", path);
            xhr.send();
        }

        function setFileContent(fileData) {
            var element = document.getElementById('file-content');
            if (!fileData) {
                element.innerHTML = "error loading data";
                return;
            }

            element.innerHTML = fileData;
        }

        delayLoad("bongo_files/bongo_20M.txt", setFileContent);
    </script>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.