1、時間分片

時間分片指在讓應用在cpu進行大量計算時也能與用戶交互，但時間分片只能對大量cpu計算進行優化，無法優化復雜DOM操作，因為要確保用戶正在操作的界面是最新。

web卡頓的場景：

1、cpu計算量不大，但dom操作非常復雜（比如說你向頁面插入了十萬個節點）。這種場景下不管做不做時間分片，頁面都會很卡。

2、cpu計算量非常大。理論上時間分片在這種場景里會有較大收益，但是人機交互研究表明，除了動畫場景外，大部分用戶不會覺得 10 毫秒和 100 毫秒有很大區別。也就是說，時間分片只在 CPU 需要連續計算 100 毫秒以上的情況下才有較大收益。

2、react需要時間分片

React 16引入了Fiber重構，其目的是為了實現虛擬DOM的優先級級別和中斷重新開始的渲染過程，這被稱為“時間分片”。Fiber框架通過分層調度、暫停和重用執行樹的部分來提高其性能，這樣可以在瀏覽器有時間處理用戶交互或動畫的時候動態地調度工作。

Fiber的引入為React提供了以下優勢：

可中斷的渲染- 優先級渲染（比如，用戶交互比如滾動優先于動畫）- 可復用的渲染（比如，在使用用戶界面時可以在后臺繼續渲染其他部分）

這些優點使得React應用程序能夠更加高效地更新用戶界面，并且不會導致之前版本的“閃爍”問題。

解決方案：

React 16及以上版本會自動使用Fiber框架，無需用戶進行任何操作。如果你正在使用React 15或更早的版本，你需要升級到React 16或更高版本以獲得Fiber的好處

import React from 'react';
import ReactDOM from 'react-dom';class MyComponent extends React.Component {// ...render() {// 使用新的Fiber渲染算法渲染組件return (<div>{/* ... */}</div>);}
}ReactDOM.render(<MyComponent />, document.getElementById('root'));

在這個例子中，React 16使用Fiber重構實現了虛擬DOM的更新，使得用戶界面的渲染能夠被中斷和重新開始，從而提高了性能。

2.1關于Fiber框架學習。

參考：https://blog.51cto.com/u_11887782/5782954

3、vue3不需要時間分片

Vue 3 不需要時間分片（time slicing）主要是因為它的核心渲染機制和性能優化策略已經足夠高效，能夠在大多數情況下提供流暢的用戶體驗。以下是詳細的原因：

3.1、編譯器優化

Vue 3 引入了一個全新的編譯器，能夠生成更高效的渲染函數。這個編譯器在編譯過程中進行了一系列優化，例如：

• 靜態提升：將不變的節點提升為常量，只在初次渲染時計算一次。
• 預字符串化：將靜態內容直接轉化為字符串，減少了運行時的開銷。
• 緩存事件處理程序：避免了不必要的重新綁定。

這些優化措施大大減少了 Vue 3 在更新 DOM 時的計算量，使得渲染過程更加高效。

3.2.、響應式系統的改進

Vue 3 使用了基于代理的響應式系統，替代了 Vue 2 中基于?Object.defineProperty?的實現。新的響應式系統更加高效，具備以下優點：

• 精細的依賴追蹤：只追蹤實際使用的屬性，避免了不必要的依賴收集。
• 懶惰計算：僅在需要時才計算依賴，減少了計算量。

這些改進使得 Vue 3 能夠更快速地響應數據變化，從而減少了渲染開銷。

3.3、虛擬 DOM 和 Diff 算法的優化

Vue 3 對虛擬 DOM 及其 diff 算法進行了優化，使得差異計算更加高效：

• 靜態標記：編譯期間標記靜態節點，跳過不變的部分。
• 塊級優化：將動態節點分塊，只對發生變化的塊進行更新。

這些優化措施減少了 DOM 更新的頻率和范圍，提高了整體渲染性能。

3.4、單次異步隊列

Vue 3 的更新機制基于單次異步隊列（single asynchronous queue），它確保在同一事件循環中只進行一次批量更新。這種方式減少了不必要的重復計算和 DOM 操作，使得更新過程更加高效。

3.5、自動批處理

Vue 3 實現了自動批處理機制，在同一個事件循環中對多次數據更新進行合并，從而減少了渲染次數。這種機制在避免頻繁重繪的同時，保證了界面的流暢性。

3.6、現代瀏覽器的性能

現代瀏覽器的性能已經得到了極大的提升，尤其是在處理 JavaScript 和 DOM 操作方面。Vue 3 的優化能夠充分利用這些性能改進，從而在絕大多數情況下不需要時間分片。

3.7總結

Vue 3 通過編譯器優化、響應式系統改進、虛擬 DOM 和 Diff 算法優化、單次異步隊列、自動批處理等技術手段，大幅提升了渲染效率和性能。再加上現代瀏覽器的性能提升，使得 Vue 3 能夠在大多數情況下提供流暢的用戶體驗，而無需借助時間分片等復雜的技術。