CSS 性能优化笔记

在实习做一个移动项目的时候，实现一个动画效果，在 iPhone 和 Chrome 上调试没有问题，在千元左右的 Android 机上测试问题就很大了，卡顿非常明显，百思不得其解，吐血，卒。

这个悲伤的故事就是本文的引子，真真切切的体会到了 CSS 对用户体验的影响非常明显，稍有不慎就是一个大坑。下面，我们就来谈谈 CSS 性能优化的问题。

加载性能

• 减少文件体积，压缩代码

• 减少阻塞加载，不要用 import

• 提高并发（这个不甚理解）

选择器性能

对整体性能的影响可以忽略不计了，但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 Github 的这个分享：GitHub's CSS Performance by Jon Rohan

渲染性能

渲染性能是 CSS 优化最重要的关注对象。我们先来了解一下浏览器的渲染机制。

浏览器的渲染机制

浏览器渲染展示网页的过程，大致分为以下几个步骤：

1. 解析HTML(HTML Parser)

2. 构建DOM树(DOM Tree)

3. 渲染树构建(Render Tree)

4. 绘制渲染树(Painting)

慎重选择高消耗的样式

什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。

• box-shadows

• border-radius

• transparency

• transforms

• CSS filters（性能杀手）

避免过分重排(Reflow)

简单解释一下 Reflow：当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。

常见的重排元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

怎么减少 Reflow

1. 不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className

2. 把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来

3. 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

4. 尽可能不要修改影响范围比较大的 DOM

5. 为动画的元素使用绝对定位 absolute / fixed

6. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

避免过分重绘(Repaints)

当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。

常见的重绘元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

优化动画

CSS3 动画是优化的重中之重。除了做到上面两点，减少 Reflow 和 Repaints 之外，还需要注意以下方面。

启用 GPU 硬件加速

GPU（Graphics Processing Unit） 是图像处理器。GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
GPU 加速可以不仅应用于3D，而且也可以应用于2D。这里， GPU 加速通常包括以下几个部分：Canvas2D，布局合成（Layout Compositing）, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

/*
 * 根据上面的结论
 * 将 2d transform 换成 3d
 * 就可以强制开启 GPU 加速
 * 提高动画性能
 */
div {
  transform: translate(10px, 10px);
}
div {
  transform: translate3d(10px, 10px, 0);
}

需要注意的是，开启硬件加速相应的也会有额外的开销，参见这篇文章 CSS 硬件加速的好与坏

参考

• CSS 优化、提高性能的方法有哪些？ - 赵望野

• CSS performance revisited: selectors, bloat and expensive styles

• 浏览器的渲染原理简介

• 谈谈 CSS 性能

• 前端工程师需要明白的「浏览器渲染」

• 学习通过 CSS 硬件加速提升你网站的性能

• CSS 硬件加速的好与坏

• 两张图解释 CSS 动画的性能