CSS3 动画性能优化小白教程_css3菜鸟教程网

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。60fps 与设备刷新率目前大多数设备的屏幕刷新率为60fps(Frame per Second),即每秒60帧。因此,如果在页面中有一个动画或渐变效果,或者用户正在滚动页面,那么浏览器渲染动画或页面的每一帧的速率

CSS3 动画性能优化小白教程

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

CSS3 动画性能优化小白教程_css3菜鸟教程网

60fps 与设备刷新率

目前大多数设备的屏幕刷新率为60fps(Frame per Second),即每秒60帧。因此,如果在页面中有一个动画或渐变效果,或者用户正在滚动页面,那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致,即每一帧要在16毫秒(1S/60 = 16.66ms)之内完成。如果无法完成,由于帧率的下降会导致内容在屏幕上抖动。 此现象通常称为卡顿,会对用户体验产生负面影响。

浏览器渲染

在讲性能之前,我们需要先对浏览器渲染页面有一个基础的理解。

CSS 图层

浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。需要注意的是,如果图层中某个元素需要重绘,那么整个图层都需要重绘(关于重绘下面会讲到)。

渲染过程

简单来说,浏览器的渲染过程其实就是将页面转换成像素显示到屏幕上,大致有如下几个步骤:

CSS3 动画性能优化小白教程_css3菜鸟教程网

  • Javascript操作: 一般来说,我们会使用 JavaScript 来实现一些交互操作。比如用往页面里添加一些元素,切换显示隐藏等
  • style 样式计算: 该过程根据 CSS 选择器,获取每个元素匹配的 CSS 样式并计算其最终应用样式
  • Layout 布局:该过程计算元素要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素,例如 <body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点,因此对于浏览器来说,布局是经常发生的
  • Paint 绘制:本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等。也就是绘制元素所有的可视效果
  • Composite 渲染层合并:在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示在屏幕上

如果我们需要提高动画的性能,需要做的就是减少浏览器在动画运行时所需要做的工作。当 CSS 在进行动画时,其不同属性值引起的改变,重新渲染可能会有三种执行路径:

A:layout -> paint -> composite
B:paint -> composite
C:composite

很明显,最短路径的 C 动画性能是最高的,所以我们在使用动画的时候就得考虑使用什么属性,以尽量减少执行路径。

动画属性

CSS 的属性大致分为三类:布局类(layout),绘制类(paint),合成类(composite)。

重排(reflow)

由元素的布局类属性改变所触发的行为过程,我们称为 reflow,也叫做 relayout(重新布局)。当某个节点 reflow 时会重新计算节点的尺寸和位置,还可能会引起其它节点的 reflow。

该系列属性的改变,会执行路径 A 进行重新渲染,所以性能是最差的。(这充分说明,重排会引起重绘)

触发重排的属性

盒子模型相关属性会触发重布局:

  • width
  • height
  • padding
  • margin
  • display
  • border-width
  • border
  • min-height

定位属性及浮动也会触发重布局:

  • top
  • bottom
  • left
  • right
  • position
  • float
  • clear

改变节点内部文字结构也会触发重布局:

  • text-align
  • overflow-y
  • font-weight
  • overflow
  • font-family
  • line-height
  • vertival-align
  • white-space
  • font-size

重绘(repaint)

由绘制类属性改变触发节点重新绘制其可视效果的过程,我们称为 repaint。

该系列属性的改变,会执行路径 B,所以性能一般。

触发重绘的属性

修改时只触发重绘的属性有:

  • color
  • border-style
  • border-radius
  • visibility
  • text-decoration
  • background
  • background-image
  • background-position
  • background-repeat
  • background-size
  • outline-color
  • outline
  • outline-style
  • outline-width
  • box-shadow

上面的属性由于不会修改节点的大小和位置,因此不会触发重排,其只是改变了节点内部的渲染效果,所以只会进行重绘以下的步骤。

composite

目前只有两个属性属于 composite 类:

  • transform
  • opactiy

该系列属性的改变,会执行路径 C,所以性能最佳。

如果想了解更多 CSS 中会影响 Layout、Paint 和 Composite 的属性,可参考:CSS Triggers。

优化技巧

减少动画元素

减少动画元素,是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构,去除不必要的动画元素,减少元素的数量,相应地会减少布页面局和绘制的时间。

尽量使用 fixed、absolute 定位

对于动画元素,尽量使用用 fixed、absolute 定位方式,避免影响到其他节点重排。

尽量只改变transform和opacity

能用 transform、opacity 优先使用,其属性的改变不会发生重排和重绘。如位移操作的,可以使用translate 来实现,渐隐渐现效果可以使用 opacity 属性来实现。

恰当开启硬件加速效果

对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform 等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意,在不需要的时候需去掉避免过多的内存消耗。

transform: translate3d(0, 0, 0);
transform: translateZ(0);
will-change: transform
海计划公众号
(0)
上一篇 2020/04/03 19:46
下一篇 2020/04/03 19:46

