webwork
在单页应用中使用WebWork
JS为了避免DOM渲染冲突，使用单线程运行代码。虽然浏览器通过事件循环队列延后处理耗时任务，但是在执行大量复杂运算时依然会使主线程卡顿，HTML5提出了WebWork允许用户另开线程来进行复杂的逻辑计算处理。
WebWork在html中使用方法：
1. 在index.html中新建worker对象，并发送及监听消息
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebWork</title>
</head>
<body> </body>
<script>
var work = new Worker('./work.js')
work.postmessage(1000000000)
work.onmessage = function(res){
console.log("累加结果 : ",res.data)
}
</script>
</html>
2. 新建work.js处理复杂逻辑
onmessage = function(e){
let sum = 0,num = e.data;
for(var i=1;i<=num;i++){
sum += i
}
postMessage(sum);
}
如果通过浏览器直接打开本地index.html会报错：Failed to construct ‘Worker’: Script at ‘XXXX’ cannot be accessed from origin ‘null’.
可以通过http-server 搭建http服务后正常运行
React等单页应用中的使用方法：
在React，Vue等单页应用中Webpack将js代码都打包成一个js文件，故以上通过new Worker(’./work.js’)方式新建worker将会报访问不到worker.js的错误。
*方案 3 (推荐). 利用Blob新建本地临时文件，通过URL.createObjectURL()创建对blob对象的URL引用，这些URL只能在浏览器的单个实例中和同一个会话中使用。
1. 封装worker.js
export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(["(" + code + ")()"]);
return new Worker(URL.createObjectURL(blob));
}
}
2. 在React中和Vue中使用相似，以react为例：
import WebWorker from './worker.js'
...
componentDidmount(){
let work = function(){
self.onmessage = function(e){
let sum = 0,num = e.data;
for(var i=1;i<=num;i++){
sum += i
}
postMessage(sum);
}
}
this.worker = new WebWorker(work)
this.worker.onmessage = function(res){
console.log("累加结果 : ",res.data)
}
}
someEvent(){
this.worker.postMessage(1000000000)
}
WebWork新开线程存在以下问题：1. work中不能访问及操作dom, 2. 新开WebWork线程会有一定的系统开销
有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流
- 邮件：[email protected]
- QQ：594341275
- 博客： @蓝色札记
文章最后发布于: 2019-03-19 10:05:18