摘要:硬件加速是指应用的图形性能对浏览器中的一些图形操作交给来完成,因为是专门为处理图形而设计,所以它在速度和能耗上更有效率。
在实习做一个移动项目的时候,实现一个动画效果,在 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 |
不要一条一条地修改 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 动画的性能
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111689.html
摘要:作用域链查找作用域链的查找是逐层向上查找。而全局变量和闭包则会与之相反,继续保存,所以使用用后需手动标记清除,以免造成内存泄漏。获取元素的属性获取元素的属性等参考文档高级程序设计作者以乐之名本文原创,有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域链查找 作用域链的查找是逐层向上查找。查...
摘要:页面中元素的布局是相对的,因此一个元素的布局发生变化,会联动地引发其他元素的布局发生变化。对于有位置重叠的元素的页面,这个过程尤其重要,因为一旦图层的合并顺序出错,将会导致元素显示异常。 What tools would you use to find a performance bug in your code? chrome What are some ways you may i...
摘要:虽然有着各种各样的不同,但是相同的是,他们前端优化不完全指南前端掘金篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面,使用很多基于Web的应用。这些站点看起来既不一样,用途也都各有不同,有在线视频,Social Media,新闻,邮件客户端...
阅读 3222·2023-04-26 00:57
阅读 565·2021-10-08 10:05
阅读 1308·2021-09-08 09:36
阅读 4007·2021-08-12 13:31
阅读 2511·2019-08-30 15:55
阅读 2211·2019-08-30 15:55
阅读 982·2019-08-30 15:55
阅读 2652·2019-08-29 13:17