前端之DOM解析和渲染與CSS、JS之間的關係

時間 2019-11-17

標籤前端 dom 解析渲染 css 之間關係欄目 HTML 简体版

原文原文鏈接

每一個前端在第一次寫一個完整功能的頁面，均可能會是這個樣子滴~css

<html>
  <head>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div id="app"></div>
    
    <script src="test.js"></script>
  </body>
</html>
複製代碼

咱們都會被告知，css要放到head裏面，js要放到body尾部前面。固然都能說出一二，可是咱們仍是有必要了解一下究竟是爲啥。html

這裏面有涉及到 DOM，CSS，JS 互相之間的一些關係，接下來會分別介紹前端

DOM

DOM這裏有兩個概念，解析與渲染。瀏覽器

DOM解析：就是把你所寫的各類html標籤，生成一個DOM TREE，能夠認爲就是生成了一個最原始的頁面，一點樣式都沒有，毫無CSS修飾的那種；bash

DOM渲染：瀏覽器會把自己默認的樣式+用戶本身寫得樣式整合到一塊兒，造成一個CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 結合到一塊兒，生成一個Render TREE，呈現出一個帶有樣式的頁面。app

線程

瀏覽器會有不一樣的線程，好比說異步

GUI 渲染線程async
JS 線程spa
定時器觸發線程 (setTimeout)線程
瀏覽器事件線程 (onclick)
http 異步線程

...

具體有關線程的內容，我會單獨寫一篇文章介紹，在這裏咱們只須要知道兩點：

上面的幾個線程，在同一個瞬間，只有一個線程起做用，也就是互斥的。好比說瀏覽器在執行GUI 渲染線程呢，那麼其餘的4個進程，都處於掛起的狀態，在隊列裏面呆着。
DOM的渲染對應的就是GUI渲染進程；JS的執行對應的就是JS線程；因此，DOM的渲染與JS代碼的運行，在同一瞬間只能有一個執行！

阻塞

阻塞XXX是指讓XXX暫停了。好比JS的執行阻塞DOM解析，就是

DOM解析 --> JS執行(此時DOM解析暫停) --> JS執行完畢 --> DOM繼續解析

DOM與CSS

先看它倆之間的關係，也就是分析CSS的加載對DOM的解析和渲染的影響。

很明顯，DOM本身在那解析DOM TREE 和 css樣式有啥關係啊，因此css不影響DOM解析。

也很明顯，DOM渲染就是要生成樣式呢，確定和css有關係啊，因此css影響DOM渲染。

結論：

css的加載不會阻塞DOM的解析
css的加載會阻塞DOM的渲染

DOM與JS

JS（加載和執行）都會阻塞 DOM 的解析，由於JS中可能會對DOM進行操做，可能改變DOM的結構，因此JS的加載和執行是會阻塞DOM解析的。

JS（加載和執行）都會阻塞 DOM 的渲染，同上面同樣，由於JS中可能對樣式進行操做。

注： html中每遇到< script >標籤，頁面就會從新渲染一次，由於要保證標籤中的JS代碼拿到的都是最新的樣式。

結論：

JS的加載和執行會阻塞DOM的解析
JS的加載和執行會阻塞DOM的渲染

CSS與JS

在線程那裏說了，CSS的加載會阻塞JS的執行，由於CSS的渲染GUI線程和JS運行線程互斥。可是CSS不會阻塞JS的加載（瀏覽器能夠預先掃描並下載）

注1：

CSS、JS之間的加載是否阻塞，這裏不考慮，由於現代的瀏覽器都會預先偷看文檔，而且下載。

注2：

這裏的JS引入方式不包括async和defer

結論：

CSS的加載阻塞JS的運行，不阻塞JS的加載

三者

例1：

<header>
    <link href="test.css">
</header>
複製代碼

加載test.css是不會影響header的解析的，隻影響渲染

例2：

<header>
    <link href="test.css">
    <script src="test.js"></script>
</header>
複製代碼

加載test.css阻塞了test.js的運行，test.js的運行阻塞了header的解析和渲染，因此，看似test.css既阻塞了header的渲染，又阻塞了header的解析。

總結

css的加載不會阻塞DOM的解析
css的加載會阻塞DOM的渲染
JS的加載和執行會阻塞DOM的解析
JS的加載和執行會阻塞DOM的渲染
CSS的加載阻塞JS的運行，不阻塞JS的加載
CSS的加載與JS的加載之間是否有影響？不考慮，瀏覽器自身會偷看並預先下載
遇到script標籤會觸發渲染，以便得到最新的樣式給JS代碼

最後：如有錯誤之處，還請見諒，提出後會立刻修改~~~

轉載請註明出處，謝謝~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。