浏览器卡帧、掉帧问题

　　已知，当前主流浏览器的刷新速率为60Hz（/75Hz），即每16.6ms刷新一次。刷新时会对屏幕上的 UI 元素进行重绘，如果重绘时间大于 16.6ms UI 界面就会产生卡顿。

　　每次刷新时，浏览器的基本流程为  js脚本执行 -> 样式布局 -> 样式重绘。

以输入框的输入内容需要在页面上实现实时渲染为例：

• 　　同步刷新

　　同步刷新机制下，当一个时间片无法执行完整个流程时，就会出现卡顿、掉帧现象。

• 　　防抖机制 （Debounced）

　　某一段时间的操作仅出发一次操作，适合操作代价较大的场景；

• 　　节流机制（Throttle）

　　限制操作触发刷新的频率，即不会在产生操作的每个时间片内都触发刷新。

• 　　异步更新

　　防抖和节流本质上均为限制触发刷新的频率来解决掉帧问题，而异步更新的规则是仅占用一整个时间片的部分时间进行刷新操作，流出时间给浏览器执行样式绘制，可以很大程度上降低掉帧的可能性。