worker和sharedworker

1、介绍

 h5的新功能，主要作用，开辟新线程，充分利用计算机算力，防止“假死”（单线程，js引擎和UI线程互斥）

worker：专属线程，只针对当前运行环境

sharedWorker：共享线程，同源策略下，多个运行环境共用同一个线程，包括数据。

 

2、worker使用

 

1、查看文档

阮一峰worker网络日子

 

2、线程js文件

self.addEventListener('message', function (event) {
    setTimeout(() => {
        self.postMessage("1111-------1111")
    }, 2000);
});
 

 

3、html文件

  
    
    
    
    
  
  
    

    按钮
    
    
  

 

4、注意事项

本地开发有同源策略问题，谷歌浏览器可以通过：chrome://inspect/#workers查看相关信息

 

3、sharedWorker

 

1、前言

sharedworker使用和worker差别不大，sharedworker是共享线程，那么，如何实现共享呢？

 

是根据实例化时候，传入参数，第一个参数：url；第二个参数：sharedworker相关的配置。

第一个参数和第二个参数的name一致（name可能有调整），则调用同一个线程，里面暂存的数据也能实现共享

 

 

sharedworker严格遵循同源策略，即代码需要在同域，如果不同域（本地开发），则实现效果和worker无差别，如何实现本地调试？

 

前端服务即可：安装http-server，对应的文件夹下面跑起来，直接调用，关闭/开启前端服务chrome://inspect/#workers 即可看到分别开启了两个线程、一个线程

 

2、线程js文件

var a = 1;
onconnect = function (e) {
    var port = e.ports[0];
    port.onmessage = function () {
        port.postMessage(a++)
    }
}

 

3、html文件（index.html）

 

    
 
使用shared worker:
 
    点击一下
    
点了 - 下
    
    

 

4、html文件（index2.html）

    
使用shared  worker:
    点击一下
    
点了 - 下
    

 

5、参考链接：很多很多（诸位原作者抱歉）。。。

 

转载于:https://www.cnblogs.com/baimulan/p/11562010.html