null - 程序员宅基地

动画性能优化实用方法整理_动画性能如何优化-程序员宅基地

技术标签： CSS

一、动画性能优化原理简述

【页面渲染过程】

1.javascript/css设置动画或变换

2.【计算样式】

根据css选择器，对每个DOM元素匹配对应的CSS样式。

从而确定每个DOM元素上应该应用什么CSS样式规则。

3.【布局】

计算每个DOM元素最终在屏幕上显示的大小和位置。

4.【绘制】

本质上就是填充像素的过程。

包括绘制文字、颜色、图像、边框和阴影等，也就是一个DOM元素所有的可视效果。

一般来说，这个绘制过程是在多个层上完成的。

5.【渲染层合并】

在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，

然后在屏幕上呈现。

【导致重排的因素】

1.调整窗口大小

2.改变字体

3.增加或者移除样式表

4.内容变化

5.激活CSS伪类

6.操作CSS属性

7.JavaScript操作DOM

8.计算 offsetWidth和 offsetHeight

9.设置 style 属性的值

10.CSS3 Animation或Transition

【导致重绘的因素】

1.页面首次加载

2.DOM元素添加、修改(内容)和删除(Reflow + Repaint)

3.仅修改DOM元素的颜色

4.应用新的样式或修改任何影响元素外观的属性

5.Resize浏览器窗口和滚动页面

6.读取元素的某些属性( offsetLeft、 offsetTop、 offsetHeight、 offsetWidth、 getComputedStyle() 等)

优化点一：减少重排、重绘

注：动画效果优选transform、opacity属性，因为二者不会造成页面的重排或重绘。

【生成独立RenderLayer的情况】

1.页面的根节点的RenderObject

2.有明确的CSS定位属性（ relative ， absolute 或者 transform ）

3.是透明的

4.有CSS overflow、CSS alpha遮罩（alpha mash）或者CSS reflection

5.有CSS 滤镜（fliter）

6.3D环境或者2D加速环境的canvas元素对应的RenderObject

7.video元素对应的RenderObject

【生成独立GraphicsLayer的情况】

1.有3Dtransform或者perspective的CSS属性的层

2.使用加速视频解码的video元素的层

3.3D或者加速2D环境下的canvas元素的层

4.插件，比如flash

5.对 opacity 和 transform 应用了CSS动画的层

6.使用了加速CSS滤镜（filters）的层

7.有合成层后代的层

8.同合成层重叠，且在该合成层上面（z-index）渲染的层

9.有backface-visibility属性的层

10.will-change:transform的层

优化点二：生成独立的RenderLayer（防止动画效果引起页面其他元素的重排）、GraphicsLayer（启用多缓存加速合成）

注：过多的GraphicsLayer会造成过大的内存消耗，特别对移动端性能影响较大，注意适度使用

二、可用优化方法整理

1.【减少重排/重绘】DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。

2.【减少重排】如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。

3.【减少重排/重绘】不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。

4.【减少重排/重绘】尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。

5.【减少重排/重绘】先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。

6.【生成独立的RenderLayer】position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。

7.【减少重排/重绘】只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。

8.使用虚拟DOM的脚本库，比如React等。

9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染，优化js动画

10.【减少重排】 left/top->translate width/height->scale,rotate,opacity

11.【生成独立的GraphicsLayer】尽可能多的利用硬件能力，开启GPU加速

12. 尽可能少的使用box-shadows与gradients，二者过于耗性能

*动画性能优化方法持续整理中......

文章整理自：

http://www.open-open.com/lib/view/open1475128810681.html

http://www.xuanfengge.com/css3-animations.html

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

本文链接：https://blog.csdn.net/z_Sherry/article/details/72123965

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

王斌老师的博客_王斌 github-程序员宅基地

文章浏览阅读480次。http://blog.sina.com.cn/s/blog_736d0b9101018cgc.html_王斌 github

ACM OJ Collection_htt//acm.wydtang.top/-程序员宅基地

文章浏览阅读737次。原文来自：http://blog.csdn.net/hncqp/article/details/4455263 ACM OJ Collection（排名不分先后）：中国：浙江大学（ZJU）：http://acm.zju.edu.cn/北京大学（PKU）：htt_htt//acm.wydtang.top/

ios 自己服务器苹果支付_修复苹果IOS支付-程序员宅基地

文章浏览阅读467次。更新记录1.0.0(2019-07-01)插件简介专门用来修复苹果IOS支付时出现"您已购买此App内购买项目。此项目将免费恢复"。问题描述首先在IOS平台里面创建“APP内购买项目”，选择的是“消耗型项目”，然后用uni-app官方的支付api进行支付，多支付几次，有时候就会出现提示“您已购买此App内购买项目。此项目将免费恢复”,特别是在沙盒测试里面支付很大几率出现,我明明选的是消耗型项目，应..._ios开发苹果支付恢复权益

spring MVC mock类单元测试（controller）_mvcmock-程序员宅基地

文章浏览阅读5.6k次。Spring从J2EE的Web端为每个关键接口提供了一个mock实现：MockHttpServletRequest几乎每个单元测试中都要使用这个类，它是J2EE Web应用程序最常用的接口HttpServletRequest的mock实现。MockHttpServletResponse此对象用于HttpServletRespons_mvcmock

【我的世界Minecraft-MC】常见及各种指令大杂烩【2022.8版】_summon生成掉落物-程序员宅基地

文章浏览阅读8.5k次，点赞7次，收藏22次。execute as @a at @s run clear @s minecraft:dark_oak_planks{display:{Name:“{“text”:“第三关[阴森古堡]”,“color”:“red”,“italic”:false}”,color:“16711680”},Enchantments:[{id:“protection”,lvl:1}],Unbreakable:1b} 1。Lore:[“{“text”:“免费”,“color”:“blue”,“italic”:false}”]..._summon生成掉落物

CentOS 7安装教程（图文详解）_centos 安装-程序员宅基地

文章浏览阅读10w+次，点赞487次，收藏2.1k次。CentOS 7安装教程：准备：软件：VMware Workstation 镜像文件：CentOS-7-x86_64-bin-DVD1.iso （附：教程较为详细，注释较多，故将操作的选项进行了加粗字体显示。） 1、文件--新建虚拟机--自定义 2、..._centos 安装

动画性能优化实用方法整理_动画性能如何优化-程序员宅基地

一、动画性能优化原理简述

二、可用优化方法整理

智能推荐

王斌老师的博客_王斌 github-程序员宅基地

ACM OJ Collection_htt//acm.wydtang.top/-程序员宅基地

ios 自己服务器苹果支付_修复苹果IOS支付-程序员宅基地

spring MVC mock类单元测试（controller）_mvcmock-程序员宅基地

【我的世界Minecraft-MC】常见及各种指令大杂烩【2022.8版】_summon生成掉落物-程序员宅基地

CentOS 7安装教程（图文详解）_centos 安装-程序员宅基地

随便推点

Github项目分享——免费的画图工具drow，前端插件化面试_draw github画图-程序员宅基地

如何开始学习人工智能？入门的学习路径和资源是什么？_人工智能学习路径-程序员宅基地

Unity3D 导入资源_unity怎么导入压缩包-程序员宅基地

jqgrid 服务器端验证,javascript – jqgrid服务器端错误消息/验证处理-程序员宅基地

白山头讲PV: 用calibre进行layout之间的比对-程序员宅基地

java exit方法_Java：如何测试调用System.exit（）的方法？-程序员宅基地

推荐文章

热门文章

相关标签