我试图了解 HTML 页面加载和通过 Javascript 请求延迟的外部资源之间发生了什么。
在本地测试(无需 DNS 查找)
为什么浏览器似乎在浪费“大量时间”而不做任何事情？
我的页面是空的。它仅包含 HTML、HEAD 和 BODY 骨架以及页面加载后调用 jQuery 所需的 Javascript 代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
<script type="text/javascript">
function downloadJSAtOnload(){
var b = document.getElementsByTagName('body')[0];
var s = document.createElement("script"); s.async = true;
s.src = "jquery.min.js"
b.appendChild(s);
}
if (window.addEventListener){
window.addEventListener("load", downloadJSAtOnload, false);
}else if (window.attachEvent){
window.attachEvent("onload", downloadJSAtOnload);
}else{
window.onload = downloadJSAtOnload;
}
</script>
</body>
</html>
是不是因为 onload 事件需要一些时间才能触发？
最佳答案
我无法重现它，但这里有一些方法可以进一步调查。
加载性能记录
Record page load performance .将 Network 图表与 Main 图表对齐，以将网络请求映射到主线程事件。可能 CPU 在做一些工作(可能是 Chrome 扩展)时已达到极限，这会延迟 load 事件。参见 Analyzing Runtime Performance熟悉 UI(该教程涵盖运行时性能，但加载性能 UI 是相同的)。
真实用户监控指标
使用 User Timing API 检测代码或 Navigating Timing attributes进一步测量脚本何时开始运行、加载事件监听器何时触发等。
如果这些有帮助，请告诉我!
关于javascript - 浏览器在资源加载之间浪费时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48131179/