一起来了解前端性能优化(FPS)

什么是 fps fps原理 requestAnimationFrame fps的场景 fps的使用总结

前言

现在的项目越来越复杂，功能也越多，这种情况下会导致项目有着各方面的性能问题，像页面加载缓慢、请求访问时间长、页面卡顿等问题。

这个时候我们就需要考虑进行性能优化，性能优化有很多方面，像 FPS 就是其中一种。

什么是 FPS

在我们打游戏的时候会在画面顶端有显示着 60 FPS 等文字，然后现在的手机宣传会说有多少高刷，观看视频、打游戏流畅度非常高，体验感好。目前大多数设备的屏幕刷新率为 60 次/秒，有些高端手机甚至更高，达到120。

FPS 指的是画面每秒传输帧数，即在每秒内能够渲染多少帧画面。通常情况下，FPS 越高，页面的流畅度就越好。FPS 也可以理解为刷新率(Hz)，高刷可以提高我们观看图像显示流畅度。

Performance

在浏览器中我们可以 F12 打开控制台，然后ctrl+shift+p就会出现下面的窗口，然后输入 FPS。

然后页面就会出现该检测块，右上角就是当前 FPS。当页面变化、滑动一次就会显示当时的 FPS 大小。

控制台除了可以观看 FPS ，还可以观看页面运行的其它情况。也是 F12 打开控制台，点击 Performance 进行录制运行时的性能记录。

这里观看的是 CPU 的占用情况，鼠标滑入可以看到页面各个阶段的画面快照。

黄色(Scripting)：js脚本的执行
紫色(Rendering)：样式计算和布局，页面重排
绿色(Painting)：重绘的时间
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间
顶部红条：FPS帧率，红色代表这一帧的页面在刷新停顿相对比较久，绿色表示良好

requestAnimationFrame

requestAnimationFrame(请求动画帧) 是 HTML5 新增的 API，主要用于在浏览器的下一次重绘之前调用指定的回调函数。该方法可以自动根据浏览器的性能情况控制动画的刷新频率，从而达到 60 FPS 的渲染速度，如果系统绘制率是 60Hz，那么回调函数就会 16.7ms 再被执行一次。

requestAnimationFrame 通常用作动画的执行，从动画的流畅度从而反映 FPS 值。

js 复制代码

let block: HTMLDivElement
let x = 0;
let speed = 5;
let rafId: any = null
onMounted(() => {
  block = document.querySelector('.block') as HTMLDivElement;
})
// 动画函数
const animationFun = ()=> {
  x += speed;
  if (x > window.innerWidth - block.clientWidth || x < 0) speed = -speed;
  block.style.left = x + 'px';
  // 传入函数循环执行
  rafId = window.requestAnimationFrame(animationFun);
}
// 停止执行
const stopAnimationFun = ()=> {
 cancelAnimationFrame(rafId)
}

那么怎么停止 requestAnimationFrame 呢？HTML5 给我们提供了 cancelAnimationFrame 函数，当我们使用 requestAnimationFrame 时会默认返回一个id，cancelAnimationFrame 只需要传入这个 id 就可以停止了。

js 复制代码

function animationFun() {}
let rafId = requestAnimationFrame(animationFun)
cancelAnimationFrame(rafId)