已知，当前主流浏览器的刷新速率为60Hz（/75Hz），即每16.6ms刷新一次。刷新时会对屏幕上的 UI 元素进行重绘，如果重绘时间大于 16.6ms UI 界面就会产生卡顿。
每次刷新时，浏览器的基本流程为 js脚本执行 -> 样式布局 -> 样式重绘。
以输入框的输入内容需要在页面上实现实时渲染为例：
- 同步刷新
同步刷新机制下，当一个时间片无法执行完整个流程时，就会出现卡顿、掉帧现象。
- 防抖机制 （Debounced）
某一段时间的操作仅出发一次操作，适合操作代价较大的场景；
- 节流机制（Throttle）
限制操作触发刷新的频率，即不会在产生操作的每个时间片内都触发刷新。
- 异步更新
防抖和节流本质上均为限制触发刷新的频率来解决掉帧问题，而异步更新的规则是仅占用一整个时间片的部分时间进行刷新操作，流出时间给浏览器执行样式绘制，可以很大程度上降低掉帧的可能性。
标签：触发,浏览器,卡帧,样式,问题,刷新,操作,重绘 From： https://www.cnblogs.com/guoqiaoqiao/p/17117471.html