为什么加载“大"文档时Firefox的速度比Chrome快? [英] Why is Firefox MUCH faster than Chrome when loading 'big' documents?
问题描述
我正在尝试解决对自定义html构建报告的接受程度差的问题，该报告需要很长的时间才能在googlechrome上加载，而在Firefox上加载时间要好得多.
I'm trying to troubleshoot an issue with bad acceptance of custom html build-reports that require a very long time to load on googlechrome, whereas load time is much better on firefox.
- 约5秒.vs〜110秒(使用Firefox和Googlechrome Profiler测量)
- 文件大小约为10MB
imo在html文件中没有特殊"内容.
imo there is nothing 'special' about the html file.
报告通常加载有后缀后缀，因此浏览器应在加载文件后跳到文件的末尾(=摘要部分").
the reports are usually loaded with anchor suffix, so the browser should jump to the very end of the file (='summary section') when it's loaded.
我已经在github repo =>上放置了一些示例文件=> 浏览器邦戈测试
I have put a couple of example files on a github repo => browser bongo test
推荐答案
结果是，您可以在HTML中添加 FEW JAVASCRIPT :-/
Turns out, you can have TO FEW JAVASCRIPT in your html :-/
如果仔细看一下Chrome分析器工具，您会发现任何页面的"初始呈现"都非常快，通常不到100毫秒，无论请求的页面是大"还是小" html/纯文本文件.
If you take a closer look at the Chrome profiler tool, you realize the "initial rendering" of any page is really quick, often less than 100 msec, no matter if the requested page is a "big" or "small" html / plaintext file.
在初始渲染之后，Chromium似乎更喜欢接收少量数据，在全部内容的每个垃圾/部分之后执行附加渲染收到.-这就是导致基于Chromium的浏览器处理速度大大降低的原因大量数据.
After the initial rendering, Chromium seems to prefer receiving small junks of data, performing a additional rendering after each and every junk/part of the full content it receives. - and that's what causes Chromium based browsers to be MUCH slower in processing large amounts of data.
您可以通过在其上摩擦一些JavaScript来轻松绕过这个奇怪的性能缺陷":只需创建一个包装页面即可加载实际内容执行XMLHttpRequest请求，并且仅更新一次DOM.加载内容并将其设置为dom = 2个渲染后，将获得1个初始+ 1个渲染，而不是100.000ish.
You can easily bypass this weird "performance flaw" by rubbing a little JavaScript on it: Simply create a wrapper-page, which loads the actual content by performing a XMLHttpRequest request and updates the DOM only once. 1 initial + 1 rendering after the content is loaded and set into the dom = 2 renderings, instead of 100.000ish.
通过使用以下代码，我已经能够将20 MB纯文本文件的加载时间从〜280秒降低到当前版本的Google Chrome浏览器中的大约4秒.
By using the following code, I've been able to get the load time of a 20 MB plaintext file from ~280 secs down to approx 4 seconds in Google Chrome, current version.
<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快?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
