CSS 性能优化笔记

原创 2016-11-15 13:46:52 898
摘要:真真切切的体会到了 CSS 对用户体验的影响非常明显,稍有不慎就是一个大坑。下面,我们就来谈谈 CSS 性能优化的问题。加载性能减少文件体积,压缩代码减少阻塞加载,不要用 import提高并发(这个不甚理解)选择器性能对整体性能的影响可以忽略不计了,但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 Github 的这个分享:GitHub's CSS Performa

真真切切的体会到了 CSS 对用户体验的影响非常明显,稍有不慎就是一个大坑。下面,我们就来谈谈 CSS 性能优化的问题。

加载性能

减少文件体积,压缩代码

减少阻塞加载,不要用 import

提高并发(这个不甚理解)

选择器性能

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

渲染性能

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

浏览器的渲染机制

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

解析HTML(HTML Parser)

构建DOM树(DOM Tree)

渲染树构建(Render Tree)

绘制渲染树(Painting)

wKioL1gpuyiQg_r1AAAg8NiIJgI696.png

慎重选择高消耗的样式

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

box-shadows

border-radius

transparency

transforms

CSS filters(性能杀手)

避免过分重排(Reflow)

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

QQ图片20161115134655.png

怎么减少 Reflow

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

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

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

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

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

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

避免过分重绘(Repaints)

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

QQ图片20161115134655.png

优化动画

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);
}


发布手记

热门词条