css選擇器效能情況

2021-08-29 02:33:33 字數 668 閱讀 7179

選擇器效率從高到低的排序列表:

id選擇器(#id)

類選擇器(.classname)

標籤選擇器(div,h1,p)

相鄰選擇器(h1+p)

子選擇器(ul > li)

後代選擇器(li a)

萬用字元選擇器(*)

屬性選擇器(a[rel="external"])

偽類選擇器(a:hover,li:nth-child)

決定選擇器效能的幾個點:

首先選擇器對效能的影響源於瀏覽器匹配選擇器和文件元素時所消耗的時間,所以優化選擇器的原則是應盡量避免使用消耗更多匹配時間的選擇器。

但是想用更快的選擇器之前,還要了解選擇器的匹配機制,事實上,瀏覽器讀取選擇器時,不是按照我們的閱讀習慣從左到右,而是遵循的從選擇器的右邊到左邊進行讀取的

那麼最右側的選擇器對於效能就起著關鍵性的作用,它是最先開始查詢的,如果最右側是#id選擇器那麼效能就很高,如果是標籤選擇器那麼效能就會大打折扣。

最後:css效能並不是最重要的,其本身就是表現型語言,不像js那樣存在邏輯性會因為記憶體洩漏造成卡死現象。應該了解css的特性,靈活實現樣式效果,使其在專案中**易復用,易管理和維護。

CSS 選擇器效能提公升

css 選擇器效能損耗來自?css選擇器對效能的影響源於瀏覽器匹配選擇器和文件元素時所消耗的時間,所以優化選擇器的原則是應盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解css選擇器匹配的機制,如子選擇器規則 header a 我們中的大多數人都是從左到右的閱讀習慣,會習慣性的設定瀏覽器...

CSS選擇器效能分析

寫了幾篇關於js的部落格,也是關於效能的,現在,我覺得有必要那css來認真分析一下了。之前只是看別人這麼寫就跟著寫,但是沒有去研究這樣寫或者是不是正確的寫法,價效比怎麼樣,渲染的效率好麼!這些都沒有考慮。那麼,現在,我提出css的一些選擇器的效能分析。0 這樣寫完了以後,渲染的效果至少呈現出來了,可...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...