Javascript 浏览器在加载资源之间浪费时间？_Javascript_Performance_Dom_Google Chrome Devtools_Page Load Time

Javascript 浏览器在加载资源之间浪费时间？

javascript performance dom google-chrome-devtools

Javascript 浏览器在加载资源之间浪费时间？,javascript,performance,dom,google-chrome-devtools,page-load-time,Javascript,Performance,Dom,Google Chrome Devtools,Page Load Time,我试图了解HTML页面加载和通过Javascript请求延迟的外部资源之间的关系在本地测试（无需DNS查找）为什么浏览器什么都不做却在浪费“很多时间” 我的页面是空的。它只包含HTML、头部和身体骨架以及页面加载后调用jQuery所需的Javascript代码： <!DOCTYPE html> <html> <head> </head> <body> Demo <script type="text/javascri

我试图了解HTML页面加载和通过Javascript请求延迟的外部资源之间的关系

在本地测试（无需DNS查找）

为什么浏览器什么都不做却在浪费“很多时间”

我的页面是空的。它只包含HTML、头部和身体骨架以及页面加载后调用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>


演示
函数downloadJSAtOnload（）{
var b=document.getElementsByTagName（'body'）[0]；
var s=document.createElement（“脚本”）；s.async=true；
s、 src=“jquery.min.js”
b、 儿童；
}
if（window.addEventListener）{
addEventListener（“加载”，downloadJSAtOnload，false）；
}else if（窗口附件）{
window.attachEvent（“onload”，downloadJSAtOnload）；
}否则{
window.onload=下载jsatonload；
}

是因为

onload

事件需要一些时间才能触发吗

我无法复制它，但这里有一些方法可以进一步研究

负载性能记录。将网络图表与主图表对齐，以将网络请求映射到主线程活动。可能CPU在做一些工作（可能是一个Chrome扩展）时已经消耗殆尽，这会延迟

加载

事件。请参阅以熟悉UI（该教程介绍了运行时性能，但加载性能UI是相同的）

真实用户监控指标使用or插入代码，以进一步测量脚本何时开始运行、加载事件侦听器何时启动等

如果这些有帮助，请告诉我

我无法复制它，它只是暂停了2ms，而不是您的200+，使用Chrome 63.0.3239.132 Win10 64位Pro，它是本地web服务器还是您只是在浏览器中直接使用html文件？在我的浏览器中。我并不总是觉得它们之间有这么大的区别，但是在空白处总是有一些区别。IIRC那条红线你看到的是

onload

事件，所以是的，在请求html页面后大约需要250毫秒。我不知道为什么花了这么长时间。