<body>
<div id='content'>单线程点击事件</div>
<div id='db'>多线程点击事件</div>
<script>
content.onclick = function(){
let str = '',
num = 50000
console.time(1)
for (let i = 0; i < num; i++) {
str += String.fromCharCode(i)
}
console.timeEnd(1)
}
db.onclick = function(){
let num = 50000
console.time(2)
// 实例多线程对象
let w = new Worker('webWorker.js')
console.log(w)
// 传输数据
w.postMessage(num)
// 接收处理结果
w.onmessage = function(e){
console.log(e.data)
}
console.timeEnd(2)
}
</script>
</body>
webWorker.js
// 监听父级的数据 在事件对象里
self.onmessage = function(e){
let str = ''
for (let i = 0; i < e.data; i++) {
str += String.fromCharCode(i)
}
// 发送处理结果
self.postMessage(str)
}
Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。
必须在服务器环境下打开才可以
网友评论