requestAnimationFrame

Javascript 中可以通過定時器 setTimeout 和setinterval來實現

但是這兩種定時器的實現並不精確，會受到其他定時器的影響，setTimeout 任務被放進了異步隊列中，只有當主線程上的任務執行完以後，纔會去檢查該隊列裏的任務是否需要開始執行，因此這兩種定時器的實際執行時間通常都會晚於設定時間。這樣的後果就是可能會出現掉幀。

推薦使用requestAnimationFrame實現定時重繪，在項目初始化時設置requestAnimationFrame

/*[IF-SCRIPT_BEGIN]
Browser.window.requestAnimationFrame(loop);
function loop():void{
    try{
        Laya.stage._loop();
    }finally{
        Browser.window.requestAnimationFrame(loop);
    }
}
/*[IF-SCRIPT_END]*/

//_loop爲自定義重繪

 requestAnimationFrame默認返回一個id，通過這個ID可以停止指定的requestAnimationFrame

//創建requestAnimationFrame
var id = requestAnimationFrame(loop);
//停止指定ID的requestAnimationFrame
cancelAnimationFrame(id)

requestAnimationFrame的優勢

1、由系統來決定回調函數的執行時機。把每一幀中的所有DOM操作集中起來，在一次重繪或迴流中就完成。如果屏幕刷新率是60Hz,那麼回調函數就每16.7ms被執行一次，如果刷新率是75Hz，那麼這個時間間隔就變成了1000/75=13.3ms。requestAnimationFrame的步伐跟着系統的刷新步伐走。它能保證回調函數在屏幕每一次的刷新間隔中只被執行一次，這樣就不會引起丟幀現象，也不會導致動畫出現卡頓的問題

2、在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或迴流，而setTimeout 仍然在後臺執行動畫任務，對於不可見元素，完全沒必要浪費多餘的性能進行重繪。因此相對而言，requestAnimationFrame消耗更少的的cpu，gpu和內存使用量。