預設情況下，css 被視為阻塞渲染的資源，這意味著在 cssom 構建完成前，瀏覽器會暫停渲染任何已處理的內容。確保精減你的 css，盡快傳送它，並使用**型別與**查詢來解除阻塞。
在上一節，我們看到了，關鍵渲染路徑要求我們兼有 dom 和 cssom 來構造渲染樹，這就有乙個重要的效能影響：html 和 css 都是阻塞渲染的資源。 html 沒什麼說的，因為沒有 dom 我們就沒有任何可渲染的內容，但是 css 的必要性可能就沒那麼明顯。如果我們在 css 不阻塞的情況下嘗試渲染乙個普通頁面會怎樣？
有 css 的紐約時報
沒有 css 的紐約時報 (fouc)
上面的例子，顯示了紐約時報有 css 與沒有 css 的情況，這證實了為什麼要在 css 可用之前阻塞渲染 - 沒有 css 的頁面基本不可用。實際上，右側的情況通常稱為「內容樣式短暫失效」(fouc)。因此，在同時擁有 dom 和 cssom 前，瀏覽器會阻塞渲染。
但是，如果我們有一些 css 樣式只在特定條件下使用，比如，頁面列印，又或頁面投影到大螢幕上？如果這些資源不阻塞渲染，那就太棒了！
css 「**型別」和「**查詢」允許我們解決這類情況：
通過使用**查詢，我們的外觀可以根據不同使用場景定製，比如顯示或列印，也可以根據不同情況比如螢幕方向改變、尺寸調整事件等定製。在宣告樣式表資源時，一定要多注意**型別和**查詢，因為它們對關鍵渲染路徑有極大的效能影響！下面就讓我們看一些簡單例子：
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...