前端css效能優化

1. 避免使用@important

外部的css檔案中使用@important會使得頁面在載入時增加額外的延遲。最好使用link

2. 避免使用css表示式（表示式可能會造成極大的計算量）

3. 避免通配選擇器

在初期使用*,以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。

4. 移除無匹配的樣式

b. 對於瀏覽器而言，所有的樣式規則都會被解析後索引起來，即使當前頁面無匹配的規則時。移除無匹配的規則，減少索引項，加快瀏覽器的查詢速度

5. 避免單規則的屬性選擇器

瀏覽器匹配所有的元素--->檢查是否有href屬性並且href='#index'---->分別逐級向上匹配class為selected的元素，直到文件的根節點

6. 避免類正則的屬性選擇器

正規表示式匹配會比基於類別的匹配會慢很多。大部分情況下我們應盡量避免使用*=,|=,^=,$=,合~=語法的屬性選擇器

本文摘抄自：

前端css效能優化

1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...

WEB前端效能優化之二 css優化

1 把樣式表置於頂部 2 避免使用css表示式 expression 表示式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動 乃至移動滑鼠時都會要重新計算一次。給css表示式增加乙個計數器可以跟蹤表示式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上...

前端效能優化之 css阻塞渲染

瀏覽器渲染流程 1瀏覽器開始解析目標html檔案,執行流的順序為自上而下。2html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後,觸發domcontendloaded事件。3css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4cssom和d...