CSS 性能优化笔记

LiuZh 发布于2019-08-29 11:30 / 695人阅读

摘要：硬件加速是指应用的图形性能对浏览器中的一些图形操作交给来完成，因为是专门为处理图形而设计，所以它在速度和能耗上更有效率。

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

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

加载性能

减少文件体积，压缩代码

减少阻塞加载，不要用 import

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

选择器性能

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

渲染性能

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

浏览器的渲染机制

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

解析HTML(HTML Parser)

构建DOM树(DOM Tree)

渲染树构建(Render Tree)

绘制渲染树(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

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

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

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

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

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

不要使用 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 动画的性能

GPU云服务器云服务器 css优化性能优化优化系统性能网站性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111689.html

网页优化相关笔记一

摘要：优化条法则减少请求次数是性能优化的起点。总文件大小变化不大，但减少了请求次数从而加快了页面显示速度。使用内容分发网络可以通过服务提供商增加缓存相关压缩页面元素通过压缩响应内容可减少页面响应时间。混淆是最小化于源码的备选方式。 Yahoo WEB优化14条法则减少HTTP请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的作用。减少HTTP请求次数 Image maps组合多...

codecook 2019-08-19 18:11 评论0 收藏0
JS性能优化笔记

摘要：四如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。五尽量选用局部变量而不是全局变量。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。通过网上查找资料了解关于性能优化方面的内容，现简单整理，仅供大家在优化的过程中参考使用，如有什么问题请及时提出，再做出相应的补充修改。一、让...

baoxl 2019-08-21 10:20 评论0 收藏0
读书笔记(03) - 性能 - JavaScript高级程序设计

摘要：作用域链查找作用域链的查找是逐层向上查找。而全局变量和闭包则会与之相反，继续保存，所以使用用后需手动标记清除，以免造成内存泄漏。获取元素的属性获取元素的属性等参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域链查找作用域链的查找是逐层向上查找。查...

warnerwu 2019-08-23 13:52 评论0 收藏0
前端面试笔记 - 性能

摘要：页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...

JouyPub 2019-08-23 14:50 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0