- 外部樣式會阻塞內部腳本的執行。
- 外部樣式與外部腳本並行加載，但外部樣式會阻塞外部腳本執行。
- 如果外部腳本帶有async屬性，則外部腳本的加載與執行不受外部樣式影響
- 如果link標籤是動態創建（js生成），不管有無async屬性，都不會阻塞外部腳本的加載與執行。
2. CSS解析:
CSS Parser作用就是將很多個CSS文件中的樣式合併解析出具有樹形結構Style Rules，在對樣式解析的過程中，默認CSS選擇器是從右往左進行解析的。至於為什麼是從右到左，而不是從左到右、也是不會從左到左…
下面舉個栗子來說一下：
假如現在有這樣的一個樣式:
1#parent .ch1 .dh1 {}
2.fh1 .ch1 .dh1{}
3.ah1 .ch1 .eh1 {}
4#parent .fh1 {}
5.ch1 .dh1{}
複製代碼
我們來比較從左到右和從右到左兩種方式的結果：
從兩個圖的比較就可以看幾點：
- 右邊的tree複雜度要比左邊的低
- 右邊的tree公用樣式重合度比左邊的低
- 右邊的tree從根開始的節點數要比左邊的少
可能光看這幾點沒看出什麼問題，但你要知道：瀏覽器中的css解析器負責css的解析，併為每個節點計算出樣式，因此雖然css解析器要做的事情不多，但要每個節點都要進行遍歷查找計算，計算量極大，因此解析的方式是決定其性能的關鍵點。
就如
1#parant .a{}
2和
3.a{}
複製代碼
估計絕大多數人都會認為前者要比後者性能更優，其實不然，在解析過程中
#paran .a{}意味著css解析器要先找到#parent再找到他下面的.a所在節點
而後者可以直接定位到.a{}因此哪一種方式更優，顯而易見。
3. 腳本執行:
瀏覽器解析HTML時，當遇到
分享到:
閱讀更多 前端嫣然呀呀呀 的文章
