资本加载和页面事宜

2019年8月26日 150次阅读 来源: ssnau

domLoading

浏览器最先剖析dom树的时候点

domInteractive

示意浏览器已剖析好dom树了。

domContentLoaded

同步的JS已实行终了了。

这里须要再诠释一点：

  • 由于同步JS会壅塞Dom的剖析，因而在有同步JS的情况下，domInteractive和domContentLoaded的区分不大。

  • 假如JS添加了defer属性，那末domInteractive和domContentLoaded的时候差取决于JS的下载和实行时候。defer JS示意通知浏览器，这段JS在domInteractive后实行。见http://www.w3.org/TR/html5/syntax.html#the-end 。一旦实行完defer JS，就会触发domContentLoaded.

  • 假如JS属性为async，那末domContentLoaded和domInteractive又险些没什么区分了，由于js的剖析不会壅塞dom，也不壅塞domContentLoad事宜。

onload

页面上的元素已加载终了了。包含一切CSS, JS, Image等等。

一些小试验

以下示例均采纳blocking做试验，能够接见在线版。

疑问1：同步的JS经由过程document.write写入JS script会不会耽误DomContentLoaded?

结论：会。从例子中能够看到，DomContentLoaded必需比及同步写入的JS文件写完才触发。

代码：

<html>
<head>
</head>
<body>
  <script>
  document.write('<script src="t/wait-3s.js"' + '></' + 'script>');
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

时候线：

《资本加载和页面事宜》

疑问2： 同步的JS动态插进去defer JS会不会耽误DomContentLoaded?

结论：不会耽误comContentLoaded，但会壅塞onload的时候。须要补充的是，即便是动态插进去没有defer的JS，也不会耽误DomContentLoaded.

关于以下代码：

<html>
<head>
</head>
<body>
  <script>
   var script = document.createElement('script');
   script.src= "/t/wait-2s.js";
   script.defer = true;
   document.head.appendChild(script);
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

时候线以下：（蓝色为主文档，黄线为JS文件）

《资本加载和页面事宜》

疑问3：假如在domContentLoaded的时候动态插进去（同步/defer/async)的script，会不会壅塞onload事宜？

结论：（同步/defer/async)均会壅塞onload事宜。

代码(以defer为例)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script>
   document.addEventListener('DOMContentLoaded', function(){
     var script = document.createElement('script');
     script.src= "/t/wait-2s.js";
     script.defer = true;
     document.head.appendChild(script);
   });
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

时候线：

《资本加载和页面事宜》

上面的两个小试验应证的是范例中的：Spin the event loop until the set of scripts that will execute as soon as possible and the list of scripts that will execute in order as soon as possible are empty.

疑问三：假如在domContentLoaded时动态插进去CSS/图片/iframe，会壅塞onload事宜吗？

结论：会壅塞。动态插进去的图片/CSS会壅塞onload事宜，iframe不会。

代码（以image为例）：

<html>
<head>
</head>
<body>


<script>
   document.addEventListener('DOMContentLoaded', function(){
     
     var img = document.createElement('img');
     img.src= "/t/wait-2s.png";
     document.body.appendChild(img);
     

     /*
     var link = document.createElement('link');
     link.rel = "stylesheet";
     link.href = "t/wait-3s-red.css";
     document.body.appendChild(link);
     */

     /*
     var iframe = document.createElement('iframe');
     iframe.src = "t/wait-3s.html";
     document.body.appendChild(iframe);
     */

     
   });
  </script>



  {{flush 1000}}


<h1>Hello World</h1>


</body>
</html>

效果：

《资本加载和页面事宜》

【更多待补充…】

    原文作者：ssnau
    原文地址: https://segmentfault.com/a/1190000002393482
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