浅谈html新特性Web Worker

219 阅读1分钟

大家好,这是一个小白前端的更文挑战。(写错的各位看官包容) 这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

Web Worker 规范中定义了两类工作线程分别是专用线程和共享线程

1. 专用线程Dedicated Worker(Worker)

  • 只能为一个页面所使用

  • 创建:new Worker(worker.js)

  • 数据传递

    • postMessage()发送消息
    • onmessage 事件接收消息
    • onmessage监听
  • 关闭close()

  • 错误处理onerror

2. 共享线程 SharedWorker

  • 被多个页面所共享

  • 创建:new SharedWorker('shared-worker.js')

  • 事件必须通过端口对象调用

  • 数据传递

    • port.postMessage()发送消息
    • port.onmessage 事件接收消息
    • port.onmessage监听
  • port.close()关闭

  • 错误处理:port.onmessageerror

不管是共享线程还是转享县城,加载外部脚本都是

  • importScripts('test.js')

3. 用途:将一些耗时的数据处理操作从主线程中剥离

  • 懒加载

  • 文本分析

  • 流媒体数据处理

  • canvas 图形绘制

  • 图像处理

注意事项

  • 有同源限制

  • 无法访问 DOM 节点

  • 运行在另一个上下文中,无法使用Window对象

  • Web Worker 的运行不会影响主线程,但与主线程交互时仍受到主线程单线程的瓶颈制约。换言之,如果 Worker 线程频繁与主线程进行交互,主线程由于需要处理交互,仍有可能使页面发生阻塞