Question

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

>

约5秒。 vs〜110秒（使用Firefox和googlechrome Profiler测量）
文件大小约为10MB

imo在html文件中没有“特殊”内容。

报告通常带有锚后缀，因此，浏览器应在加载文件后跳到文件的末尾（=“摘要部分”）。

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

上

Answer 1

结果是，您可以在HTML中添加 FEA 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>

为什么加载“大”文档时Firefox的速度比Chrome快？

1 个答案: