JS自定义网页渲染帧率
520来了,作为程序员的浪漫,怎么能不给女朋友搞一个特效爆炸的炫酷网页呢。我前端不太行,都是在Github搬来的特效代码然后堆叠在一起🤣。运行的时候发现一个问题,特效感觉卡卡的,我确定不是电脑性能问题。那是什么原因呢。
浏览器默认渲染帧率为60!
浏览器默认渲染帧率为60!
浏览器默认渲染帧率为60!
在手机上看还勉强,一旦放到大屏幕的高刷屏上 感觉很是诡异啊🙄。
解决办法:
function render() {
// 在这里进行你的渲染逻辑
setTimeout(function() {
requestAnimationFrame(render);
}, 1000 / 165); // 1000ms / 165帧 = 每帧之间的延迟时间
}
// 启动渲染循环
requestAnimationFrame(render);
这样就能让你也页面以165的帧率渲染。
注意
你的设备性能起码要过关,如果设备性能太差反而会更卡(变成PPT🙄)
只测试了Windows平台的Chrome浏览器 其他自测