Skip to content
大纲

监听页面性能

window.performance可查看个阶段时间

js
export default () => {
    const fpsCompatibility = function () {
      return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        function (callback) {
          window.setTimeout(callback, 1000 / 60)
        }
      )
    }()
    const fpsConfig = {
      lastTime: performance.now(), // performance 是一个浏览器提供的API
      lastFameTime: performance.now(),
      frame: 0
    }
    const fpsList = []
    const fpsLoop = function () {
      const first = performance.now()
      // const diff = (first - fpsConfig.lastFameTime)
      fpsConfig.lastFameTime = first
      // const fps = Math.round(1000 / diff)
      fpsConfig.frame = fpsConfig.frame + 1
      if (first > 1000 + fpsConfig.lastTime) {
        const fps = Math.round((fpsConfig.frame * 1000) / (first - fpsConfig.lastTime))
        fpsList.push(fps)
        console.log(`time: ${new Date()} fps is:`, fps)
        fpsConfig.frame = 0
        fpsConfig.lastTime = first
      }
      fpsCompatibility(fpsLoop)
    }
    fpsLoop()
  }

Released under the MIT License.