为什么会出现卡顿
-
什么是FPS
浏览器每秒绘制的帧数，也可以理解为每秒画面的更新次数
目前大多数设备的屏幕刷新率为
60次/秒，也就是说每1000 / 60 ≈ 16.67ms浏览器绘制一次 -
卡顿原理
页面是一帧一帧绘制出来的
当每秒绘制的帧数
FPS达到 60 时，页面是流畅的，小于这个值时，用户就会感觉到卡顿 -
为双核浏览器指定默认渲染内核
<meta name="renderer" content="webkit">
浏览器的绘制周期
-
requestAnimationFrame() 的作用
告诉浏览器，我们希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数来更新动画
充分利用显示器的刷新机制，以节省系统资源
-
基本语法
const requestId = window.requestAnimationFrame(callback)// 取消动画帧请求 window.cancelAnimationFrame(requestId)该方法传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
回调函数执行次数通常是每秒 60 次（与浏览器的屏幕刷新次数相匹配）
-
性能解析
为了提高性能和电池的寿命，在大多数浏览器里，后台标签页、隐藏或不可见的元素中，该方法会被暂停调用
滚动到页面顶部
{
let requestId = null
const scrollToTop = () => {
const height = document.documentElement.scrollTop || document.body.scrollTop
if (height > 0) {
requestId = window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, height - height / 8)
} else {
window.cancelAnimationFrame(requestId)
}
}
scrollToTop()
}
注意事项
如果想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用 window.requestAnimationFrame()
一起学习，加群交流看 沸点
