#码力全开·技术π对#Lighthouse性能评分中Avoid long main-thread tasks如何针对性优化？

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log('结果:', e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyCalculation(e.data); // 耗时操作
  self.postMessage(result);
};

function lowPriorityTask(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    tasks.pop().execute();
  }
  if (tasks.length > 0) requestIdleCallback(lowPriorityTask);
}
requestIdleCallback(lowPriorityTask);

<link rel="preconnect" href="https://third-party.com">
<script async src="https://third-party.com/script.js"></script>

// 分片解析大型 JSON
const stream = fetch('large-data.json').then(res => res.body.getReader());
let buffer = '';
async function readChunk() {
  const { done, value } = await stream.read();
  if (done) return;
  buffer += new TextDecoder().decode(value);
  processChunk(buffer); // 处理部分数据
  readChunk();
}

<img src="thumbnail.jpg" loading="lazy" data-src="full-image.jpg">

// 不好的写法（多次触发重排）
const width = element.offsetWidth;
element.style.width = `${width * 2}px`;
const newWidth = element.offsetWidth;

// 优化后（批量读取/写入）
const width = element.offsetWidth;
const newWidth = width * 2;
element.style.width = `${newWidth}px`;

🔧 **针对性优化方案**：

1. **任务诊断优先**  
```javascript
// 使用Chrome Performance面板定位长任务
performance.mark('task-start');
// 执行可疑代码
performance.mark('task-end');
performance.measure('long-task', 'task-start', 'task-end');
四大优化策略
✅ 代码分片（适用于顺序执行任务）
javascript
function chunkTask() {
  setTimeout(() => {
    // 任务分片逻辑
    if (hasMoreWork) requestIdleCallback(chunkTask
✅ Web Worker重构标准

特征	适合Worker	不适合Worker
DOM操作	❌	✅
CPU密集型计算	✅	❌
高频触发	❌	✅
大数据处理	✅	❌
✅ 框架级优化

javascript
// React调度示例
import { unstable_scheduleCallback } from 'scheduler';

unstable_scheduleCallback(() => {
  // 长任务逻辑
});
✅ 浏览器API升级

javascript
// 使用OffscreenCanvas替代常规Canvas
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);
决策流程图
mermaid
graph TD
    A[长任务>2s] --> B{含DOM操作?}
    B -->|是| C[尝试代码分片]
    B -->|否| D{CPU密集型?}
    D -->|是| E[使用Web Worker]
    D -->|否| F[
⚡ Web Worker重构示例：

javascript
// main.js
const worker = new Worker('task.js');
worker.postMessage(largeData);

// task.js
self.onmessage = ({ data }) => {
  const result = processData(data);
  self.postMessage
何时必须用Worker：

图像/视频处理（如WebAssembly+Worker组合）
大数据分析（10万+条记录处理）
复杂数学运算（3D图形计算/加密算法）
注意陷阱：
❗ Worker通信成本（>1MB数据传输需评估）
❗ 移动端CPU核心数限制（建议最多2个Worker）
❗ 旧浏览器兼容性问题（可考虑Service Worker降级方案）

// 创建 worker.js 文件
onmessage = function(e) {
  const result = heavyProcessing(e.data);
  postMessage(result);
};

function heavyProcessing(data) {
  // 模拟耗时操作
  let sum = 0;
  for (let i = 0; i < data.count; i++) {
    sum += i;
  }
  return sum;
}

const worker = new Worker('worker.js');
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};
worker.postMessage({ count: 1e9 });