卡顿
网页的 FPS
网页内容在不断变化之中,网页的 FPS 是指浏览器在渲染这些变化时的帧率。帧率越高,用户感觉网页越流畅,反之则会感觉卡顿。
监控卡顿方法
每秒钟计算一次网页的 FPS 值,获得一列数据,然后分析。通俗地解释就是,通过 requestAnimationFrame API 来定时执行一些 JS 代码,如果浏览器卡顿,无法很好地保证渲染的频率,1s 中 frame 无法达到 60 帧,即可间接地反映浏览器的渲染帧率。
var lastTime = performance.now(); var frame = 0; var lastFameTime = performance.now(); var loop = function(time) { var now = performance.now(); var fs = (now - lastFameTime); lastFameTime = now; var fps = Math.round(1000/fs); frame++; if (now > 1000 + lastTime) { var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) ); frame = 0; lastTime = now; }; window.requestAnimationFrame(loop); }