在JS中,如果某个方法中有大量的计算,当执行到这个方法时,会出现浏览器UI长时间卡死的情况,很影响用户体验。这个时候使用requestIdleCallback
降低该段代码的优先级。
requestIdleCallback 允许你在浏览器空闲时执行回调,不会影响性能:
calcVolume() {
let _this = this
this.viewer.loadingMask.enable = true
const positions = this._drawHandler.positions
this._positions = positions
function calc() {
//大量计算
const volume = _this.getVolume()
_this.volume = volume //立方米
_this.viewer.loadingMask.enable = false
_this._showLabel && _this.drawLabel(volume)
_this._callback && _this._callback(volume)
}
requestIdleCallback(calc);
}
但是存在浏览器兼容问题
具体requestIdleCallback 使用方法,详见https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback