JS动画卡顿分析

动画卡顿分析及解决方法

一、卡顿原因分析

我们所使用的设备大多数的刷新频率都是60HZ，也就是每秒钟会有60个画面来组成一个完整的动画来进行展示。这就要求我们的浏览器对每一帧动画的渲染都在16ms内完成（1秒等于1000ms），一旦渲染时间超过了这个时间段，用户在观看时就会感觉到卡顿。通常，一般人可以分辨的频率也在60HZ左右，所以经常会有人提起打游戏时卡顿，也就是游戏掉帧。

二、优化的一些方法

1.JavaScript的相关优化：优化JavaScript的执行效率

• 使用requestAnimationFrame代替setTimeout和setInterval

requestAnimationFrame是window对象的一个方法，他会告诉浏览器执行一个动画，并要求浏览器在下次重绘之前调用指定的回调函数更新动画。

具体参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

js是单线程执行，所以为了避免一些执行时间过长的任务会阻塞整个任务的执行，js中引入了异步队列的概念。执行程序是会首先执行主任务队列中的代码，当主任务队列为空时才执行异步队列中的任务。所以 setTimeout和setInterval无法保证回调函数的执行时机，可能会在一帧之内执行多次导致多次页面渲染，浪费CPU资源甚至产生卡顿。

• DOM无关的耗时操作放到Web Worker中

Web Worker的作用在于为JavaScript创建了多线程环境，Web Worker线程在后台运行，受主线程控制，两者互不干扰。Web Worker线程负担高延迟且UI无关的任务，主线程负责UI交互就会相对流畅。

2.降低样式选择器的复杂度，减少需要计算样式的元素个数

3.使用flex布局替代原有的老式布局。

flexbox布局更加高效。在能用flexbox布局的项目中，尽量用flexbox布局。