为什么Firefox在加载“大”文档时比Chrome快得多？

Question

为什么Firefox在加载“大”文档时比Chrome快得多？

htmlgoogle-chromefirefoxpage-load-timeload-time

8

我正在尝试解决一个问题，即自定义HTML构建报告在Google Chrome上需要非常长的时间才能加载，而在Firefox上加载时间要快得多。

大约需要5秒钟和110秒钟（使用Firefox和Google Chrome分析器测量）
文件大小约为10MB

我认为HTML文件没有什么“特别”的地方。

通常使用锚点后缀加载报告，因此当它加载时，浏览器应该跳到文件的最末端（='摘要部分'）。

我在GitHub存储库上放了几个示例文件 => browser bongo test

- mwallner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mwallner · Accepted Answer

原来，在您的html中可以有过少的JavaScript :-/

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

在初始渲染之后，Chromium似乎更喜欢接收小数据块，并在接收到每个碎片/完整内容的每个部分后执行附加呈现。 -这就是导致基于Chromium的浏览器在处理大量数据时要慢得多的原因。

您可以轻松地通过添加一些JavaScript来绕过这种奇怪的“性能缺陷”：只需创建一个包装器页面，通过执行XMLHttpRequest请求加载实际内容，并仅更新DOM一次。 1次初始呈现+将内容加载并设置到dom后进行1次呈现= 2次呈现，而不是大约100,000次。

使用以下代码，我已经能够将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>