一个最简单的例子

原理

  • 每过一段时间，将 div 移动一小段距离
  • 用setInterval实现
  • 直到移动到目标处

注意性能

Chrome 开发者工具，点任何一个 Tab，按 Esc，按竖排省略号按钮，选Rendering，勾选Paint flashing

  • 绿色闪烁表示：重新绘制（repaint）
  • 每次闪烁，都消耗性能
  • CSS 渲染过程依次包含：布局、绘制、合成
  • 其中布局和绘制有可能会被省略

不用position和left做动画

用transform

demo

transform原理

  • transform:translateX(0=>300px);
  • 直接修改会被合成，需要等一会修改
  • transition过渡属性可以自动脑补中间帧

注意transform性能

  • 并没有repaint（重新绘制）
  • 比更改left性能好

浏览器渲染原理

参考文章

渲染树构建、布局及绘制

渲染性能 by goole team

使用 transform 和 opacity 属性更改来实现动画

查看 CSS 各属性会出发什么？

（Layout Paint Composite）（布局 绘制 合成）

浏览器渲染过程

步骤：

  • 根据 HTML 树构建 HTML 树（DOM）
  • 根据 CSS 构建 CSS 树（CSSDOM）
  • 将两棵树合并成一棵：渲染树（render tree）
  • 即构建对象模型

由渲染树（render tree）可进行

  • Layout布局（文档流和定位、盒模型、计算元素的大小和位置）
  • Paint绘制（把边框颜色、文字颜色、阴影等画出来）
  • Composite合成（根据层叠关系展示画面）
  • 即渲染树构建、布局及绘制

三棵树（DOM CSSDOM render）

如何更新样式

一般用 JS 来更新样式

比如

1
2
3
4
5

div.style.background='red'
div.style.display='none'
/* 加样式不如加类，类里可包含许多类 */
div.classList.add('red')
div.remove(); /* 直接删掉节点 */

三种不同的渲染方式

  1. JS/CSS>样式>布局>合成
  2. JS/CSS>样式>无布局>绘制>合成
  3. JS/CSS>样式>无布局>无绘制>合成

JS 和 Style 样式计算必不可少

最后都要composite

不同方法间的区别（以下链接 demo）

  • 第一种：全走

div.remove()：会触发当前消失，其他元素重布局relayout

  • 第二种：跳过layout

未改变元素的位置和大小

比如只改变背景颜色：直接repaint+composite

  • 第三种：跳过layout和paint

transform：只需composite

  • 注意：必须全屏查看效果，在iframe里看有问题

不同属性触发的流程也各不相同，可查：CSSTriggers

CSS 动画优化（面试 5%）

JS 优化

使用requestAnimationFrame代替setTimeout或setInterval

CSS 优化

使用will-change或translate

死记硬背

参考文章

CSS 动画.pdf

网页性能管理详解

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简