CSS揭祕之效能優化技巧篇

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-dark


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第11天,點選檢視活動詳情

CSS揭祕之效能優化技巧篇

一、寫在前面

我們說的效能優化與降低開銷,那必然都是在都能實現需求的條件下,選取其中的“最優解”,而不是避開需求,泛泛地談效能和開銷。

“沉迷”於尋求最優解,在各行各業都存在,哪怕做一頓晚餐,人們也總在摸索如何能在更短的時間更少的資源,做更多的“美味”。例如要考慮先把米放到電飯煲, 然後把需要解凍的拿出來解凍,把蘑菇黃豆這種需要浸泡的先“預處理”,青菜要放在後面炒,湯要先燉, 洗菜的水要用來澆花...需要切的菜原料排序要靠近,有些菜可以一起洗省時節水,要提前準備好裝菜的器皿否則你可能要洗好幾次手

瞧做一頓晚餐其實也可以很講究,歸納一下這些行為,可以統稱為“優化行為”,也可以引用一些術語表示,例如尋找“最優解“和”關鍵路徑“, 在 CSS 的使用中,同樣也需要”關鍵路徑“、”最優解“和”優化“,下面將從這幾個方面解釋 CSS 效能優化:

①渲染方向的優化

②載入方向的優化

二、CSS效能優化技巧

2.1 渲染方向的優化

  • ①減少重排(redraw)重繪(repaint)

例如符合條件的vue中應儘可能使用 v-show 代替 v-if。v-show 是通過改變 css display 屬性值實現切換效果, v-if 則是通過直接銷燬或建立 dom 元素來達到顯示和隱藏的效果。 v-if是真正的條件渲染,當一開始的值為true時才會編譯渲染, 而v-show不管怎樣都會編譯,只是簡單地css屬性切換。v-if適合條件不經常改變的場景,因為它的切換會重新編譯渲染, 會建立或銷燬 dom 節點,開銷較大。 v-show 適合切換較為頻繁的場景,開銷較小。

  • ②減少使用效能開銷大的屬性:例如動畫、浮動、特殊定位。

  • ③減少css計算屬性的使用,有時它們不是必須使用的:例如 calc(100% - 20px),如果這 20px 是邊距, 那麼或許可以考慮 border-size:border-box。

  • ④指令碼行為的防抖節流,減少不必要的的重複渲染開銷。

  • ⑤屬性值為 0 時,不必新增單位(無論是相對單位還是絕對單位),那可能會增加計算開銷, 且也沒有規範提倡0值加單位,那是沒有意義的,0rem和0em在結果上是沒有區別的,但加上單位可能會帶來不必要的計算開銷。 關於0不必加單位,想必你也收到過編輯器的優化提示。

  • ⑥css 簡寫屬性的使用,有時開銷會更大得不償失,例如 padding: 0 2px 0 0;和 padding-right:2px; 後者的寫法對機器和人的閱讀理解和計算的開銷都是更小的。常見的 css 可簡寫屬性還有 background,border, font 和 margin。

  • ⑦儘可能減少 CSS 規則的數量,並刪除未使用到的 CSS 規則。一些預設就有的 CSS 規則,就不必寫了,具有繼承性的樣式, 也不必每級節點都寫。

-⑧避免使用不必要且複雜的 CSS 選擇器(尤其是後代選擇器),因為此類選擇器需要耗用更多的 CPU 處理能力來執行選擇器匹配。 總之不必要的深度,不管是 css 還是 dom 都不是好的選擇,這對人和機器都是同樣的道理,因為讀和理解起來都同樣的“費力”。

-⑨關鍵選擇器(key selector)。

覽器會從最右邊的樣式選擇器開始,依次向左匹配。最右邊的選擇器相當於關鍵選擇器(key selector), 瀏覽器會根據關鍵選擇器從 dom 中篩選出對應的元素,然後再向上遍歷相關的父元素,判斷是否匹配。

所以組合巢狀選擇器時,匹配語句越短越簡單,瀏覽器消耗的時間越短, 同時也應該減少像標籤選擇器,這樣的大範圍命中的通配選擇器出現在組合巢狀選擇器鏈中, 因為那樣會讓瀏覽器做大量的篩選,從而去判斷選出匹配的元素。

-⑩少用*{}通配規則,那樣的計算開銷是巨大的。

2.2 載入方向的優化

  • ①減少 @import 的使用

合理規劃 css 的載入引入方式,減少 @import 的使用,頁面被載入時,link 會同時被載入, 而 @import 引用的 CSS 會等到頁面被載入完再載入。

  • ②css 儘量放在 head 中,會先載入,減少首次渲染時間。

  • ③按需載入,不必一次就載入完全部資源,在單頁應用中應尤其注意。

  • ④考慮樣式和結構行為分離,抽放到獨立css檔案,減少重複載入和渲染。

  • ⑤css壓縮技術的應用,減少體積。

三、寫在後面

有一個好的家務機器人,我們可以省很多事,少操心很多,同樣的, 有一個好的 css 預處理工具和打包工具或許也可以幫助程式設計師節省很多精力。

網速的提升和裝置效能提升,也讓程式設計師擁有許多資源可以“揮霍”,例如現在的很多“國民級”的 應用在3g網路下和早期的手機中都無法正常工作,但那似乎不影響它們的“優秀”。誠然,那又是複雜的問題。

正如開頭所言,程式設計師尋求“最優解”和“關鍵路徑”,應當在有可替代方案和能滿足需求的前提下進行。 僅是理論空談優化,無異於是”耍流氓“。矛盾無處無時不在,重要的是衡量取捨和你能承受。