一个最简单的例子

原理

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

注意性能

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

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

不用positionleft做动画

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

  • 第三种:跳过layoutpaint

transform:只需composite

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

不同属性触发的流程也各不相同,可查:CSSTriggers

CSS 动画优化(面试 5%)

JS 优化

使用requestAnimationFrame代替setTimeoutsetInterval

CSS 优化

使用will-changetranslate

死记硬背


·未完待续·

参考文章

CSS 动画.pdf

网页性能管理详解

相关文章