多任務數據量處理卡頓問題

任務分批次

為避免阻塞，可以將 長時間的單一任務 拆分成多個小任務并分批執行。這樣可以在兩次任務之間讓瀏覽器有時間處理渲染、用戶輸入等操作。兩種常見方法：

1. setTimeout 方法：
   • 使用 setTimeout 將任務分段，每段任務執行完畢后，通過定時器在稍后執行下一段。
   • 例如：計算一個大型數組的和時，將數組分塊，每次計算一部分，延遲剩余部分。
2. requestAnimationFrame 方法：
   • 更適合與頁面繪制相關的任務。
   • 它會在每次瀏覽器刷新幀（通常是 16.67 毫秒，60 FPS）時調用指定的回調函數。
   • 確保在每次任務之間，瀏覽器有機會完成頁面渲染。

例子

// 用 setTimeout 拆分長任務
function performTaskInChunks(task, chunkSize) {let index = 0;function processChunk() {const end = Math.min(index + chunkSize, task.length);for (; index < end; index++) {// 執行任務的每一小部分console.log(`Processing: ${task[index]}`);}if (index < task.length) {setTimeout(processChunk, 0); // 等待主線程空閑后繼續}}processChunk();
}// 用 requestAnimationFrame 分布任務
function performTaskWithRAF(task) {let index = 0;function processFrame() {if (index < task.length) {console.log(`Processing: ${task[index]}`);index++;requestAnimationFrame(processFrame); // 下一幀繼續任務}}processFrame();
}// 示例數據
const largeTask = Array.from({ length: 1000 }, (_, i) => i);
performTaskInChunks(largeTask, 50);  // 用 setTimeout 分塊執行
performTaskWithRAF(largeTask);       // 用 requestAnimationFrame 分塊執行

Web Workers后臺執行

Web Workers 是解決大數據量運算導致頁面卡頓問題的強大工具。通過將計算任務移到后臺線程，主線程可以專注于 UI 渲染和用戶交互，顯著提升頁面的流暢度和用戶體驗。

Web Workers 的優勢

1. 多線程支持：
   • JavaScript 主線程與 Web Worker 是兩個獨立的線程。
   • 主線程主要負責頁面的 UI 渲染與事件處理，而 Web Worker 執行后臺計算任務。
2. 無阻塞主線程：
   • Web Workers 的計算任務不會阻塞主線程，頁面可以繼續響應用戶操作。
3. 與主線程通信：
   • 主線程和 Web Worker 通過消息傳遞的方式通信，使用 postMessage 和 onmessage。
4. 安全隔離：
   • Worker 線程運行在獨立的作用域中，沒有直接訪問 DOM 或主線程變量的能力。

例子

1. 創建一個 Worker 腳本文件：

   • Worker 的代碼需要放在一個單獨的文件中。

   • 示例：worker.js

     // worker.js
     self.onmessage = function (e) {
     console.log(‘Worker received data:’, e.data);
     const result = heavyComputation(e.data);
     self.postMessage(result);
     };

     function heavyComputation(data) {
     // 模擬耗時計算
     let sum = 0;
     for (let i = 0; i < data.length; i++) {
     sum += data[i];
     }
     return sum;
     }

2. 主線程與 Worker 通信：

   • 在主線程中加載 Worker 文件并與其交互。

     // main.js
     const worker = new Worker(‘worker.js’);

     // 發送數據到 Worker
     worker.postMessage([1, 2, 3, 4, 5]);

     // 接收 Worker 的處理結果
     worker.onmessage = function (e) {
     console.log(‘Result from worker:’, e.data);
     };

     // 處理 Worker 的錯誤
     worker.onerror = function (error) {
     console.error(‘Worker error:’, error.message);
     };

3. Worker 的終止：

   • 如果 Worker 不再需要，可以終止它以釋放資源。

     javascript

     復制代碼
     worker.terminate();

---

Web Workers 的類型

1. Dedicated Workers（專用 Worker）：
   • 最常用的 Worker 類型。
   • 一個 Worker 僅供一個主線程使用。
2. Shared Workers（共享 Worker）：
   • 可被多個主線程共享。
   • 不同頁面的同源腳本可以共享同一個 Worker。
3. Service Workers：
   • 主要用于控制網絡請求和緩存，常見于 PWA 應用。
   • 不直接用于數據計算。

---

Web Workers 的局限性

1. 無法訪問 DOM：
   • Worker 線程不能直接操作頁面的 DOM。
   • 需要通過消息傳遞將結果交回主線程，由主線程更新 UI。
2. 通信開銷：
   • 主線程和 Worker 之間的通信需要序列化和反序列化，處理復雜數據時可能會增加延遲。
3. 瀏覽器支持：
   • 大多數現代瀏覽器支持 Web Workers，但較老版本瀏覽器可能不支持。
4. 額外的資源開銷：
   • Worker 是獨立線程，占用額外的內存和計算資源。

---

優化示例：使用 Web Worker 處理大數據計算

以下是一個計算大數據數組總和的例子：

// worker.js
self.onmessage = function (e) {const data = e.data;let sum = 0;for (let i = 0; i < data.length; i++) {sum += data[i];}self.postMessage(sum);
};// main.js
const worker = new Worker('worker.js');
const largeData = Array.from({ length: 1e7 }, (_, i) => i); // 大量數據console.log('Sending data to worker...');
worker.postMessage(largeData);worker.onmessage = function (e) {console.log('Result from worker:', e.data); // 顯示總和
};worker.onerror = function (error) {console.error('Worker error:', error);
};

利用空閑時間執行

requestIdleCallback 是一種瀏覽器 API，它允許開發者在瀏覽器的空閑時間執行非緊急的后臺任務，而不會影響關鍵的渲染和用戶交互操作。

這個 API 的主要目的是提高頁面的流暢度和響應性，尤其是在需要執行較輕量的后臺任務時，比如日志記錄、數據預加載等。

優勢

利用瀏覽器空閑時間：

• 只有在瀏覽器完成關鍵任務（如頁面布局、渲染和事件處理）并且有空閑時間時，才會調用 requestIdleCallback 提供的回調函數。

帶有超時機制：

• 如果任務不能在空閑時間內執行（如因為任務隊列繁忙），可以通過超時設置確保任務最終被執行。

低優先級任務的好幫手：

• 專為非緊急任務設計，比如分析用戶行為、緩存數據、預取資源等。

例子

// 定義任務隊列
const tasks = Array.from({ length: 1000 }, (_, i) => () => console.log(`Task ${i}`));// 使用 requestIdleCallback 處理任務
function processTasks(deadline) {while (deadline.timeRemaining() > 0 && tasks.length > 0) {const task = tasks.shift(); // 從隊列中取出任務task(); // 執行任務}// 如果還有剩余任務，繼續請求空閑回調if (tasks.length > 0) {requestIdleCallback(processTasks);}
}// 開始處理任務
requestIdleCallback(processTasks);