几个疑问点

来源：3-6 高频事件防抖【解救页面卡顿的秘药】

weixin_慕姐0221030

2022-05-19

老师好，对本节课的内容还是感到非常疑惑，望解答谢谢！
在代码中没有使用requestAnimationFrame时，默认一帧的生命周期中会有多次layout和paint，而在代码中使用了requestAnimationFrame后，一帧变得如课程中的图片是所示，这样理解对吗？即一帧中有pointermove不断触发layout与paint，但是只显示了一帧中最后一个move的改变。
图片描述
还是一帧本来就有以下几个周期，代码中加了requestAnimationFrame后使得pointermove虽然触发了多次，但都在rAF周期中被一次处理后再layout和paint一次即可

写回答

1回答

weixin_慕姐0221030

提问者

2022-05-19

即一帧中到底会有多少次layout和paint呢？rAF周期是默认就存在的吗（即使代码中没有调用requestAnimationFrame函数）

Mr_Max

同学你好！这里解释一下。高频事件，比如我们举例的鼠标移动事件，它触发的很多很快，在一帧时间16ms里可能可能会多于一次，但是一帧里的只layout和paint一次，会丢了几步，那你看到的就会感觉卡卡的。再举另外一种情况，比如我们用setTimeout作动画，可能因为其他任务阻塞了事件队列，某一帧里一次回调也没触发，那你看到的也会感觉卡顿了。还有更主要的情况是你的回调处理时间过长，会导致下一帧的layout和paint被延迟，也会卡。总之就是你的回调事件的处理不能和渲染周期完美的合拍，就可能出现卡顿。 rAF就是解决这个问题的，它可以保证回调触发的节奏。然后触发的频率我们是通过debounce处理掉的。

2022-05-23

共1条回复

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线，性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

查看课程

相似问题

有几个问题

回答 1

高德地图优化问题，辛苦指点！

回答 1

看了一下你给同学的答疑，有几个疑问

回答 1

有一些疑惑想请教老师

回答 3

请问老师我的这个项目该怎么去做优化

回答 1

打开慕课网App查看更多内容