JS自定义网页渲染帧率

JS自定义网页渲染帧率

马草原 931 2022-05-21

JS自定义网页渲染帧率

520来了,作为程序员的浪漫,怎么能不给女朋友搞一个特效爆炸的炫酷网页呢。我前端不太行,都是在Github搬来的特效代码然后堆叠在一起🤣。运行的时候发现一个问题,特效感觉卡卡的,我确定不是电脑性能问题。那是什么原因呢。

浏览器默认渲染帧率为60!
浏览器默认渲染帧率为60!
浏览器默认渲染帧率为60!

在手机上看还勉强,一旦放到大屏幕的高刷屏上 感觉很是诡异啊🙄。

解决办法:

function render() {
  // 在这里进行你的渲染逻辑

  setTimeout(function() {
    requestAnimationFrame(render);
  }, 1000 / 165); // 1000ms / 165帧 = 每帧之间的延迟时间
}

// 启动渲染循环
requestAnimationFrame(render);

这样就能让你也页面以165的帧率渲染。

注意
你的设备性能起码要过关,如果设备性能太差反而会更卡(变成PPT🙄)
只测试了Windows平台的Chrome浏览器 其他自测