瀏覽器渲染頁面常見問題

時間 2019-12-08

原文原文鏈接

構建過程當中可能會產生的阻塞

html的代碼，是從上到下一行行執行的，也就是說若是js代碼寫在head頭裏，且沒有用加在window.onload方法裏，那麼他是沒法讀取到body裏的標籤的。之因此加在window.onload裏能夠執行，是由於，window.onload裏的函數會在dom樹加載以後執行。
在遇到link標籤後，會在link加載（從服務器下載）完畢後，再執行後續代碼。但與此同時，若是還有外部文件，則是同時加載（不阻塞後續外部文件link、script加載）。可是外部文件內的代碼不會執行，只會在代碼解析到它的時候執行。
script標籤會阻塞html解析，由於js可能會改變dom和css，所以瀏覽器會先解析script，避免浪費時間。要想避免阻塞的話，可以使用defer和 async。

對於動態建立的link標籤不會阻塞其後動態建立的script的加載與執行，無論script標籤是否具備async屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script>
        var start = +new Date
    </script>

</head>

<body>
    test
    <script>
        var link = document.createElement('link')
        link.href = 'http://udacity-crp.herokuapp.com/style.css?rtt=2'
        link.rel = 'stylesheet'
        document.head.appendChild(link)
    
        var script = document.createElement('script')
        script.src = 'http://udacity-crp.herokuapp.com/time.js?rtt=1&a'
        document.head.appendChild(script)
    </script>
    <div id="result"></div>
    <script>
        var end = +new Date
        document.getElementById('result').innerHTML = end - start
    </script>
</body>
</html>
複製代碼

js添加async屬性以後，script加載的外部文件成爲了異步加載，這時至關於它於本來的html解析過程同步進行。因此他不會被任何加載過程阻塞，只會在本身加載完成以後執行。可是，異步執行的影響就是，它如要讀取dom節點，極可能會失敗，由於它的加載和html解析過程沒有了前後順序。另外，若是它要輸出動態的dom節點，就沒法保證節點的位置，由於它添加的節點，是在html已解析的節點下順序添加的。
```
<script src="http://localhost:8080/test.js" async></script>
複製代碼
```
js添加 defer屬性以後， script加載的外部文件成爲了異步加載，執行是同步的。腳本加載不阻塞頁面的解析，腳本在獲取完後並不當即執行，而是等到 DOM樹加載完畢執行。

以下代碼，加上 defer後會報錯 Uncaught ReferenceError: $ is not defined。 DOM樹渲染結束前 body裏的 script已經執行了
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script defer src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <div id="d1">我是內容</div>
    <script >
        console.log($('#d1').html())
    </script>
</body>
</html>
複製代碼
```