DaMeng

webworker

发表于 更新于 分类于 ，

1 作用

对于需要长时间计算的 JS 脚本，可以使用 web worker 重新起个线程，进而提升用户体验。

2 使用

2.1 上下文

worker 运行在另一个全局上下文中，不同于当前的window。

2.2 与 Worker 通信

Worker 线程和主线程间通过消息机制进行。

2.2.1 发送消息

postMessage(arg)

2.2.2 接收消息

onmessage(e)

onmessageerror(e)

2.3 运行环境

2.3.1属性

  • navigator 对象
  • appName
  • appVersion
  • userAgent
  • platform
  • location 对象
    • 与 window.location 相同，但为只读属性
  • self 对象
    • 指向全局 worker 对象
  • 所有的 ECMAScript 对象
    • Object Array Date 等
  • XMLHttpRequest 构造器

2.3.2方法

importScripts()

  • 加载 worker 需要使用的 JS 文件

close()

  • 停止 worker 运行

setTimeout

setInternal

2.4 示例

https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js

https://github.com/mdn/simple-shared-worker

1
2
3
if (window.Worker) {
  ...
}

3 注意

  • worker 内部不能直接操作 DOM 节点