阻塞主线程（用 'while(true)' 计算大数据）

阻塞主线程的现象

主线程负责执行JavaScript代码、处理用户交互、更新UI等任务。当主线程被长时间占用时，页面会出现卡顿、无响应等问题。while(true)是一个典型的无限循环，如果在主线程中执行，会完全阻塞其他任务的执行。

function blockMainThread() {
  while(true) {
    // 无限循环
  }
}
blockMainThread();

执行这段代码后，整个页面会立即失去响应，无法进行任何交互操作，甚至浏览器可能会提示页面无响应。

为什么主线程阻塞会影响用户体验

浏览器采用单线程模型处理JavaScript和UI更新。这意味着：

1. 所有JavaScript代码都在主线程上顺序执行
2. UI渲染和更新也需要主线程
3. 用户事件（点击、滚动等）的处理同样依赖主线程

当主线程被while(true)这样的代码阻塞时：

• 点击事件无法及时响应
• 动画和过渡效果会卡顿
• 页面滚动不流畅
• 定时器回调无法按时执行
• 网络请求的回调被延迟处理

实际开发中的类似场景

虽然开发者很少直接写while(true)，但有些操作会产生类似效果：

1. 大数据量同步处理：

function processLargeData(data) {
  for(let i = 0; i < data.length; i++) {
    // 复杂计算
    let result = performComplexCalculation(data[i]);
    // 同步更新DOM
    document.getElementById('output').textContent += result;
  }
}

2. 深层递归：

function deepRecursion(n) {
  if(n <= 0) return;
  // 递归调用
  deepRecursion(n - 1);
}
deepRecursion(100000); // 可能导致栈溢出或长时间阻塞

3. 同步的XHR请求：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/large-data.json', false); // 同步请求
xhr.send();
// 在请求完成前会阻塞主线程

如何避免阻塞主线程

1. 使用Web Workers

Web Workers允许在后台线程中运行脚本，不会影响主线程：

// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({cmd: 'start', data: largeData});

worker.onmessage = function(e) {
  document.getElementById('result').textContent = e.data;
};

// worker.js
self.onmessage = function(e) {
  if(e.data.cmd === 'start') {
    const result = processData(e.data.data); // 耗时操作
    self.postMessage(result);
  }
};

2. 将任务分片执行

使用setTimeout或requestIdleCallback将大任务分解：

function processInChunks(data, chunkSize, callback) {
  let index = 0;
  
  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    // 处理当前分片
    for(let i = 0; i < chunk.length; i++) {
      processItem(chunk[i]);
    }
    
    index += chunkSize;
    if(index < data.length) {
      // 使用setTimeout让出主线程控制权
      setTimeout(processChunk, 0);
    } else {
      callback();
    }
  }
  
  processChunk();
}

3. 使用异步API

尽可能使用异步版本的API：

// 不好的做法 - 同步读取文件
const data = fs.readFileSync('large-file.txt');

// 好的做法 - 异步读取
fs.readFile('large-file.txt', (err, data) => {
  if(err) throw err;
  processData(data);
});

4. 虚拟列表优化

对于大量DOM操作，使用虚拟列表技术：

// 只渲染可见区域的列表项
function renderVirtualList(items, container, itemHeight) {
  const visibleCount = Math.ceil(container.clientHeight / itemHeight);
  let startIndex = 0;
  
  function updateVisibleItems() {
    const scrollTop = container.scrollTop;
    startIndex = Math.floor(scrollTop / itemHeight);
    
    // 只更新可见项
    const fragment = document.createDocumentFragment();
    for(let i = 0; i < visibleCount; i++) {
      const item = createListItem(items[startIndex + i]);
      fragment.appendChild(item);
    }
    
    container.innerHTML = '';
    container.appendChild(fragment);
  }
  
  container.addEventListener('scroll', updateVisibleItems);
  updateVisibleItems();
}

性能监控与调试

Chrome DevTools提供了多种工具来检测主线程阻塞：

1. Performance面板：记录并分析运行时性能
2. JavaScript Profiler：分析JavaScript执行时间
3. 长任务警告：DevTools会标记超过50ms的任务

// 手动测量代码执行时间
console.time('bigCalculation');
performBigCalculation();
console.timeEnd('bigCalculation');

框架中的优化策略

现代前端框架都实现了避免主线程阻塞的机制：

1. React的Fiber架构和并发模式：

// 使用时间切片
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.unstable_ConcurrentMode>
    <App />
  </React.unstable_ConcurrentMode>
);

2. Vue的异步更新队列：

// Vue自动批量异步更新DOM
this.items = new Array(10000).fill().map((_, i) => i);

3. Angular的变更检测策略：

// 使用OnPush变更检测策略减少不必要的检查
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

用户感知优化

即使无法避免长时间操作，也可以通过UI反馈减轻用户焦虑：

function longRunningTask() {
  showLoadingIndicator();
  
  // 使用setTimeout确保loading显示
  setTimeout(() => {
    performHeavyCalculation();
    hideLoadingIndicator();
  }, 50);
}

进度指示器实现：

function processWithProgress(items, updateProgress) {
  let completed = 0;
  const total = items.length;
  
  function processNext() {
    if(completed >= total) return;
    
    // 处理一批项目
    const batchSize = Math.min(100, total - completed);
    for(let i = 0; i < batchSize; i++) {
      processItem(items[completed + i]);
    }
    
    completed += batchSize;
    updateProgress(completed / total);
    
    if(completed < total) {
      setTimeout(processNext, 0);
    }
  }
  
  processNext();
}

浏览器事件循环机制

理解事件循环有助于避免阻塞：

console.log('Start');

setTimeout(() => console.log('Timeout'), 0);

Promise.resolve().then(() => console.log('Promise'));

// 同步阻塞代码
let sum = 0;
for(let i = 0; i < 1e9; i++) {
  sum += i;
}
console.log('Sum calculated');

console.log('End');

执行顺序：

1. 同步代码（包括长循环）
2. 微任务（Promise）
3. 宏任务（setTimeout）

内存考虑

长时间运行的脚本还可能导致内存问题：

// 内存泄漏示例
let hugeData = [];

function processData() {
  // 处理数据但保留引用
  hugeData = hugeData.concat(processChunk());
  setTimeout(processData, 0);
}

改进方案：

function processDataBetter() {
  let chunk = getNextChunk();
  processChunk(chunk);
  chunk = null; // 释放引用
  
  if(hasMoreData()) {
    setTimeout(processDataBetter, 0);
  }
}