Web Worker为JavaScript开启多线程

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

 如何实现？

主线程上

const workerCaculate=(expression)=> {
    let result;
    if(typeof(Worker) !== "undefined") {
        let  w;
        if(typeof(w) == "undefined") {
//引入子线程文件，reac中的使用，引入的一定是相对根目录的文件，因为react执行的是打包后的文件，此时如果写临近目录（非根目录）的文件，会找不到文件引用的
           w = new Worker("/workflow/exceldesign/js/caculate_wev8.js");
        }
        //向子线程传递主线程的数据
        w.postMessage(expression);
        
        //接收子线程传过来的数据并处理
        w.onmessage = function(event) {
            console.log(event.data)
            result= event.data;
            w.terminate();//清除子线程
        };
    } else {
        console.log("抱歉，你的浏览器不支持 Web Workers...");
        result = eval(expression)
    }
    return result;
}

子线程上/workflow/exceldesign/js/caculate_wev8.js文件里

//子线程内容
onmessage= function(event){//event.data是主线程传过来的数据
	let result=0;
    //子线程内对主线程的数据做一些处理
	let calculate =  new ___Calculate();
	result = calculate.calculateResult(event.data);

    //将处理后的数据传给主线程
	postMessage(result);
}

 

reac中的使用，引入的一定是相对根目录的文件，因为react执行的是打包后的文件，此时如果写临近目录（非根目录）的文件，会找不到文件引用的