一 postMessage应用于主页面和iframe之间进行数据的传递

1  子iframe页面向主页面进行数据传递；

// 多个子iframe需要将自己的计数统计到主页面进行数据上报window.parent.postMessage({    count:count(),    id:'1'},'*');// 主页面进行接收window.onmessage = (e)=>{    if(!e.data.id) return;    var id = e.data.id;    var count = e.data.count;    // 根据收到的子页面的数据进行更新的操作 通过id判断具体是哪个页面    updateCountMessage(id,count);};

2  主页面向子页面进行数据的下发，比如需要将初始计数的数据分发到各个iframe

// 给各个iframe添加加载事件 以vue框架为例// template

注意：

　　1 当使用webpack时 webpack自身会发送postMessage，注意监听message时区分具体是自己发来的message还是webpackOK ;

　　2 Q ：在本地开启静态服务器（利用lite-server）时，在主页面和多个iframe页面之间数据传递调用相应的函数，会存在在不同的iframe页面内同一函数都被执行了的问题；

　　　A： lite-server开启的静态服务器共享了实例导致不同页面的同一个函数都被执行，我们换一个server既可，如使用vs打开 之后选择要运行的文件在右下角功能栏最左侧有Go Live 既可在浏览器中打开页面

       

二 postMessage应用于js主线程和worker多线程之间进行数据传递,下面对比原生和webworker的不同

html文件内容

    
         
         
             
     
    
     
      原生js获取获取数列第40项
     
　

将js内容分别注释体验html页面的加载情况；

self.onmessage = function(event){    var data = event.data;    var ans = fibonacci(data);    this.postMessage(ans);}function fibonacci(n){    return n<2?n:arguments.callee(n-1)+arguments.callee(n-2);}

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

关于webWorker可以参考：