动画笔记

基础

一般显示器1秒刷新60次，1000/60=16ms，所以小于16毫秒的动画显示器也无法刷新。代码执行也需要时间，在一个时间间隔内未完成动画，如果代码复杂，执行效率不高，则会卡顿。如果时间间隔过长会出现不流畅。

JQUERY

• jQuery 不能避免 layout thrashing （有人喜欢将其翻译为“布局颠簸”，会导致多余relayout/reflow），因为它的代码不仅仅用于动画，它还用于很多其他场景。

• jQuery的内存消耗较大，经常会触发垃圾回收。而垃圾回收触发时很容易让动画卡住。
• jQuery使用了setInterval而不是 reqeustAnimationFrame(RAF)，因为 RAF 会在窗口失去焦点时停止触发，这会导致jQuery的bug。（目前jQuery已经使用了RAF）
  RAF切换标签页就不运行，，只在适当的时候运行，目前并不支持Android 所以移动端并不支持。

transition

CSS transition 的动画逻辑是由浏览器来执行，所以它的性能能够比 jQuery 动画好。它的优势体现在：

• 通过优化 DOM 操作，避免内存消耗来减少卡顿
• 使用与 RAF 类似的机制
• 强制使用硬件加速 （通过 GPU 来提高动画性能）

div { transform: translate3d(0, 0, 0);}

在移动端，我们经常用到如上的CSS代码实现所谓的“硬件加速”，来提高动画的流畅度。在部分情况下，我们的CSS动画的确变的更加流畅。但这个方法并不是万能药。当页面中加速的元素越来越多时，网页的性能便会下降。

面绘制的过程分为三个部分：layout、paint和合成。layout负责计算DOM元素的布局关系，paint负责将DOM元素绘制成位图，合成则负责将位图发送给GPU绘制到屏幕上（如果有transform、opacity等属性则通知GPU做处理）。

那么所谓的translate3d硬件加速到底做了什么事情呢？在Chrome中当某个DOM元素开启硬件加速之后，浏览器会为此元素单独创建一个“层”。当有单独的层之后，此元素的repaint操作将只需要更新自己，不用影响到别人。你可以将其理解为局部更新。所以开启了硬件加速的动画会变得流畅很多。

CSS属性会触发layout和paint，详见CSS triggers。我们需要尽量使用transform、opacity这类不触发layout和paint操作的CSS属性。或许你已经在不知不觉中使用了这种优化，比如使用transform:translate(10px, 10px);替代position:absolute; top:10px; left:10px;。

两个的比较 transition VS jquery

比较硬件加速

W3C硬件加速

携程 硬件加速

img VS background