在实习做一个移动项目的时候,实现一个动画效果,在 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 硬件加速的好与坏

参考

你可能感兴趣的文章

载入中...
Mertens Mertens

129 声望

发布于专栏

Mertens前端学习笔记

记录与分享本人在学习过程中的点点收获

3 人关注