为什么 Firefox 在加载 'big' 文档时比 Chrome 快得多？

Question

我正在尝试解决无法接受自定义 html 构建报告的问题，该报告需要 很长时间 才能在 googlechrome 上加载，而加载时间在 firefox 上好多了。

大约 5 秒。 vs ~110 秒。（使用 firefox 和 googlechrome 分析器测量）
文件大小约为 10MB

imo 'special' 关于 html 文件。

报告加载时通常带有锚后缀，因此浏览器在加载时应跳转到文件的末尾(='summary section')。

我在 github 存储库中放置了几个示例文件 => browser bongo test

Answer 1

事实证明，您的 html 中可以有 TO FEW JAVASCRIPT :-/

如果您仔细查看 Chrome 分析器工具，您会发现任何页面的“初始呈现”都非常快，通常不到 100 毫秒，无论请求的页面是 "big" 还是 "small" html / 纯文本文件。

在初始渲染之后，Chromium 似乎更喜欢接收小垃圾数据，在完整内容的每个 junk/part 之后执行额外的渲染收到。 - 这就是导致基于 Chromium 的浏览器处理速度慢得多的原因大量数据。

你可以轻松地绕过这个奇怪的 "performance flaw"，只需在上面擦一点 JavaScript 即可：只需创建一个包装页面，它通过以下方式加载实际内容执行 XMLHttpRequest 请求并仅更新 DOM 一次。 1 初始 + 1 渲染后内容加载并设置为 dom = 2 渲染，而不是 100.000ish。

通过使用以下代码，我已经能够在当前版本 Google Chrome 中将 20 MB 纯文本文件的加载时间从 ~280 秒减少到大约 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>

为什么 Firefox 在加载 'big' 文档时比 Chrome 快得多？

Why is Firefox MUCH faster than Chrome when loading 'big' documents?

html

firefox

google-chrome

load-time

page-load-time