worker多线程是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能
一、多线程的原理:在火车站买票,如果只有一个售票窗口,很多人同时买票,这时就非常拥堵,耗时比较长,而且可能会发生安全事故,那么如果新开多个售票窗口,就能起到分流的效果,很快能买到票,不会发生异常情况
二、用法:
1.点击按钮创建多线程对象
2.发送数据
3.把比较复杂的运算放到多线程里面计算,然后把计算完的结果发送到前端页面
三、具体流程:
//a)前端页面
document.onclick = function(){
console.time(1);
let w = new Worker("worker.js"); //创建对象
w.postMessage(5000); //发送到work.js文件里面
w.onmessage = function(e){
box.innerHTML = e.data; //e.data是work.js计算完成的结果
}
console.timeEnd(1);
}
//b)多线程处理页面work.js
importScripts("其它work.js文件");
self.onmessage = function(e){
//要大量的计算,最好放在多线程里面,self指向全局的worker对象
let str = "";
for(let i = 0; i<e.data; i++){
str += String.fromCharCode(i);
}
self.postMessage(str);
}
对比不开多线程的时间
document.onclick = function(){
//根据ASCII码生成大量的字符串
console.time(1)
let str = "";
let num = 50000;
for(let i=0; i<num; i++){
str +=String.fromCharCode(i);
}
box.innerHTML = str;
console.timeEnd(1);
}