几个疑问点

Question

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

还是一帧本来就有以下几个周期，代码中加了requestAnimationFrame后使得pointermove虽然触发了多次，但都在rAF周期中被一次处理后再layout和paint一次即可

Answer 1

提问者 weixin_慕姐0221030 2022-05-19 21:53:43

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

• Mr_Max #1

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