CSS揭秘之性能优化技巧篇

一、写在前面

我们说的性能优化与降低开销，那必然都是在都能实现需求的条件下，选取其中的“最优解”，而不是避开需求，泛泛地谈性能和开销。

“沉迷”于寻求最优解，在各行各业都存在，哪怕做一顿晚餐，人们也总在摸索如何能在更短的时间更少的资源，做更多的“美味”。例如要考虑先把米放到电饭煲，
然后把需要解冻的拿出来解冻，把蘑菇黄豆这种需要浸泡的先“预处理”，青菜要放在后面炒，汤要先炖，
洗菜的水要用来浇花...需要切的菜原料排序要靠近，有些菜可以一起洗省时节水，要提前准备好装菜的器皿否则你可能要洗好几次手

瞧做一顿晚餐其实也可以很讲究，归纳一下这些行为，可以统称为“优化行为”，也可以引用一些术语表示，例如寻找“最优解“和”关键路径“，
在 CSS 的使用中，同样也需要”关键路径“、”最优解“和”优化“，下面将从这几个方面解释 CSS 性能优化：

①渲染方向的优化

②加载方向的优化

二、CSS性能优化技巧

2.1 渲染方向的优化

• ①减少重排（redraw）重绘（repaint）

例如符合条件的vue中应尽可能使用 v-show 代替 v-if。v-show 是通过改变 css display 属性值实现切换效果，
v-if 则是通过直接销毁或创建 dom 元素来达到显示和隐藏的效果。 v-if是真正的条件渲染，当一开始的值为true时才会编译渲染，
而v-show不管怎样都会编译，只是简单地css属性切换。v-if适合条件不经常改变的场景，因为它的切换会重新编译渲染，
会创建或销毁 dom 节点，开销较大。 v-show 适合切换较为频繁的场景，开销较小。

• 
  

  ②减少使用性能开销大的属性：例如动画、浮动、特殊定位。

  
  
• 
  

  ③减少css计算属性的使用，有时它们不是必须使用的：例如 calc(100% - 20px)，如果这 20px 是边距，

  
  

那么或许可以考虑 border-size：border-box。

• 
  

  ④脚本行为的防抖节流，减少不必要的的重复渲染开销。

  
  
• 
  

  ⑤属性值为 0 时，不必添加单位（无论是相对单位还是绝对单位），那可能会增加计算开销，

  
  

且也没有规范提倡0值加单位，那是没有意义的，0rem和0em在结果上是没有区别的，但加上单位可能会带来不必要的计算开销。
关于0不必加单位，想必你也收到过编辑器的优化提示。

• ⑥css 简写属性的使用，有时开销会更大得不偿失，例如 padding: 0 2px 0 0;和 padding-right:2px;

后者的写法对机器和人的阅读理解和计算的开销都是更小的。常见的 css 可简写属性还有 background，border，
font 和 margin。

• ⑦尽可能减少 CSS 规则的数量，并删除未使用到的 CSS 规则。一些默认就有的 CSS 规则，就不必写了，具有继承性的样式，

也不必每级节点都写。

-⑧避免使用不必要且复杂的 CSS 选择器（尤其是后代选择器），因为此类选择器需要耗用更多的 CPU 处理能力来执行选择器匹配。
总之不必要的深度，不管是 css 还是 dom 都不是好的选择，这对人和机器都是同样的道理，因为读和理解起来都同样的“费力”。

-⑨关键选择器（key selector）。

览器会从最右边的样式选择器开始，依次向左匹配。最右边的选择器相当于关键选择器（key selector），
浏览器会根据关键选择器从 dom 中筛选出对应的元素，然后再向上遍历相关的父元素，判断是否匹配。

所以组合嵌套选择器时，匹配语句越短越简单，浏览器消耗的时间越短，
同时也应该减少像标签选择器，这样的大范围命中的通配选择器出现在组合嵌套选择器链中，
因为那样会让浏览器做大量的筛选，从而去判断选出匹配的元素。

-⑩少用*{}通配规则，那样的计算开销是巨大的。

2.2 加载方向的优化

• ①减少 @import 的使用

合理规划 css 的加载引入方式，减少 @import 的使用，页面被加载时，link 会同时被加载，
而 @import 引用的 CSS 会等到页面被加载完再加载。

• 
  

  ②css 尽量放在 head 中，会先加载，减少首次渲染时间。

  
  
• 
  

  ③按需加载，不必一次就加载完全部资源，在单页应用中应尤其注意。

  
  
• 
  

  ④考虑样式和结构行为分离，抽放到独立css文件，减少重复加载和渲染。

  
  
• 
  

  ⑤css压缩技术的应用，减少体积。

  
  

三、写在后面

有一个好的家务机器人，我们可以省很多事，少操心很多，同样的，
有一个好的 css 预处理工具和打包工具或许也可以帮助程序员节省很多精力。

网速的提升和设备性能提升，也让程序员拥有许多资源可以“挥霍”，例如现在的很多“国民级”的
应用在3g网络下和早期的手机中都无法正常工作，但那似乎不影响它们的“优秀”。诚然，那又是复杂的问题。

正如开头所言，程序员寻求“最优解”和“关键路径”，应当在有可替代方案和能满足需求的前提下进行。

仅是理论空谈优化，无异于是”耍流氓“。矛盾无处无时不在，重要的是衡量取舍和你能承受。