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

标签 html google-chrome firefox page-load-time load-time

我正在尝试解决自定义 html 构建报告的错误接受问题,这些报告需要很长时间才能在 googlechrome 上加载,而在 Firefox 上加载时间要好得多。

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

  • imo 没有什么关于 html 文件的“特别”。

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

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

    最佳答案

    事实证明,你的 html 中可以有太少 JAVASCRIPT :-/

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

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

    您可以通过在其上添加一点 JavaScript 轻松绕过这个奇怪的“性能缺陷”:
    只需创建一个包装页面,它通过以下方式加载实际内容
    执行一个 XMLHttpRequest 请求并且只更新一次 DOM。
    内容加载并设置到 dom 后的 1 个初始 + 1 个渲染 = 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>
    

    关于html - 为什么 Firefox 在加载 'big' 文档时比 Chrome 快得多?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59308105/

    相关文章:

    jquery - slider 和溢出的 CSS Jquery 提示 : hidden

    javascript - Knockout - Chrome 中的绑定(bind)错误

    javascript - 在 Chrome 内容脚本和弹出脚本之间共享一个 redux store

    css - 使用 css 或 jquery 自定义滚动条 firefox

    javascript - 如何在 Django html 文件中使用 JavaScript 来显示错误消息?

    Javascript 可以将背景颜色更改为某些 <div>

    javascript - Chrome 扩展程序可在所有页面中启用聊天机器人

    python - 在 Python 中使用 Selenium Marionette 获取整个页面的屏幕截图

    macos - 这是 Mac OS 上 Firefox 扩展的已知问题吗?

    android - 在 web View 和 TextView 中使用 html 颜色标签分隔阿拉伯语字体