性能优化之动画

首先你要搞清浏览器的渲染流程,如图

详细步骤:

    1. 浏览器解析(包括HTML,SVG,XHTML,CSS,JavaScript等等)

      • 解析HTML代码,构建Document Object Model (DOM)
      • 解析CSS代码,构建CSS Object Model (CSSOM)
      • 依据DOM和CSSOM,计算每个元素的最终样式并生成渲染树
    2. 布局阶段
      • 在知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。
    3. 绘制元素
      • 绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影,基本上包括元素的每个可视部分。绘制一般是在多个层上完成的。
    4. 合并渲染层
      • 由于页面的各部分可能被绘制到多层,因此它们需要按正确顺序绘制到屏幕上,以便正确渲染页面。

这四步里面,第一步和第四步都非常快,耗时的是第二步和第三步。

"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。

其次,你得明白修改 DOM 、修改样式表、和用户交互的过程中,会触发页面重新渲染。

重新渲染,就需要重新生成布局和重新绘制。前者叫做"重排"(reflow),后者叫做"重绘"(repaint)。

需要注意的是,"重绘"不一定需要"重排",比如改变某个网页元素的颜色,就只会触发"重绘",不会触发"重排",因为布局没有改变。但是,"重排"必然导致"重绘",比如改变一个网页元素的位置,就会同时触发"重排"和"重绘",因为布局改变了。

有一些技巧,可以降低浏览器重新渲染的频率和成本。比如尽量少用 table,因为table元素的重排和重绘成本,要高于div元素,

此外还有:

第一条,DOM 的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。

// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

第二条,如果某个样式是通过重排得到的,那么最好缓存结果。避免下一次用到的时候,浏览器又要重排。

第三条,不要一条条地改变样式,而要通过改变class,或者csstext属性,一次性地改变样式。

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

第四条,尽量使用离线DOM,而不是真实的网面DOM,来改变元素样式。比如,操作Document Fragment对象,完成后再把这个对象加入DOM。

