前幾天有去 網易 參加他們在廣州的一個社會招聘,職位是 前端工程師(重構方向) ,周末閑來無聊就去試試,面試官問到我一個問題,是關於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優化的一點點拙見.去網易面試只是對我的一個啟發和思考,本人十分感謝,並沒有對網易的前端工程師們侮辱的意思,還請見諒.
希望這里有說的不正確的地方大家指正.