前言
先拋出幾個(gè)問題：
- css 加載會(huì)不會(huì)阻塞 js 的加載折剃？（不會(huì)）
- css 加載會(huì)不會(huì)阻塞 js 的執(zhí)行？（會(huì)）
- css 加載會(huì)不會(huì)阻塞 DOM 的解析妒貌？（不會(huì)）
- css 加載會(huì)不會(huì)阻塞 DOM 的渲染？（會(huì)）
- js 加載會(huì)不會(huì)阻塞 DOM 的解析俩垃？（會(huì)）
- js 加載會(huì)不會(huì)阻塞 DOM 的渲染？（會(huì)）
- js 執(zhí)行會(huì)不會(huì)阻塞 DOM 的解析汰寓？（會(huì)）
- js 執(zhí)行會(huì)不會(huì)阻塞 DOM 的渲染口柳？（會(huì)）
可以看出 js 是全阻塞的，這也是為什么 js 要放尾部的原因有滑。
至于 css 放頭部則是為了避免頁面一開始樣式跃闹，而后出現(xiàn)樣式導(dǎo)致頁面閃動(dòng)情況，這樣用戶體驗(yàn)就比較差了毛好。
瀏覽器的主要進(jìn)程和職責(zé)
關(guān)于 css望艺，js 的阻塞問題，都跟瀏覽器的渲染進(jìn)程有關(guān)肌访。而渲染進(jìn)程又是多線程的找默。理清各個(gè)線程的職責(zé)及相互之間的合作關(guān)系，就能窺探其原理吼驶。
- JS 引擎線程（單線程）：負(fù)責(zé)解析 Javascript 腳本惩激，運(yùn)行代碼
- GUI 渲染線程：負(fù)責(zé)渲染瀏覽器界面，解析 HTML蟹演，CSS风钻，構(gòu)建 DOM Tree，Style Tree 和 Render Tree酒请，布局和繪制等
注意：GUI 渲染線程與 JS 引擎線程是互斥的骡技，當(dāng) JS 引擎執(zhí)行時(shí) GUI 線程會(huì)被掛起，所以當(dāng) JS 加載和執(zhí)行時(shí)羞反，會(huì)阻塞住 DOM 的解析和渲染布朦，導(dǎo)致白屏?xí)r間很長
瀏覽器渲染流程
1.解析 HTML 生成 DOM Tree
2.解析 CSS 生成 Style Tree
3.將 DOM Tree 與 Style Tree 合并在一起生成 Render Tree
4.遍歷 Render Tree 開始布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置大小信息（Layout）
5.繪制 Render Tree苟弛，繪制頁面的像素信息（Painting）喝滞，顯示到屏幕上（Display）
DOM Tree 和 Style Tree 是并行構(gòu)建的，所以 CSS 加載不會(huì)阻塞 DOM 的解析
由于 Render Tree 是依賴于 DOM Tree 和 Style Tree 的膏秫，因此右遭，css 加載會(huì)阻塞 Dom 的渲染
GUI 渲染線程與 JS 引擎線程是互斥的做盅，加載解析 css 時(shí)，JS 引擎會(huì)被掛起窘哈，所以 css 會(huì)阻塞 js 的執(zhí)行
回流和重繪
回流必將引起重繪吹榴，重繪不一定會(huì)引起回流
回流(Reflow)：當(dāng) Render Tree 中部分或全部元素的尺寸、結(jié)構(gòu)滚婉、或某些屬性發(fā)生改變時(shí),瀏覽器重新渲染部分或全部文檔的過程稱為回流
重繪(Repaint)：當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如：color图筹、background-color、visibility 等）,瀏覽器會(huì)將新樣式賦予給元素并重新繪制它,這個(gè)過程稱為重繪
回流比重繪的代價(jià)要更高
資源加載優(yōu)先級(jí)
想要提升頁面的加載速度让腹，除了關(guān)注 css远剩，js 阻塞的問題外，了解資源加載的優(yōu)先級(jí)同樣重要骇窍。
我們知道資源加載本身不存在互相阻塞的問題瓜晤，但瀏覽器依然會(huì)按照資源默認(rèn)的優(yōu)先級(jí)確定加載順序：
1.html 、 css 腹纳、 font 這三種類型的資源優(yōu)先級(jí)最高
2.然后 script 痢掠、 xhr 請(qǐng)求
3.接著是圖片、語音嘲恍、視頻
然而足画，有些資源我們知道很重要，想優(yōu)先加載佃牛；有些資源無關(guān)緊要淹辞，想延后加載，那么如何手動(dòng)控制瀏覽器加載優(yōu)先級(jí)呢吁脱？
主要有4種指令：
- preload 預(yù)加載（提升優(yōu)先級(jí)）：通知瀏覽器接下來馬上就會(huì)用到的資源桑涎，并盡快開始加載資源
- prefetch 預(yù)獲取（最低優(yōu)先級(jí)）：通知瀏覽器這是稍后可能需要用到的東西兼贡，可以延遲加載（在帶寬空閑(idle)時(shí)再加載）
- asnyc 異步獲裙ダ洹（降低優(yōu)先級(jí)）：資源可以異步加載，加載完即可執(zhí)行（亂序執(zhí)行）
- defer 異步獲缺橄！（降低優(yōu)先級(jí)）：資源可以異步加載等曼，但需要按照資源加載順序執(zhí)行（按序執(zhí)行）