第五条,先将元素设为display: none(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。

第六条,position属性为absolutefixed的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响。

第七条,只在必要的时候,才将元素的display属性为可见,因为不可见的元素不影响重排和重绘。另外,visibility : hidden的元素只对重绘有影响,不影响重排。

第八条,使用虚拟DOM的脚本库,比如React等。

第九条,使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。

下面,聊聊动画,众所周知,只有当帧率不小于60次/秒的时候,动画才会如丝绸般顺滑。

那么先了解一下把一帧渲染到页面上的流程,如图

  • JavaScript/CSS Animations、Transitions 和 Web Animation API。都实现一些视觉变化的效果,但尽量使用开销小的 CSS 动画
  • 样式计算。此过程是根据匹配选择器计算出哪些元素应用哪些 CSS 规则的过程。
  • 布局。在知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。
  • 绘制。绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影,基本上包括元素的每个可视部分。绘制一般是在多个表面(通常称为层)上完成的。
  • 合成。由于页面的各部分可能被绘制到多层,由此它们需要按正确顺序绘制到屏幕上,以便正确渲染页面。

这种方式是开销最大的,尽量避免!

触发条件:修改了元素的“layout”属性,也就是改变了元素的几何属性(例如宽度、高度、左侧或顶部位置等),那么浏览器将必须检查所有其他元素,然后“自动重排”页面。任何受影响的部分都需要重新绘制,而且最终绘制的元素需进行合成。

第二种,如图

这种开销次之。

触发条件:修改了“paint only”属性(例如背景图片、文字颜色或阴影等),即不会影响页面布局的属性,则浏览器会跳过布局,但仍将执行绘制。

第三种

这种开销最小,最适合于应用生命周期中的高压力点,例如动画或滚动!

这种可以避免重排和重绘,只需要改变合成的方式,就是我们的终极目标!

那怎么才能实现这个目标呢?你需要满足以下条件:

一、坚持使用 transforms 和 opacity 属性更改来实现动画。

因为只有 transforms 和 opacity 才是可以由合成器单独处理的属性!

使用 transform 和 opacity 时要注意的是,您更改这些属性所在的元素应处于其自身的合成器层。要做一个层,您必须提升元素,提升方法往下看

二、使用 will-change 或 translateZ 提升移动的元素

.moving-element {
  will-change: transform;
}

/*或者,对于旧版浏览器,或者不支持 will-change 的浏览器 */
.moving-element {
  transform: translateZ(0);
}

这可以提前警示浏览器即将出现更改,根据您打算更改的元素,浏览器可能可以预先安排,如创建合成器层。

三、避免过度使用提升规则,因为每个层都需要内存和管理开销!

http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=zh-cn

https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

时间: 2024-10-12 12:57:25

性能优化之动画的相关文章

前端性能优化 CSS动画

最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是: * 改变位置 * 改变大小 * 旋转 * 改变透明度 层?重绘?回流和重布局?图层重组? 首先要了解CSS的图层的概

css写作建议和性能优化小结

1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,css只要能用来布局,把效果图排出来就可以了,其它的细节或者优化,不需要怎么考虑.但是我觉得css可不只是把页面的布局完成就是完事的,还需要考虑很多细节有优化,更不会像大家想得那么简单,在学习当中,如果发现什么技巧或者优化的点,我也会学以致用!那么今天,就分享下我总结的css写作建议和性能优化的一些问题

前端性能优化(css动画篇)

正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章,学到了很多,在这里记录一下,其中的知识都是来源于这俩篇文章,我只是截取了其中比较关注的内容出来,原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时,以下四种情形绘制的效率较高,分别是:* 改

CSS3 动画卡顿性能优化解决方案--摘抄

最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区,不过项目在磕磕绊绊中完成的差不多了,但是遇到了CSS3动画渲染的性能问题,所以我也是被逼的,再回过头来从浏览器渲染网页的流程出发,去找动画卡顿的症结. 浏览器渲染网页的流程如下: 使用 HTML 创建文档对象模型(DOM) 使用 CSS 创建 CSS 对象模型(CSSOM) 基于 DOM 和 CSS

iOS开发——项目实战总结&UITableView性能优化与卡顿问题

UITableView性能优化与卡顿问题 1.最常用的就是cell的重用, 注册重用标识符 如果不重用cell时,每当一个cell显示到屏幕上时,就会重新创建一个新的cell 如果有很多数据的时候,就会堆积很多cell.如果重用cell,为cell创建一个ID 每当需要显示cell 的时候,都会先去缓冲池中寻找可循环利用的cell,如果没有再重新创建cell 2.避免cell的重新布局 cell的布局填充等操作 比较耗时,一般创建时就布局好 如可以将cell单独放到一个自定义类,初始化时就布局好

使用Html5+C#+微信 开发移动端游戏详细教程:(六)游戏界面布局与性能优化

本篇教程我们主要讲解在游戏界面上的布局一般遵循哪些原则和一些性能优化的通用方法. 接着教程(五),我们通过Loading类一次性加载了全部图像素材,现在要把我们所用到的素材变成图片对象显示在界面上,由上而下,首先是top层,top里面包涵了玩家(微信)头像,关卡信息,怪物血条信息,玩家金币,玩家宝石,玩家总攻击力. 定义函数 setTop 来初始化top层: function setTop() { TopDiv = new LSprite();//定义top层 var Topshape = ne

Android性能优化篇

很多App都会遇到以下几个常见的性能问题: 启动速度慢:界面跳转慢:事件响应慢:滑动和动画卡顿. 一.启动速度优化. 优化初始化任务: 1. 把一些初始化任务懒加载初始化 2. 把初始化任务并行化(异步化) 3. 使初始化任务可以插拔(一个任务出问题不会影响到其他的任务) 其他: 1. 控制线程数量,注意线程的使用,用自己的线程池替换三方或者二方SDK的线程池,线程太多占用cpu资源, 2. 使用缓存来减少I/O操作(读数据库,读文件,SharedPreference)减少网络请求(判断无网络直

雅虎35条性能优化建议

雅虎35条性能优化建议分7类,共35条: [内容]尽量减少HTTP请求数 [服务器]使用CDN(Content Delivery Network) [服务器]添上Expires或者Cache-Control HTTP头 [服务器]Gzip组件 [css]把样式表放在顶部 [js]把脚本放在底部 [css]避免使用CSS表达式 [js, css]把JavaScript和CSS放到外面 [内容]减少DNS查找 [js, css]压缩JavaScript和CSS [内容]避免重定向 [js]去除重复脚

iOS性能优化:Instruments使用实战(转)

采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instruments使用技巧 关于Instruments官方有一个很有用的用户使用Guide,当然如果不习惯官方英文可以在这里找到中文本翻译版本PDF参阅.Instruments 确实是一个很强大的工具,用它来收集关于一个或多个系统进程的性能和行为的数据极为方便,并能及时跟踪随着时间产生的数据.还可以广泛收集不同类型的数据.关于Instrument工具基本使用不在赘述.如