Refactored setting engine frame rate.

[cptbtptpbcptdtptp]

Describe the bug Currently using frame rate lock is not very friendly.

** Considerations **

1. settimeout has performance issues
2. The frame rate of the device cannot be obtained on the web side
3. ...

[cptbtptpbcptdtptp]

PIXI: Ticker.ts

[cptbtptpbcptdtptp]

The web-side rendering engine basically does not use settimeout for frame looping.

[YunYouJun]

const fps = 60
let lastTime = 0
const logic = (time)=>{
    requestAnimationFrame(logic)
    if (time - lastTime < 1000/fps) {
        return
    }
    let realFPS = 1000 / (time - lastTime)
    console.log('real fps', realFPS)
    // do something
    lastTime = time
}
requestAnimationFrame(logic)

看 PIXI 大致的意思应该就是通过 performance.now 判断间隔时间，配合 requestAnimationFrame 锁帧。 需要间隔是 1000 / 60 = 16.66ms 的倍数，也就是可以锁到 60/30/20/15 帧。

[cptbtptpbcptdtptp]

理想情况下应该是需要至少两个 API:

• 获取设备的支持帧率
• 设置设备的帧率

像在 WebXR 相关标准中硬件层是提供了这种类似接口supportedframerates的，以及相关的设置帧率接口framerate。 在其他所有的 web 引擎中，都 hack 解决了这个问题，他们会先估算帧率，然后通过跳帧来控制帧率（当然只能是倍数）。 这块最佳的实践是 Native 层可以提供相关信息与接口，否则我们也只能用类似的处理方法。

[YunYouJun]

Web 端依赖浏览器，浏览器的基础 API 里看起来没有找到直接获取设备支持频率和设置设备帧率的 API。 Native API 短期应该不会有，有的话（支付宝端内）也可能因为平台兼容问题而不够通用。

FPS 也基本是依靠 requestAnimationFrame 算的，目前看起来应该要实现锁帧之类的控制帧率，我理解应该只有上面的这个办法了。 还有别的最佳实践吗？

[cptbtptpbcptdtptp]

没有，我们也打算这样做，但是可能采样 FPS 这块会做一个通用的监视器，其他引擎也都是需要跑一段时间采样的。 PerformanceMonitor.sampleFrame