大家對阻塞這一詞一定不陌生！js在執行會出現dom樹解析和渲染阻塞，
我來測試一下
我們設定3g這樣載入css慢了
其實我覺得，這可能也是瀏覽器的一種優化機制。因為你載入css的時候，可能會修改下面dom節點的樣式，如果css載入不阻塞dom樹渲染的話，那麼當css載入完之後，dom樹可能又得重新重繪或者回流了，這就造成了一些沒有必要的損耗。所以我乾脆就先把dom樹的結構先解析完，把可以做的工作做完，然後等你css載入完之後，在根據最終的樣式來渲染dom樹，這種做法效能方面確實會比較好一點。
由上所述，我們可以得出以下結論:
css載入不會阻塞dom樹的解析
css載入會阻塞dom樹的渲染
css載入會阻塞後面js語句的執行、
因此，為了避免讓使用者看到長時間的白屏時間，我們應該盡可能的提高css載入速度，比如可以使用以下幾種方法:
使用cdn(因為cdn會根據你的網路狀況，替你挑選最近的乙個具有快取內容的節點為你提供資源，因此可以減少載入時間)
對css進行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
合理的使用快取(設定cache-control,expires,以及e-tag都是不錯的，不過要注意乙個問題，就是檔案更新後，你要避免快取而帶來的影響。其中乙個解決防範是在檔案名字後面加乙個版本號)
減少http請求數，將多個css檔案合併，或者是乾脆直接寫成內聯樣式(內聯樣式的乙個缺點就是不能快取)
看的原文章
CSS效能優化
css是負責布局和渲染的重要角色，漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於css與效能的關係，可能有不對之處，希望能夠指出。1 所有的樣式盡量放在css檔案中，html標籤中不要寫style屬性，因為瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，寫在標籤屬性必會加長瀏覽...
CSS效能優化
css最耗費效能的無疑是動畫效果,其中包含border radius 圓角 box shadows 陰影 transparency 透明色 transforms 變形 filters 濾鏡 動畫效果的優化利用硬體能力.開啟gpu加速 利用translate3d實現動畫位移.而非簡單的top left...
CSS寫作建議和效能優化總結
今年難得遇到中秋和國慶，已經放假幾天了，我也回到家了。今天還是比較開心的，搶了比較多的紅包，嘿嘿。紅包搶完了，現在也空下來寫點部落格咯。這裡是我從網上的一篇文章看過來的，這裡先做一點小結，之後再補充。1.css渲染規則 今天在微博的一篇文章上看到的，之前我都以為渲染是從左往右渲染。發現我的想法是錯的...