因為主流瀏覽器的重繪頻率為60Hz，即每（1000ms /60Hz）16.6ms瀏覽器重繪一次，JS可以操作DOM，GUI渲染執行緒與JS執行緒是互斥的，所以JS腳本執行和瀏覽器布局、繪制不能同時執行，超過16.6ms就會讓用戶感知到卡頓，
- 在16之前的版本中采用遞回執行，遞回耗記憶體，它使用 JavaScript 自身的執行堆疊，更新一旦開始，中途就無法中斷，當VirtualDOM 樹的層級很深時，virtualDOM 的比對就會長期占用 JavaScript 主執行緒，遞回更新的時間就會超過16ms，由于 JavaScript 又是單執行緒的無法同時執行其他任務，所以在比對的程序中無法回應用戶操作，無法即時執行元素影片，造成了頁面卡頓的現象，
- 而React16架構可以分為三層：Scheduler，Reconciler，Renderer,與之前不同的是Reconciler和Renderer不再交替執行，而是當Scheduler將任務交給Reconciler后，Reconciler會為變化的虛擬DOM打上代表增/刪/更新的標記，整個Scheduler與Reconciler的作業都在記憶體中進行，只有當所有組件都完成Reconciler的作業，才會統一交給Renderer，并且采用雙快取用作統一替換，用戶也不會看到更新不完全的真實dom，它放棄了 JavaScript 遞回的方式進行 virtualDOM 的比對，而是采用回圈模擬遞回，而且比對的程序是利用瀏覽器的空閑時間完成的，不會長期占用主執行緒，這就解決了 virtualDOM 比對造成頁面卡頓的問題，
解決方案：
1. react16后使用 fiber架構可拆分，可中斷任務
- 可重用各分階段任務，且可以設定優先級
- 可以在父子組件任務間前進后退切換任務
- render方法可以回傳多元素（即可以回傳陣列）
- 支持例外邊界處理例外
采用回圈模擬遞回，而且比對的程序是利用瀏覽器的空閑時間完成的，不會長期占用主執行緒，這就解決了 virtualDOM 比對造成頁面卡頓的問題，
2. 官方實作了自己的任務調度庫，這個庫就叫做 Scheduler，
window 物件中提供了 requestIdleCallback API ，可以實作用瀏覽器的空閑時間執行任務，但是它兼容性差，不過目前屬于還在實驗中的功能，
鏈接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/248576.html
標籤：其他
上一篇：keycloak集成微信登陸~解決國內微信集成的問題
下一篇：Laravel日記