Web Worker

最新推荐文章于 2022-11-11 08:19:29 发布

雨落风殇

最新推荐文章于 2022-11-11 08:19:29 发布

阅读量168

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/a15180180753/article/details/80527648

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Web Worker

1.特征

长时间运行，理想的运行启动性能，以及理想的内存消耗。
用于支持多线程编程，它在web程序中可并发执行多个脚本，彼此间相互独立。
分为两种线程 Dedicated Worker专用线程，Shared Worker共享线程。

2.简单示例

a.html

<html>
    <script>
        window.οnlοad=function(){
            var worker=new Worker('worker.js);
            worker.onmessage=function(event){
                console.log(event);
            }
        }
    </script>
</html>

worker.js

<script>
    let sum=1;
    function fun(){
        for(let i=0;i<10;i++){
            sum+=i;
            postMessage(sum);
        }
    }
    postMessage(new Date());
    fun();
    postMessage(new Date());
</script>

3.worker常用api

a.html:
var worker=new Worker('worker.js);
worker.postMessage({msg:'hahah'}); //向子级传递参数
worker.οnerrοr=function(e){ //出错时执行方法
console.log(e);
worker.terminate(); //中断该线程
}
worker.js
onmessage=function(event){ //获取主线程参数
console.log(event);
postMessage(event);
}

4.worker执行上下文

worker有个自己单独的上下文，名叫WorkerGlobalScope；与window不同，因此不能访问
window及window相关api，比如dom；
常用api：
self：相当于this
close()：关闭当前线程相当于terminate
importScripts('*.js'):加载其他js文件

XMLHttpRequest，setTimeout/setInterval以及addEventListener/postMessage

5.shared web worker（共享线程）

a.html

<html>
    <script>
        window.οnlοad=function(){
            var worker=new SharedWorker('worker.js);
            var btn=document.querySelector('btn');
            var a=document.querySelector('a');
            worker.port.addEventListener('message',function(e){
                console.log(e);
            },false);
            btn.addEventListener('click',function(){
                worker.port.postMessage('123');
            },false);
            a.οnclick=()=>{
                worker.port.postMessage('234');
            }
        }
    </script>
</html>

worker.js

<script>
    var port;
    onconnect=function(e){
        port = e.ports[0];
        port.onmessage=function(e){
            if(e.data='btn'){
                console.log(e);
            }else{
                port.postMessage('111');
            }
        }
    }
</script>

雨落风殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Worker

Web Worker1.特征长时间运行，理想的运行启动性能，以及理想的内存消耗。用于支持多线程编程，它在web程序中可并发执行多个脚本，彼此间相互独立。分为两种线程 Dedicated Worker专用线程，Shared Worker共享线程。2.简单示例a.html&lt;html&gt; &lt;script&gt; window.onload=function(){ ...
复制链接

扫一扫