異步執行js腳本——防止阻塞

JS允許我們修改頁面中的所有方面：內容，樣式和用戶進行交互時的行為。

但是js同樣可以阻塞DOM樹的形成並且延遲頁面的渲染。

讓你的js變成異步執行，並且減少不必要的js文件從而提高性能。

JavaScript可以查詢和修改DOM和CSSOM
JavaScript的執行阻塞了CSSOM的執行
JavaScript 阻塞了DOM的形成，除非特殊聲明js異步執行

js是一個同步語言可以修改網頁的任何方面：

 
            <html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path: Script</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script>
      var span = document.getElementsByTagName('span')[0];
      span.textContent = 'interactive'; // change DOM text content
      span.style.display = 'inline';  // change CSSOM property
      // create a new element, style it, and append it to the DOM
      var loadTime = document.createElement('div');
      loadTime.textContent = 'You loaded this page on: ' + new Date();
      loadTime.style.color = 'blue';
      document.body.appendChild(loadTime);
    </script>
  </body>
</html> 
           

js允許我們操作DOM和使用隱藏對象的引用——節點可能在render tree中是不可見的，但是在DOM中依舊存在！所以，我們可以使用對隱藏對象的引用，來改變文本（通過textConten屬性），甚至可以重寫已經被計算的display屬性從原來的‘none’到‘inline’。一旦這些完成，我們的頁面將會顯示成為“Hello interactive students!”
js同樣可以從DOM中創建，添加和刪除新的元素，或為元素設置樣式。實際上，技術上來說，我們的頁面可以通過一個巨大的js文件來一個個的創建元素和為元素設置樣式。但是實際操作上，HTML和CSS更加方便。上例第二部分的函數中我們創建了一個新的div元素並且設置了文本元素，為其設置了樣式，並且將其追加到body元素后面。

page preview

但是我們不能再DOM沒有構造完之前操作DOM——瀏覽器在碰到js時會先執行js再執行DOM樹的構造——所以執行內置的js文件時將會阻塞DOM的形成，同樣可會延遲渲染的初始化。

js也可以操作CSSOM，如果在瀏覽器沒有結束下載和CSSOM構造的情況下，我們想運行js呢？答案是瀏覽器會先擱淺腳本的執行直到完成CSSOM的加載和構造，當我們在等待上述執行的時候，DOM構造也同樣被阻塞。

簡而言之，js介紹的一系列特性都是依賴DOM和CSSOM的，js的執行同樣也可以導致瀏覽器執行和頁面渲染的巨大延遲：

腳本在頁面中的位置非常重要
當遇到腳本標簽的時候DOM構造過程將會停止直到腳本執行結束
js可查詢和操作DOM以及CSSOM
js的執行將被延遲，直到CSSOM就緒。

解析阻塞 vs. 異步js

我們可以在script標簽中加入async屬性來告訴瀏覽器，在執行js腳本時同時執行DOM構造。

異步執行js腳本——防止阻塞

解析阻塞 vs. 異步js

原文：https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript?hl=en

免責聲明！