首页 › HTML › HTML5 API › Web Workers 与其他 API

Web Workers

Web Workers 允许在后台线程中运行脚本，不阻塞主线程（UI 线程）。

基本用法

// worker.js（单独的 JS 文件）
self.onmessage = function(event) {
  const num = event.data;
  // 执行耗时计算
  let result = 0;
  for (let i = 0; i < num; i++) {
    result += i;
  }
  // 发送结果回主线程
  self.postMessage(result);
};

<!-- 主页面 -->
<script>
  const worker = new Worker('worker.js');

  // 发送数据给 worker
  worker.postMessage(1000000000);

  // 接收 worker 返回的结果
  worker.onmessage = function(event) {
    console.log('计算结果:', event.data);
  };

  // 错误处理
  worker.onerror = function(error) {
    console.error('Worker 错误:', error.message);
  };

  // 终止 worker
  // worker.terminate();
</script>

Worker 的限制

可用	不可用
postMessage / onmessage	DOM 操作（document、window、parent）
XMLHttpRequest / fetch	alert() / confirm()
setTimeout / setInterval	localStorage / sessionStorage
importScripts()（加载其他脚本）	canvas / 某些 DOM API
WebSocket	console.*（大部分可用）

使用场景

• 大数计算：斐波那契、素数检测
• 数据处理：大量 JSON 解析、排序
• 图像处理：Canvas 像素操作
• 数据压缩/解压
• 模拟/游戏逻辑计算

IntersectionObserver

监听元素是否进入视口——用于懒加载、无限滚动：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);  // 只触发一次
    }
  });
}, {
  rootMargin: '200px',   // 提前 200px 触发
  threshold: 0.1         // 出现 10% 时触发
});

// 观察所有懒加载图片
document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Clipboard API

// 写入剪贴板（需要用户交互触发）
navigator.clipboard.writeText('要复制的文本')
  .then(() => console.log('复制成功'))
  .catch(err => console.error('复制失败', err));

// 读取剪贴板（需要用户权限）
navigator.clipboard.readText()
  .then(text => console.log('剪贴板内容:', text));

Notification API

桌面通知（需用户授权）：

// 请求权限
Notification.requestPermission().then(perm => {
  if (perm === 'granted') {
    new Notification('新消息', {
      body: '您有一条新通知',
      icon: '/icon.png'
    });
  }
});

requestAnimationFrame（回顾）

动画帧请求——已在前文 Canvas 动画中使用，也是独立 API：

let start = null;
function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  // 执行动画
  element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

小结

API	用途	特点
Web Workers	后台线程计算	不阻塞 UI，无法操作 DOM
IntersectionObserver	元素可见性检测	性能优于 scroll 事件
Clipboard API	剪贴板读写	需要用户交互触发
Notification API	桌面通知	需用户授权
requestAnimationFrame	动画帧	自动匹配刷新率

上一节：Drag & Drop 与 File API 下一节：iframe 与跨域通信

贡献者: 布欧-Lewyon