JavaScript中的Web worker多线程API研究

前端技术 2023/09/06 JavaScript

HTML5支持了Web Worker这样的API，允许网页在安全的情况下执行多线程代码。不过Web Worker实际上受到很多限制，因为它无法真正意义上共享内存数据，只能通过消息来做状态通知，所以甚至不能称之为真正意义上的“多线程”。

Web Worker的接口使用起来很不方便，它基本上自带一个sandbox，在沙箱中跑一个独立的js文件，通过 postMessage和 onMessge来和主线程通信：

复制代码 代码如下:

var worker = new Worker(\"my.js\");
var bundle = {message:\'Hello world\', id:1};
worker.postMessage(bundle); //postMessage可以传一个可序列化的对象过去
worker.onmessage = function(evt){
    console.log(evt.data);    //比较worker中传回来的对象和主线程中的对象
    console.log(bundle);  //{message:\'Hello world\', id:1}
}

复制代码 代码如下:

//in my.js
onmessage = function(evt){
    var data = evt.data;
    data.id++;
    postMessage(data); //{message:\'Hello world\', id:2}
}

得到的结果可以发现，线程中得到的data的id增加了，但是传回来之后，并没有改变主线程的bundle中的id，因此，线程中传递的对象实际上copy了一份，这样的话，线程并没有共享数据，避免了读写冲突，所以是安全的。保证线程安全的代价就是限制了在线程中操作主线程对象的能力。

这样一个有限的多线程机制使用起来是很不方便的，我们当然希望Worker能够支持让代码看起来具有同时操作多线程的能力，例如，支持看起来像下面这个样子的代码：

复制代码 代码如下:

var worker = new ThreadWorker(bundle /*shared obj*/);

worker.run(function(bundle){
    //do sth in worker thread...
    this.runOnUiThread(function(bundle /*shared obj*/){
        //do sth in main ui thread...
    });
    //...
});

本文地址：https://www.stayed.cn/item/15057

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案