【H5】 多线程worker:
实例化多线程:worker.js执行多线程的js文件
const w = new Worker("./worker.js");
利用//postMessage传输数据 //结果返回给主线程
w.postMessage( 50000 )
利用onmessage = function(){} 监听接收信息 得出运行结果 运行结果在e中
w.onmessage = function(e){}
没有开启多线程时:
<div id="box"></div>
<script>
document.onclick = function () {
console.time(1) //计算时间开始
let str = ""
for (let i = 0; i < 50000; i++) {
str += String.fromCharCode(i); //字符串fromCharCode方法获取字符
}
box.innerText = str;
//计算时间结束 需要时间7s
console.timeEnd(1)
}
</script>
使用多线程后:
worker.js内代码:
self.onmessage = function(e){
//e.data传过来的参数
let str = ""
for( let i = 0;i<e.data;i++ ){
str += String.fromCharCode(i); //字符串fromCharCode方法获取字符
}
self.postMessage( str ); //结果返回给主线程
}
worker.html内代码:
<div id="box"></div>
<script>
document.onclick = function(e){
console.time(1)
//实例化多线程Worker
const w = new Worker("worker.js"); //worker.js使用多线程的js文件
w.postMessage( 50000 ) //传输数据给多线程
w.onmessage = function(e){ //接收返回给主线程的数据
box.innerText = e.data;
}
//执行时间变成0.5s 这就是多线程的优点
console.timeEnd(1)
}
</script>