-CSS 优化
CSS 优化
CSS 优化
CSS 优化
加载性能
css压缩:将写好的css进行打包压缩,可以减少很多的体积css单一样式:当需要下边距和左边距的时候,很多时候选择:margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行的效率更高- 减少使用
@import,而建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载
选择器性能
关键选择器
(keyselector),选择器的最后面的部分为关键选择器(即用来匹配目标元 素的部分),CSS选择符是从右到左进行匹配的,当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元 素等等如果规则拥有
ID选择器作为其关键选择器,则不要为规则增加标签,过滤掉无关的规 则(这样样式系统就不会浪费时间去匹 配它们了- 避免使用通配规则,如
*{}计算次数惊人!只对需要用到的元素进行选择 - 尽量少的去对标签进行选择,而是用
class - 尽量少的去使用后代选择器,降低选择器的权重值,后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
- 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则
渲染性能
慎重使用高性能属性:浮动、定位,
尽量减少页面重排、重绘,
- 去除空规则:
{},空规则的产生原因一般来说是为了预留样式,去除这些空规则无疑 能减少css文档体积 - 属性值为
0时,不加单位 - 属性值为浮动小数
0.**,可以省略小数点之前的 0 - 标准化各种浏览器前缀:带浏览器前缀的在前,标准属性在后
- 不使用
@import前缀,它会影响css的加载速度 - 选择器优化嵌套,尽量避免层级过深
css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时 图片本身会变大,使用时,优劣考虑清楚,再使用- 正确使用
display的属性,由于display的作用,某些样式组合会无效,徒增样式体积 的同时也影响解析性能 - 不滥用
web字体,对于中文网站来说WebFonts可能很陌生,国外却很流行,webfonts通常体积庞大,而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能
可维护性、健壮性
- 将具有相同属性的样式抽离出来,整合并通过
class在页面中进行使用,提高css的可 维护性 - 样式与内容分离:将
css代码定义到外部css中