前端笔记——大数据量浏览器卡顿优化思路

多任务数据量处理卡顿问题

任务分批次

为避免阻塞，可以将 长时间的单一任务 拆分成多个小任务并分批执行。这样可以在两次任务之间让浏览器有时间处理渲染、用户输入等操作。两种常见方法：

1. setTimeout 方法： - 使用 setTimeout 将任务分段，每段任务执行完毕后，通过定时器在稍后执行下一段。- 例如：计算一个大型数组的和时，将数组分块，每次计算一部分，延迟剩余部分。
2. requestAnimationFrame 方法： - 更适合与页面绘制相关的任务。- 它会在每次浏览器刷新帧（通常是 16.67 毫秒，60 FPS）时调用指定的回调函数。- 确保在每次任务之间，浏览器有机会完成页面渲染。

例子

// 用 setTimeout 拆分长任务functionperformTaskInChunks(task, chunkSize){let index =0;functionprocessChunk(){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 分布任务functionperformTaskWithRAF(task){let index =0;functionprocessFrame(){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.jsself.onmessage=function(e){ console.log('Worker received data:', e.data);const result =heavyComputation(e.data); self.postMessage(result);};functionheavyComputation(data){// 模拟耗时计算let sum =0;for(let i =0; i < data.length; i++){ sum += data[i];}return sum;}
2. 主线程与 Worker 通信：- 在主线程中加载 Worker 文件并与其交互。// main.jsconst worker =newWorker('worker.js');// 发送数据到 Workerworker.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.jsconst worker =newWorker('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 处理任务functionprocessTasks(deadline){while(deadline.timeRemaining()>0&& tasks.length >0){const task = tasks.shift();// 从队列中取出任务task();// 执行任务}// 如果还有剩余任务，继续请求空闲回调if(tasks.length >0){requestIdleCallback(processTasks);}}// 开始处理任务requestIdleCallback(processTasks);