前端开发CSS

CSS优化

CSS, 前端, 面试题

凤凰古城

加载性能优化

  1. CSS压缩：将写好的CSS进行打包压缩，可以减少很多体积
  2. css单一样式：当需要下边距和左边距的时候，写成
    1
    2
    margin-bottom: bottom;
    margin-left: left;

比

1
margin: top 0 bottom 0;

执行效率更高

  1. 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者 是等待页面加载完成之后再进行加载

选择器性能

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等

  1. 避免使用通配符
    *{}的计算次数惊人。
  2. 尽量少的对标签进行选择，而是用class
    如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
  3. 不要去用标签限定id或者类选择器。
  4. 尽量少的使用后代选择器，降低选择器的权重值
    后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
  5. 考虑继承
    了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

渲染性能

  1. 慎重使用高性能属性：浮动、定位
  2. 尽量减少页面重排、重绘。
  3. 属性值为0时，不加单位
  4. 属性值为浮动小数0.**，可以省略小数点之前的0
  5. 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后
  6. 抽象提取公共样式，减少代码量
  7. 选择器优化嵌套，尽量避免层级过深
  8. css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

可维护性、健壮性

  1. 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性

  2. 继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class="btn btn-active btn-blue"

  3. 样式与内容分离：讲css代码定义到外部css中

  4. 容器与样式分离

分享到