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