背景
javaScript面世以来,单线程的代码执行方式一直被人所诟病。因为在运行计算量较大或较复杂的程序时,很有可能会造成程序运行卡住,用户体验较差。 Html5提出的 Web Worker可以很好的解决这个问题。
概述
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面(开启额外的线程执行指定的js代码)。 此外,它们可以使用
XMLHttpRequest(尽管responseXML和channel属性总是为空)或fetch(没有这些限制)执行 I/O。一旦创建,一个 worker 可以将消息发送到创建它的 JavaScript 代码,通过将消息发布到该代码指定的事件处理器(反之亦然)。
优点
- 通过新建线程来运行指定的js,不影响主线程运行
- 可以使用 XMLHttpRequest 进行异步请求
- 可以使用javaScript的大部分内置方法
缺点
- 在worker内运行的代码不能直接操作dom
- 只能运行同源的javaScript文件
- 加载数据没有JSONP和Ajax高效
使用
创建一个worker:使用Worker构造函数创建一个worker。
workers 和主线程间的数据传递通过这样的消息机制进行——双方都使用
postMessage()方法发送各自的消息,使用onmessage事件处理函数来响应消息(消息被包含在message事件的 data 属性中)。这个过程中数据并不是被共享而是被复制.
// worker.js
let count =0
while(count< 10000) {
count++
}
// 计算完成后,通过postMessage通知到主线程
postMessage(count)
// index.html
<script>
// 构造函数接受要运行的js, 启动一个线程,返回一个worker实例
const worker = new Worker('./worker.js')
// 通过onmessage获得worker线程返回的数据
worker.onmessage = (event)=> {
console.log(event.data)
}
</script>
本文主要是介绍一下Web Worker的简单用法。更多Web Worker的内容可移步MDN官网查询。
ps: 小白写文锻炼自己,如有错误还请各位大佬斧正。