zoukankan      html  css  js  c++  java
  • web worker原理 && SSE原理

    第一部分

    什么是 web worker? 

      我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复杂的、耗费cpu的运算,不能操作window、document、parent对象,所以说本质上的JavaScript还是单线程的。

      这里,我们仅仅举一个简单的例子,看看web worker是怎么运行的,毕竟是html5的规范,目前浏览器的支持还不是很好。

      web worker就是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能。您还可以做任意想做的事情,不会影响点击等操作。

    为什么需要web worker?

      对于耗时而不操作DOM的JavaScript,我们就可以使用web worker,增强性能。 

    web worker有什么要注意的地方?  

    • 不是所有的浏览器都支持,使用前要检查浏览器是否支持。 
    • web worker运行于外部文件中,所以他们无法访问下面的JavaScript对象。
    • 理解好 worker,worker在计算机领域通常被翻译为线程或者是进程。而这里的worker意义也是如此。 我们需要将之正确对待。 

    web worker实例

    创建worker.js外部文件:

    var i = 0; 
    setInterval(function () {
      postMessage(i++);
    }, 1000);

    html文件如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <p>计数:<span id="result"></span></p>
      <button onclick="start()">web worker开始工作</button>
      <button onclick="stop()">web worker结束工作</button>
      <script>
        var w;
        function start() {
          if (typeof Worker != 'undefined') {
            w = new Worker('worker.js');
            w.onmessage = function (event) {
              document.getElementById('result').innerHTML = event.data;
            }
          } else {
            document.getElementById('result').innerHTML = '您的浏览器不支持web worker';
          }
    
        }
    
        function stop() {
          w.terminate();
          w = undefined;
        }
      </script>
    </body>
    </html>

    即首先判断:是否支持Worker构造函数,如果支持,就传递一个js文件创建这个文件的实例,然后就可以调用 message 事件,接收从 worker.js 中获得的数据。 

    注意: 必须在服务器上测试,否则会有跨域问题。

    最终,我就可以看到效果了。 

    代码地址: https://github.com/zzw918/cross-origin/tree/master/webWorker

      

    第二部分:

    HTML5 服务器发送事件(Server-Sent Events)

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。

    Server-Sent 事件 - 单向消息传递

    Server-Sent 事件指的是网页自动获取来自服务器的更新。

    以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。

    例子:Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

    接收 Server-Sent 事件通知

    EventSource 对象用于接收服务器发送事件通知:

    var source=new EventSource("demo_sse.php");
    source.onmessage=function(event)
    {
        document.getElementById("result").innerHTML+=event.data + "<br>";
    };
      • 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
      • 每接收到一次更新,就会发生 onmessage 事件
      • 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中

     

    检测 Server-Sent 事件支持

    if(typeof(EventSource)!=="undefined")
    {
      // 浏览器支持 Server-Sent
      // 一些代码.....
    }
    else
    {
    // 浏览器不支持 Server-Sent..
    }

      

      

  • 相关阅读:
    【设计模式】适配器
    【c++算法】变序性算法
    【电信业务】【原则与规范】TMF的NGOSS
    【电信业务】【原则与规范】ITU的TMN
    【c++算法】排序算法
    家后
    【设计模式】桥接
    【电信业务】【原则与规范】SOA 面向服务架构
    UIImage转换成UIView
    ASIHTTPREQUEST网络加载图片
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/7440038.html
Copyright © 2011-2022 走看看