(四)setTimeout 是如何實現的

1. 爲了支持定時器的實現,瀏覽器增加了延時隊列

2. 通過 JavaScript 創建一個定時器時,渲染進程會將該定時器的回調任務添加到延遲隊列中

3. 處理完消息隊列中的一個任務之後,就開始執行延遲隊列裏面的任務。延遲隊列會根據發起時間和延遲時間計算出到期的任務,然後依次執行這些到期的任務。等到期的任務執行完成之後,再繼續下一個循環過程。通過這樣的方式,一個完整的定時器就實現了

4. 使用 setTimeout 的一些注意事項

(1) 如果當前任務執行時間過久,會影響定時器任務的執行

(2) 如果 setTimeout 存在嵌套調用,那麼系統會設置最短時間間隔爲 4 毫秒

(3) 未激活的頁面,setTimeout 執行最小間隔是 1000 毫秒

(4) 延時執行時間有最大值

(5) 使用 setTimeout 設置的回調函數中的 this 不符合直覺

 

5. 瞭解下 requestAnimationFrame 的工作機制,並對比 setTimeout,然後分析出 requestAnimationFrame 實現的動畫效果比 setTimeout 好的原因

使用 requestAnimationFrame 不需要設置具體的時間,由系統來決定回調函數的執行時間,requestAnimationFrame 裏面的回調函數是在頁面刷新之前執行,它跟着屏幕的刷新頻率走,保證每個刷新間隔只執行一次,如果頁面未激活的話,requestAnimationFrame 也會停止渲染,這樣既可以保證頁面的流暢性,又能節省主線程執行函數的開銷

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章