關於CSS最佳化的一點點拙見

　　前幾天有去 網易 參加他們在廣州的一個社會招聘,職位是 前端工程師(重構方向) ,周末閑來無聊就去試試,面試官問到我一個問題,是關於CSS的最佳化.

　　首先,面試官問我CSS選取器的最佳化,我對於CSS選取器效能的粗略理解是: ID選取器>類別選取器>標籤選取器>相鄰選取器>子選取器>後代選取器>萬用字元選取器>屬性選取器>偽類別選取器 .隨後我又補充了一句話,這個選取器的效能就算是在超大的web應用也很難體現出來,我們平時按這個作為一個標準來參考使用即可,其實也並不會有很大的效能上的問題.面試官搖頭並不是很贊同我的觀點.

　　然後,面試官問我,關於CSS最佳化的原則,我說 我一般只用工具去掉沒有用的行與行,分號與上個屬性之間的一些空格.面試官就反駁我說,那屬性可以簡寫的.當時我並沒有繼續回答,我表面點頭贊同.其實,關於這個屬性簡寫能不能最佳化CSS,我持有兩個觀點.

　　第一點,效能問題.如果屬性簡寫了我認為對效能其實是有損耗的,如果是簡寫的時候瀏覽器在渲染的時候要去尋找相應的屬性值再做解析.

　　例如: 

　　padding:1px 2px 3px 4px;

　　在這個例子中,瀏覽器並不能直接的分析出 padding-top,padding-right,padding-bottom,padding-left ,而是要通過對padding這個屬性的二次分析才能夠得出結論,四個方向的padding值分別是什麼,這當然會有效能上的損耗.

　　第二點,影響最小化的問題.如果CSS本來是這樣寫的:

　　padding-top:1px;　　padding-bottom:2px;

　　但是變成簡寫以後就會變成:

　　padding:1px 0 2px 0; 

　　那這樣豈不是把padding-left和padding-right都變成了0px了?

　　這樣對其它元素又會造成什麼樣的影響呢.

 

　　以上是我對於CSS最佳化的一點點拙見.去網易面試只是對我的一個啟發和思考,本人十分感謝,並沒有對網易的前端工程師們侮辱的意思,還請見諒.

　　希望這裡有說的不正確的地方大家指正.