每個前端在第一次寫一個完整功能的頁面，都可能會是這個樣子滴~
-
<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尾部前面。當然都能說出一二，但是我們還是有必要了解一下到底是為啥。
這里面有涉及到 DOM，CSS，JS 互相之間的一些關系，接下來會分別介紹
DOM
DOM這里有兩個概念，解析與渲染。
DOM解析：就是把你所寫的各種html標簽，生成一個DOM TREE，可以認為就是生成了一個最原始的頁面，一點樣式都沒有，毫無CSS修飾的那種；
DOM渲染：瀏覽器會把本身默認的樣式+用戶自己寫得樣式整合到一起，形成一個CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 結合到一起，生成一個Render TREE，呈現出一個帶有樣式的頁面。
線程
瀏覽器會有不同的線程，比如說
-
GUI 渲染線程
-
JS 線程
-
定時器觸發線程 (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代碼