JS动画

优点：

JS动画控制能力强，可以在动画播放过程中对动画进行精细控制，如开始、暂停、终止、取消等；
JS动画效果比CSS3动画丰富，功能涵盖面广，比如可以实现曲线运动、冲击闪烁、视差滚动等CSS难以实现的效果；
JS动画大多数情况下没有兼容性问题，而CSS3动画有兼容性问题；

缺点：

JS在浏览器的主线程中运行，而主线程中还有其它需要运行的JS脚本、样式计算、布局、绘制任务等，对其干扰可能导致线程出现阻塞，从而造成丢帧的情况；
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码；
JS动画往往需要频繁操作DOM的css属性来实现视觉上的动画效果，这个时候浏览器要不停地执行重绘和重排，这对于性能的消耗是很大的，尤其是在分配给浏览器的内存没那么宽裕的移动端。

CSS3动画

优点：

部分情况下浏览器可以对动画进行优化（比如专门新建一个图层用来跑动画），为什么说部分情况下呢，因为是有条件的：
1. 在Chromium基础上的浏览器中
2. 同时CSS动画不触发layout或paint，在CSS动画或JS动画触发了paint或layout时，需要main thread进行Layer树的重计算，这时CSS动画或JS动画都会阻塞后续操作。
部分效果可以强制使用硬件加速（通过 GPU 来提高动画性能）

缺点：

代码冗长。CSS 实现稍微复杂一点动画，CSS代码可能都会变得非常笨重；
运行过程控制较弱。css3动画只能在某些场景下控制动画的暂停与继续，不能在特定的位置添加回调函数。

main thread(主线程)和compositor thread(合成器线程)

渲染线程分为main thread(主线程)和compositor thread(合成器线程)。主线程中维护了一棵Layer树（LayerTreeHost），管理了TiledLayer，在compositor thread，维护了同样一颗LayerTreeHostImpl，管理了LayerImpl，这两棵树的内容是拷贝关系。因此可以彼此不干扰，当Javascript在main thread操作LayerTreeHost的同时，compositor thread可以用LayerTreeHostImpl做渲染。当Javascript繁忙导致主线程卡住时，合成到屏幕的过程也是流畅的。
为了实现防假死，鼠标键盘消息会被首先分发到compositor thread，然后再到main thread。这样，当main thread繁忙时，compositor thread还是能够响应一部分消息，例如，鼠标滚动时，如果main thread繁忙，compositor thread也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。

CSS动画比JS动画流畅的前提

CSS动画比较少或者不触发pain和layout，即重绘和重排时。例如通过改变如下属性生成的css动画，这时整个CSS动画得以在compositor thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作）：
1. backface-visibility：该属性指定当元素背面朝向观察者时是否可见（3D，实验中的功能）；
2. opacity：设置 div 元素的不透明级别；
3. perspective 设置元素视图，该属性只影响 3D 转换元素；
4. perspective-origin：该属性允许您改变 3D 元素的底部位置；
5. transform：该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
JS在执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compositor thread可以保持流畅；
部分属性能够启动3D加速和GPU硬件加速，例如使用transform的translateZ进行3D变换时；
通过设置 will-change 属性，浏览器就可以提前知道哪些元素的属性将会改变，提前做好准备。待需要改变元素的时机到来时，就可以立刻实现它们，从而避免卡顿等问题。
1. 不要将 will-change 应用到太多元素上，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。
2. 例如下面的代码就是提前告诉渲染引擎 box 元素将要做几何变换和透明度变换操作，这时候渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程直接去处理变换，这些变换并没有涉及到主线程，这样就大大提升了渲染的效率。

.box {will-change: transform, opacity;}

setTimeout、setInterval 和 requestAnimationFrame 的一些细节

setTimeout 和 setInterval

setTimeout 的执行时间并不是确定的。在JavaScript中，setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，所以 setTimeout 的实际执行时机一般要比其设定的时间晚一些。
刷新频率受屏幕分辨率和屏幕尺寸的影响，不同设备的屏幕绘制频率可能会不同，而 setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。 3.** setTimeout 的执行只是在内存中对元素属性进行改变，这个变化必须要等到屏幕下次绘制时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的元素。**假设屏幕每隔16.7ms刷新一次，而setTimeout 每隔10ms设置图像向左移动1px，就会出现如下绘制过程：
1. 第 0 ms：屏幕未绘制，等待中，setTimeout 也未执行，等待中；
2. 第 10 ms：屏幕未绘制，等待中，setTimeout 开始执行并设置元素属性 left=1px；
3. 第 16.7 ms：屏幕开始绘制，屏幕上的元素向左移动了 1px， setTimeout 未执行，继续等待中；
4. 第 20 ms：屏幕未绘制，等待中，setTimeout 开始执行并设置 left=2px;
5. 第 30 ms：屏幕未绘制，等待中，setTimeout 开始执行并设置 left=3px;
6. 第 33.4 ms：屏幕开始绘制，屏幕上的元素向左移动了 3px， setTimeout 未执行，继续等待中；
7. ... 从上面的绘制过程中可以看出，屏幕没有更新 left=2px 的那一帧画面，元素直接从left=1px 的位置跳到了 left=3px 的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。

setInterval的回调函数调用之间的实际延迟小于代码中设置的延迟，因为回调函数执行所需的时间“消耗”了间隔的一部分，如果回调函数执行时间长、执行次数多的话，误差也会越来越大：

// repeat with the interval of 2 seconds
let timerId = setInterval(() => console.log('tick', timerId), 2000);
// after 50 seconds stop
setTimeout(() => {
  clearInterval(timerId);
  console.log('stop', timerId);
}, 50000);

嵌套的setTimeout可以保证固定的延迟：

let timerId = setTimeout(function tick() {
  console.log('tick', timerId);
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

requestAnimationFrame

除了上文提到的requestAnimationFrame的优势外，requestAnimationFrame还有以下两个优势：

CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处于未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次是没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

关于最小时间间隔

2011年的标准中是这么规定的：
1. setTimeout：如果当前正在运行的任务是由setTimeout（）方法创建的任务，并且时间间隔小于4ms，则将时间间隔增加到4ms；
2. setInterval：如果时间间隔小于10ms，则将时间间隔增加到10ms。
在最新标准中：如果时间间隔小于0，则将时间间隔设置为0。如果嵌套级别大于5，并且时间间隔小于4ms，则将时间间隔设置为4ms。

定时器的清除

由于clearTimeout（）和clearInterval（）清除的是同一列表（活动计时器列表）中的条目，因此可以使用这两种方法清除setTimeout（）或 setInterval（）创建的计时器。