欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

任務分批次

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

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.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;
   }
   

• Worker 的代碼需要放在一個單獨的文件中。
• 示例：worker.js

2. 主線程與 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);
   };
   

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

3. Worker 的終止：

   worker.terminate();
   

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

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);