瀏覽器渲染原理（二）html中的css、javascript、dom之間的解析和相互阻塞關係

時間 2019-11-26

標籤瀏覽器渲染原理 html css javascript dom 之間解析相互阻塞關係欄目瀏覽器简体版

原文原文鏈接

滿足則不辱，知止則不殆。——老子javascript

瀏覽器渲染原理（一）在網址中輸入一個網站後面都作了什麼css

瀏覽器渲染原理（二）css、javascript、dom 阻塞關係html

瀏覽器渲染原理（三） repaint(重繪)和 reflow(迴流)詳解前端

引子

咱們在看一些前端優化規則的時候，好比雅虎軍規等等，都有看到 style 寫在 head 中，可是外鏈 script 寫在 body 的最後，以優化性能，都知道應該怎麼作，可是不知道其中的原理。若是還不知道瀏覽器渲染的原理的，看一看瀏覽器渲染原理這一篇文章。其實這個就是考驗你們對 html 中的 css、javascript、dom 之間的解析和相互阻塞關係。java

JavaScript 會阻塞 CSS、DOM 嗎

提出本身觀點

當咱們把 script 標籤寫到頁面的頂部時，dom 樹在解析的時候檢測到 script 標籤是，會加載 script 裏面的內容而且執行。咱們假設在執行javascript 會阻塞 dom的解析和渲染，阻塞 css的解析和加載。node

驗證本身的觀點

在驗證以前咱們先把 chrome 的網速調到 40kb 每秒的下載和上傳數據 第一步jquery

第二步

咱們來驗證這個結論: html 代碼以下chrome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> console.log('start load'); function h () { console.log(document.querySelectorAll('h1')) }; setTimeout(h, 0); </script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style> h1 { color: red; } </style>
    <script> console.log('end load'); setTimeout(h, 0); </script>
</head>
<body>
    <h1>測試阻塞加載</h1>
</body>
</html>
複製代碼

在加載到jquery 文件後，會先下載遠程的 jquery 而且執行他，他會阻塞 dom 的解析和渲染，css 解析和渲染，一直是白屏，等 jquery執行完成了才接着解析 Dom 和 cssom 而且渲染，console.log 打印 h1 標籤也是空數組。以下圖所示：數組

總結

javascript 加載會阻塞 css 解析和渲染瀏覽器
javascript 加載會阻塞 dom 解析和渲染

css 加載會阻塞 JavaScript 的加載和執行、會阻塞 Dom 的解析和渲染？

提出本身觀點

由於上面咱們已經驗證過 JavaScript 會阻塞 Dom 的解析和渲染，同時也會解析 cssom 的解析和渲染，因此咱們假設 css 的加載會阻塞Dom 的解析和渲染，會阻塞JavaScript 的加載和執行。

驗證咱們的假設

在上面的代碼基礎上修改代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script> console.log('start load'); function h () { console.log(document.querySelectorAll('h1')) }; setTimeout(h, 0); </script>
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <style> h1 { color: red; } </style>
    <script> console.log('end load'); </script>
</head>
<body>
    <h1>測試阻塞加載</h1>
</body>
</html>
複製代碼

執行結果以下圖所示

css 加載對 Dom 的阻塞

若是按咱們假設的 css 加載會阻塞 Dom 的解析和渲染，那麼執行的結果，應該是首先是白屏，而後** h1 標籤**的 nodeList 應該是爲空數組的，可是在執行的時咱們看到 h1 標籤的 nodeList 是有值的，注（還有 setTimeout 的做用是爲了在下一個 Task 最早執行，感受並不會影響咱們的實驗的結果。）這表示咱們一開始的假設是有問題的，css 加載會阻塞 Dom 的渲染有阻塞，可是並不會阻塞 Dom 的解析。