实现动画的方式

  1. jQuery animation:setTimeout、top/left
  2. CSS3的animation、transition、transform
  3. JavaScript+Canva/WebGL/SVG
  4. 帧动画requestAnimationFrame
  5. GPU硬件加速GPU acceleration

用户体验FPS

FPS是图像领域中的定义，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数。FPS是测量用于保存、显示动态视频的信息数量。每秒钟帧数愈多，所显示的动作就会越流畅。通常，要避免动作不流畅的最低是30。某些计算机视频格式，每秒只能提供15帧。FPS也可以理解为我们常说的“刷新率（单位为Hz）”。

渲染原理

Devtool Timeline

检测的内容

  1. 网络通讯与HTML解析
  2. 执行JavaScript
  3. 重排
  4. 重绘

渲染过程

  1. DOM + CSS = Render Tree

  2. layout 重排
    造成重排的因素有：width height margin left/top等dom元素的位置属性

  3. paint 重绘
    造成重绘的因素有：box-shadow background border-radius等dom元素的样式

  4. composite Layers 将BitMap传输到GPU，渲染到屏幕
    开启GPU加速的因素有：transform opacity等

  5. 渲染的三个阶段：Layout、Paint、Commposite Layers

  6. 修改不同的CSS属性会触发不同阶段，参考网站CSS Triggers

  7. 触发阶段越前，渲染代价越高

硬件加速

1. 简介

术语：Texture 即CPU传输到GPU的一个Bitmap。CPU是中央处理器，GPU是图形处理器；GPU能快速对texture进行偏移、缩放、旋转、修改透明度等操作。

2. CPU和GPU对比
  • 相同之处：两者都有总线和外界联系，有自己的缓存体系，以及数字和逻辑运算单元。两者都是为了完成计算任务而设计。
  • 不同之处：CPU主要负责操作系统和应用程序，GPU主要负责跟显示相关的数据处理，GPU的活CPU一般都能干，但是效率低下。
  • 原理：CPU的单元大而少，GPU的单元小而多。我们可以理解为单元越大处理数据的能力就越强，单元越多处理的事务就越多。

3. 原理
  1. 浏览器根据CSS属性微元素生成Layers；将Layers作为texture上传到GPU；当改变Layer的transform、opacit属性时，渲染会跳过layout、paint直接通知GPU对Layer做变换。

4. 触发条件
  • 拥有3d transform属性
  • 使用animation、transition实现opacity、transform的动画
  • video
  • canvas
  • Flash
  • 使用CSS filters的元素
  • z-index大于某个相邻接点的Layer的元素

完美的animation