前几天有去 网易 参加他们在广州的一个社会招聘,职位是 前端工程师(重构方向) ,周末闲来无聊就去试试,面试官问到我一个问题,是关于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优化的一点点拙见.去网易面试只是对我的一个启发和思考,本人十分感谢,并没有对网易的前端工程师们侮辱的意思,还请见谅.
希望这里有说的不正确的地方大家指正.