CSS性能优化
CSS选择器优化
如果可以直接选中元素,不需要加一些多余的修饰
/*不要使用类选择器和ID选择器修饰元素标签,这样多此一举,还会降低效率。*/ div#slider.slider { }
一般来说,class用于样式,id用于js,因为id定义的样式不利于复用
保证不会误选的情况下,尽量保持简单
避免冲突可以在命名时区分好
保持简单,不要使用嵌套过多过于复杂的选择器*/ 浏览器从右向左解析CSS.slider .slider-item-container .slider-item .slider-link .slider-img { width: 100%; } .alex-slider-img { 嵌套少*/ 权重低 便于使用的时候覆盖*/ width: 100%; }
尽量少用通配符选择器,可以单独写出来,罗列出来
避免通配选择器 * { } ul,li,dl,dt,dd,p { padding: 0; margin: 0; }
不必要的样式和没有用到的样式直接删除即可
移除无匹配的样式 .slider { width: 100%;*/ }
高级选择器少用(类似正则的),还有属性选择器,性能并不高
但是必须的情况下可少量使用
避免类正则的属性选择器 [class*="slider-indicator"] { } [class~="slider-indicator"] { 空格分隔*/ } [class^="slider-indicator"] { } [class$="slider-indicator"] { }
css属性优化:
不同类里存在相同样式可以提取出来一起写,减少冗余
而且方便统一修改
提取公用部分 .slider,.slider-item-container { 100%; height: 100%; }
合并一些可以合并的元素
上右下左
适当使用简写
合写 .slider { margin-top: 10px; margin-bottom: margin-right: 20px; margin-left: margin: 10px 20px 10px 20px; 10px 20px; 10px 20px 10px; background-color: #fff; font-size: 12px; font: ; }
其他优化:
不建议使用CSS @import引用加载CSS(scss里没关系)
做动画时优先使用css3动画,其次再考虑js动画
移动端优先考虑flex布局,少用float