CSS效能分析,如何優化CSS提高效能 | css效能
不負十年後的自己,共勉!前端效能優化一直是一個比較熱門的話題,我們總是在盡我們最大的努力去,提高我們的頁面效能,比如減少HTTP請求,利用工具對資源進行合併壓縮,指令碼置底,避免重複請求,csssprite等等。其實大量的方法都是在減少檔案大小,減少請求,優化JS,很少有人對css十分關注,甚至有人都不對css進行壓縮。其實,不規範的css會導致很多效能問題,這些問題可能在一些小的專案中不夠明顯,但是在大型專案中就會顯現出來。css匹配原理在優化css之前我們需要了解下css是怎麼進行工作的,我們都知道css是由選擇器,屬性和屬性值構成的。我們...
不負十年後的自己,共勉!前端效能優化一直是一個比較熱門的話題,我們總是在盡我們最大的努力去,提高我們的頁面效能,比如減少HTTP請求,利用工具對資源進行合併壓縮,指令碼置底,避免重複請求,css sprite等等。其實大量的方法都是在減少檔案大小,減少請求,優化JS,很少有人對css十分關注,甚至有人都不對css進行壓縮。其實,不規範的css會導致很多效能問題,這些問題可能在一些小的專案中不夠明顯,但是在大型專案中就會顯現出來。
css匹配原理在優化css之前我們需要了解下css是怎麼進行工作的,我們都知道css是由選擇器,屬性和屬性值構成的。
我們可能會這樣寫上一行程式碼
//css.con .loulan1 p span{ display: block; }//html<div class="con"> <div class="loulan"><span>文字 </div></div>
在這裡我們對con類裡面的loulan類裡的p標籤裡面的span標籤進行樣式定義。我說出來都嫌累更別說寫起來了,其實你可以把瀏覽器看作一個人,它渲染起來肯定也會浪費效能。
而且 css的匹配原理不是從左到右的,而是從右到左的,也就是說我們的這行程式碼裡面,先查詢到頁面裡面所有的span元素形成一個集合,再在所有的span元素往上查詢,看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢尋找,把父元素不是p元素的刪去,再往上查詢看集合裡的有p元素又多少它的父元素的類是loulan...瀏覽器說:我好累...
其實呢瀏覽器從右到左進行查詢的好處是為了儘早過濾掉一些無關的樣式規則和元素。並且Firefox 稱這種查詢方式為 keyselector(關鍵字查詢),所謂的關鍵字就是樣式規則中最後(最右邊)的規則,上面的 key 就是 span。人家本來是為了能儘快過濾到一些無關樣式規則的,我們這裡缺一層套一層,層層不停歇。所以只是想定義一個span的樣式在span上加個類豈不是更好。有人這時要說了,那樣是需要在每個元素上都加上類嗎?那肯定不是必須的,只不過我們要了解瀏覽器是怎麼查詢匹配的,然後...