資訊專欄INFORMATION COLUMN
摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級
一、CSS選擇符
CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。
作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CSS選擇符模式，盡量編寫高效的CSS選擇符，從而加快頁面的渲染速度，縮短頁面呈現時間。
二、瀏覽器讀取選擇器瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行的。2.1 舉例
瀏覽器讀取選擇器的順序如下:
查找頁面中所有 class=red 的 span 元素
查找 1. 結果的父元素中是否有 p 元素
查找 2. 結果的父元素中是否有 id=box 的 div 元素
2.2 從右到左的用處盡早的過濾掉無關的樣式規則
盡快的匹配到目標元素
2.3 關鍵選擇器選擇器的最后一部分，也就是選擇器的最右邊部分被稱為 關鍵選擇器 （keyselector），它將決定 CSS 選擇器的效率。
三、選擇器的效率 3.1 從高到低內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 元素（類型）選擇器 = 偽元素選擇器
3.2 總結ID和類名用于關鍵選擇器上效率是最高的，而CSS3的仿偽類和屬性選擇器，雖然使用方便，但其效率卻是最低的。
四、選擇器性能優化根據以上「瀏覽器讀取選擇器」與「選擇器的效率」原則，我們可以通過避免不恰當的使用，提升 CSS 選擇器的性能。
4.1 避免使用通用選擇器瀏覽器匹配文檔中所有的元素后分別向上逐級匹配 class 為 content 的元素，直到文檔的根節點。因此其匹配開銷是非常大的，所以應避免使用關鍵選擇器是通配選擇器的情況。
4.2 不要在編寫id規則時用標簽名或類名 4.3 不要在編寫class規則時用標簽名 4.4 把多層標簽選擇規則用class規則替換，減少css查找 4.5 避免使用子選擇器后代選擇器在CSS中是最昂貴的選擇器。貴得要命——尤其是把它和標簽或通配符放在一起！
標簽后面最好永遠不要再增加子選擇器
4.6 依靠繼承 4.7 避免單規則的屬性選擇器屬性選擇器根據元素的屬性是否存在或其屬性值進行匹配，如下例規則會把herf屬性值等于 ”#index” 的鏈接元素設置為紅色：
但其匹配開銷是非常大的，瀏覽器先匹配所有的元素，檢查其是否有href屬性并且herf屬性值等于”#index”， 然后分別向上逐級匹配class為selected的元素，直到文檔的根節點。所以應避免使用關鍵選擇器是單規則屬性選擇器的規則。
4.8 避免類正則的屬性選擇器CSS3添加了復雜的屬性選擇器，可以通過類正則表達式的方式對元素的屬性值進行匹配。當然這些類型的選擇器定是會影響性能的，正則表達式匹配會比基于類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=， |=， ^=， $=， 和 ~=語法的屬性選擇器。
4.9 移除無匹配的樣式移除無匹配的樣式，有兩個好處：
第一，刪除無用的樣式后可以縮減樣式文件的體積，加快資源下載速度；
第二，對于瀏覽器而言，所有的樣式規則的都會被解析后索引起來，即使是當前頁面無匹配的規則。移除無匹配的規則，減少索引項，加快瀏覽器查找速度；
五、總結網站編寫CSS時，應該優先考慮使用class選擇器，避免使用通配符選擇器（*）和屬性選擇器（a[rel=”external”]），后代選擇器與標簽選擇器結合使用也應避免。
使用id選擇器的性能最好，但是編寫時要注意其唯一性，謹慎使用。
CSS3選擇器（例如：:nth-child(n)第n個孩子）在幫助我們鎖定我們想要的元素的同時保持標記的干凈和語義化，但事實是，這些花哨的選擇器讓更多的瀏覽器資源被密集使用。如果你關心頁面性能的話，他們真不該被使用！
擴展閱讀
前端面試題-CSS選擇器
前端面試題-CSS優先級
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52015.html
摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來源背景 面試題是來自微博@牛客網發布的真實大廠前端面經題目，我一直在收集題目長期一個一個的記錄下來的，可能會有重復，但基本前端的面試大綱和需要掌握的知識都在其中了，面試題僅做學習參考，學習者閱后也要用心鉆研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。 二、532道前端真實大廠面試題 express和koa的對比，兩者中間件的原理，koa捕獲異常多種情...
摘要：另外回答的時候要淡定，一些問題就算不懂也不能慌，要和面試官談笑風生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺就是很重視基礎思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來，做一點微小的工作，整理了一些之前幾家公司的前端面試題和個人經驗，想做前端的師弟妹可以參考，也歡迎各同行大神來指教~ （以下問題不分先后，時間久遠難免有些遺漏；很多問題面試官都...
閱讀 1966·2023-04-25 16:19
閱讀 3091·2021-11-24 09:39
閱讀 829·2021-11-16 11:44
閱讀 1688·2019-08-29 12:52
閱讀 1138·2019-08-26 13:33
閱讀 1073·2019-08-26 10:26
閱讀 2200·2019-08-23 16:42
閱讀 2567·2019-08-23 14:37
