在单页应用中使用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的错误。
*方案 1. 将worker.js放入public等可以直接http访问的静态资源文件夹下面，注意是不支持跨域访问的。
*方案 2. 使用第三方插件例如react-webworker，npm地址：点击这里
*方案 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线程会有一定的系统开销
有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流
- 邮件：594341275@qq.com
- QQ：594341275
- 博客： @蓝色札记
3223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
