WebWorker简介

导航

1. 什么是WebWorker
2. 为什么要使用WebWorker
3. WebWorker兼容性如何
4. WebWorker能用来做什么
5. 如何使用WebWorker
6. importScripts
7. .WebWorker的其他类型介绍

---

1.什么是WebWorker

• WebWorker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情。点击选取内容等等，而此时WebWorker在后台运行。
• 简单明了的一句话就是在javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后，再回到主线程上，在这个过程中，并不影响主线程的执行过程。
• WebWorker为Web应用程序提供了一种能在后台中运行的方法。通过WebWorker可以生成多个线程同时运行，并保证页面对用户的及时响应，完全不会影响用户的正常操作。

2.为什么要使用WebWorker

• 解决一些页面的卡顿问题。
• 解决某些函数执行时间过长，体验不流畅，卡顿。

3.WebWorker兼容性如何

• 目前主流浏览器都已经支持Web Worker。在创建 web worker 之前，我们一般需要检测用户的浏览器是否支持它，方法如下：

if (typeof Worker !== 'undefined') {
          //支持
}else{//不支持}

• 目前支持性表如下
  

4.WebWorker能用来做什么

• 进行高复杂度/耗时长的计算，不影响网页的正常渲染。
• 数据的后台预下载和预处理。

5.如何使用WebWorker

1.主线程创建worker

//新建一个worker线程
const worker = new Worker('worker.js')
//发送数据给worker线程
worker.postMessage('hello')
//接收worker线程的数据
worker.onmessage = event => {
  console.log(event.data)//数据储存在event.date里面
}

2.worker.js

//接收主线程传送的数据
onmessage = function(event) {
  console.log(event.data)
}
//发送数据给主线程
postMessage('date')
//报错时输出
onerror = function(event) {
  console.error(event.message)
}

3.worker的停止操作：

• main.js

worker.terminate()

• worker.js

close()

6.importScripts

• Worker线程能够访问一个全局函数importScripts()来引入脚本，该函数接受0或者多 个URI作为参数来引入资源

    /* 只引入 "foo.js" */
   importScripts('foo.js')
   /* 引入两个脚本 */    
   importScripts('foo.js', 'bar.js')     

• 注意： 脚本的下载顺序不固定，但执行时会按照传入 importScripts() 中的文件名顺序
  进行。这个过程是同步完成的；直到所有脚本都下载并运行完毕，importScripts() 才会返回。

7.WebWorker的其他类型介绍

• SharedWorker
  多个页面可以共用一个SharedWorker后台线程，并且可通过该后台线程共享数据。
• ServiceWorker
  一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦
  截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是
  网络不可用）下的表现.。