[TOC] # 加載css * 加載是異步，不會影響DOM樹的構建，只是說在CSS沒處理好之前，構建好的DOM并不會顯示出來 * 啟發：所以CSS不能太大，頁面一打開將會停留較長時間的白屏，所以把圖片/字體等轉成base64放到CSS里面是一種不太推薦的做法 * DOM去匹配css rule的時候必須先等頁面的css都下載完成 * 啟發：head中的css是要下載完的，body中放CSS的話，會重新計算 <br> # css語法：選擇器 * 特點(css設計原則)：選擇器的出現順序，必定跟構建 DOM 樹的順序一致，即：保證選擇器在 DOM 樹構建到當前節點時，已經可以準確判斷是否匹配，不需要后續節點信息 * 流式渲染，每生成一個dom節點，便立刻去匹配相應的css規則 * `空格`: 后代，選中它的子節點和所有子節點的后代節點 * `>` : 子代，選中它的子節點 * `+`：直接后繼選擇器，選中它的下一個相鄰節點 * `~`：后繼，選中它之后所有的相鄰節點 * `||`：列，選中表格中的一列 <br> # cssom * CSSOM主要是DOM結構上的盒的描述，它基本上是依附于DOM樹的，不要和css的語法樹混淆 * cssom是有rule部分和view部分的，rule部分是在dom開始之前就構件完成的，而view部分是跟著dom同步構建的。 <br> # 處理腳本及樣式表的順序 ## 腳本 web的模式是同步的，開發者希望解析到一個script標簽時立即解析執行腳本，并阻塞文檔的解析直到腳本執行完。如果腳本是外引的，則網絡必須先請求到這個資源——這個過程也是同步的，會阻塞文檔的解析直到資源被請求到。這個模式保持了很多年，并且在html4及html5中都特別指定了。開發者可以將腳本標識為defer，以使其不阻塞文檔解析，并在文檔解析結束后執行。Html5增加了標記腳本為異步的選項，以使腳本的解析執行使用另一個線程。 <br> ## 預解析 Webkit和Firefox都做了這個優化，當執行腳本時，另一個線程解析剩下的文檔，并加載后面需要通過網絡加載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預解析并不改變Dom樹，它將這個工作留給主解析過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。 樣式表（Style sheets） <br> 樣式表采用另一種不同的模式。理論上，既然樣式表不改變Dom樹，也就沒有必要停下文檔的解析等待它們，然而，存在一個問題，腳本可能在文檔的解析過程中請求樣式信息，如果樣式還沒有加載和解析，腳本將得到錯誤的值，顯然這將會導致很多問題，這看起來是個邊緣情況，但確實很常見。Firefox在存在樣式表還在加載和解析時阻塞所有的腳本，而Chrome只在當腳本試圖訪問某些可能被未加載的樣式表所影響的特定的樣式屬性時才阻塞這些腳本。 <br> # 參考資料 [瀏覽器工作原理（五）：CSS解析（CSS parsing）](https://blog.csdn.net/lxcao/article/details/52861953) 重學前端