Question

我正在尝试通过Javascript了解HTML页面加载和延迟外部资源请求之间的情况。

在本地测试（无需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事件需要一些时间来触发吗？

Answer 1

我无法重现它，但这里有一些方法可以进一步调查。

加载性能记录

Record page load performance。将网络图表与主图表对齐，以将网络请求映射到主要线程活动。也许CPU最大限度地完成了一些工作（可能是Chrome扩展），这延迟了load事件。请参阅Analyzing Runtime Performance以熟悉UI（该教程涵盖运行时性能，但加载性能UI是相同的）。

真实用户监控指标

使用User Timing API或Navigating Timing attributes对代码进行检测，以进一步衡量脚本何时开始运行，加载事件监听器何时触发等等。

请告诉我这些是否有帮助！

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

1 个答案:

加载性能记录

真实用户监控指标