您可能感兴趣的内容

  • node.js中Puppeteer爬虫基础知识教程_爬虫入门教程

    Puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的Node库。可以通过Puppeteer的提供的api直接控制Chrome模拟大部分用户操作来进行UI Test或者作为爬虫访问页面来收集数据。 环境和安装Puppeteer本身依赖6.4以上的Node,但是为了异步超级好用的async/await,推荐使用7.

    2020/03/29
  • 成为优秀Angular开发者所需要学习的19件事入门百科_Angular小白常识

    原文出自Medium ,作者: Aphinya Dechalert京东云开发者社区编译 ,地址:https://mp.weixin.qq.com/s一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。Angular看起来似乎总是在改变和更新 – 但实际上,还

    2020/03/29
  • javascript es6是什么?菜鸟指南_es6使用教程

    ES6就是ECMAScript6是新版本JavaScript语言的标准。已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ECMAScript6在保证向下兼容的前提下,提供大量新特性,目前浏览器兼容情况如下:ES6特性如下:1、块级作用域 关键字let, 常量const2、对象字面量的属性赋值简写(pr

    2020/03/24
  • tracking.js指南攻略_一款js封装的图像处理的库

    tracking.js指南攻略 官方网址:http://trackingjs.com GitHub:https://github.com/eduardolundgren/track…

    2020/03/06
  • Js字符串数组初始化小白攻略_字符串攻略教程

    有时候我们需要初始化一个很长的字符串数组,举个例子:const tags = [‘html’,’body’,’h1′,’h2′,’h3′,’h4′,’h5′,’h6′,’form’,’input’,’label’,// 后面还有很长…
    ];后续的处理是需要遍历这整个数组去完成某些功能,不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些

    2020/03/26
  • wxa-plugin-canvas基础教程_小程序海报组件

    wxa-plugin-canvas基础教程 GitHub:https://github.com/jasondu/wxa-plugin-canvas 简介描述:小程序海报组件 wxa…

    2020/03/06
  • JSON.parse 比 Object 字面量语法更快菜鸟教程下载_json小白帮助

    针对太长不看的读者因为 JSON 语法比 Javascript 的语法更简单,因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时,解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时(比如配置 redux 的 store),我们可以根据这一点来提升首屏加载性能。为什么 JSON.parse

    2020/03/22
  • jQuery数据缓存$.data 的使用以及源码解析入门基础_jquery攻略教程

    一、实现原理:对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取、设置、

    2020/04/03
  • 如何在 Vue 中使用 JSX 以及使用它的原因入门指南_JSX基础教程

    Vue.js 具有简单的 API 和几个选项,可用于在我们的组件中定义HTML模板。我们可以使用标签选项,在根组件实例上定义template属性,或者使用单文件组件。上面的选项很棒并且可以完美地工作,但是,在您的应用程序的生命周期中,有时会感到笨拙,设计过度或非常不灵活。那么,我们为什么要使用 JSX 而不是其他模板定义呢?JSX 更易读

    2020/03/23
  • 怎样修复Web应用程序中的内存泄漏?小白攻略_内存小白指南

    从服务器端渲染的网站切换到客户端渲染的 SPA 时,我们突然不得不更加注意用户设备上的资源,必须做很多工作:不要阻塞 UI 线程,不要使笔记本电脑的风扇疯狂旋转,不要耗尽手机的电池等。我们将交互性和“类应用程序”行为转换成了更好的新型问题,这些问题实际上并不存在在服务端渲染的世界中。这些问题中最主要的一个是内存泄漏。编码不正确的 SPA 可能很容易耗尽 MB

    2020/03/20
  • javascript解释器是什么?使用指南_解释器小白知识

    JavaScript是一门脚本语言,是需要被别人解释执行的,这个别人就是JavaScript解释器。它读取一条JS语句、翻译、执行,然后再读取下一条JS语句,周而复始。JavaScript解释器是用来干嘛的呢?目的就是执行JavaScript源代码JS解释器包含了词法解析器,句法解析器,字节码生成器,字节码解释器。词法解析器它可以让一行行代码源码拆分成一个个

    2020/03/20
  • Pikaday基础知识教程_一个 轻量级、无依耐Js日期选择器

    Pikaday基础知识教程 GitHub:https://github.com/Pikaday/Pikaday 简介描述:一个 轻量级、无依耐Js日期选择器 Pikaday 是一个…

    2020/03/06
  • vue项目中兼容ie8以上浏览器的配置新手入门_兼容新手入门

    1.首先需要在根目录的index.html文件加入如下代码2.npm安装依赖安装babel-polyfill 插件指令:npm install babel-polyfill –save-dev3.在入口文件main.js文件中引入插件import ‘b

    2020/03/26
  • 为什么要使用状态管理小白攻略_状态使用指南

    我们平时开发的大部分项目,由于复杂度不够, 很少使用 Vuex、Redux 等状态管理库,就算引入了 Vuex 这些库,也只是当作一个全局数据引用,并非对应用状态进行管理。但一旦页面的复杂度比较高,必然要引入状态管理,今天就聊聊我理解中的状态管理。如果涉及到举例,由于我对Vuex更熟悉,团队内也大多比较熟悉Vue,因此会使用Vuex作例子。到底什么时候应该使

    2020/03/29
  • regulex基础知识教程_js正则表达式图形展示工具

    regulex基础知识教程 官方网址:https://jex.im/regulex/ GitHub:https://github.com/CJex/regulex 简介描述:js正…

    2020/03/06
  • 网站web服务器个人博客站开通那些端口合适?入门基础_博客使用帮助

    一般网站服务器,只需要开通80 443,(ssh端口默认22,,建议修改)ping命令没有端口,因为ICMP 协议没有到tcp层,仅走ip层,由于IP层协议是一种点对点的协议,而非端对端的协议,它提供无连接的数据报服务,没有端口的概念。端口 服务 说明21 FTP FTP 服务所开放的端口,用于上传、下载文件。22 SSH SSH 端口,用于通过命令行模式

    2020/03/22