我正在尝试对自定义html构建报告的接受程度差的问题进行排查,该报告需要非常长的时间才能加载到googlechrome上,而在firefox上加载时间要好得多。
imo,关于html文件,没有任何“特殊”内容。
报告通常加载有后缀后缀,因此浏览器应在加载后跳到文件的最末尾(=“摘要部分”)。
我已将示例文件放在github仓库=> sample buildlog file
结果,您可以在HTML中包含TO FEW 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>