动画原理和事件循环，不可不知的浏览器小知识

前端

2023-12-10 16:12:32

浏览器渲染和帧动画的原理

浏览器在渲染网页时，会将页面划分为一个个的矩形区域，称为DOM节点。每个DOM节点都有自己的样式和内容，浏览器会根据这些样式和内容来计算出DOM节点在页面中的位置和大小，然后将DOM节点绘制到屏幕上。

浏览器渲染网页是一个连续的过程，每秒钟浏览器会多次重复以下步骤：

浏览器从DOM树中获取需要绘制的DOM节点。
浏览器计算出每个DOM节点在页面中的位置和大小。
浏览器将DOM节点绘制到屏幕上。

浏览器的渲染速度与设备的性能和网页的复杂程度有关。一般来说，设备性能越好，网页越简单，浏览器的渲染速度就越快。

帧动画是通过连续播放一组图像来实现的，每张图像称为一帧。当浏览器播放帧动画时，它会每秒钟多次重复以下步骤：

浏览器从帧动画中获取当前需要播放的帧。
浏览器将当前帧绘制到屏幕上。
浏览器更新帧动画中当前帧的索引，并重复步骤1和步骤2，直到帧动画播放完毕。

帧动画的播放速度与设备的性能和帧动画的复杂程度有关。一般来说，设备性能越好，帧动画越简单，帧动画的播放速度就越快。

requestAnimationFrame和requestIdleCallback的原理

requestAnimationFrame和requestIdleCallback是两个JavaScript API，它们可以让我们更好地控制动画的执行时机和频率。

requestAnimationFrame可以让我们指定一个回调函数，当浏览器准备渲染下一帧时，就会调用这个回调函数。我们可以利用这个回调函数来更新动画的状态，并重新绘制动画。

requestIdleCallback可以让我们指定一个回调函数，当浏览器空闲时，就会调用这个回调函数。我们可以利用这个回调函数来执行一些不紧急的任务，比如更新动画的状态、预加载资源等。

这两个API可以让我们避免卡顿和掉帧现象的发生。如果我们在动画中使用setTimeout或setInterval来更新动画的状态和重新绘制动画，那么当浏览器比较繁忙时，setTimeout或setInterval可能会被延迟执行，导致动画卡顿或掉帧。而如果我们使用requestAnimationFrame或requestIdleCallback来更新动画的状态和重新绘制动画，那么这些操作就会在浏览器空闲时执行，避免了卡顿和掉帧现象的发生。

resize、scroll等事件的派发时机

resize、scroll等事件是在浏览器窗口大小改变或页面滚动时触发的。这些事件的派发时机与动画息息相关。

如果我们在动画中使用了resize或scroll事件，那么当浏览器窗口大小改变或页面滚动时，就会触发这些事件，导致动画中断或重新开始。为了避免这种情况的发生，我们可以使用requestAnimationFrame或requestIdleCallback来更新动画的状态和重新绘制动画，这样就可以避免resize和scroll事件对动画的影响。

实例分析

下面是一个使用requestAnimationFrame实现的简单帧动画：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let x = 0;
let y = 0;

function update() {
  x += 1;
  y += 1;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 10, 10);
}

function animate() {
  requestAnimationFrame(animate);
  update();
  draw();
}

animate();