• 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..
    }

      

      

  • 相关阅读:
    1.4.2.3. SETUP(Core Data 应用程序实践指南)
    1.4.2.2. PATHS(Core Data 应用程序实践指南)
    1.4.2.1. FILES(Core Data 应用程序实践指南)
    1.4.2. 实现 Core Data Helper 类(Core Data 应用程序实践指南)
    1.4.1. Core Data Helper 简介(Core Data 应用程序实践指南)
    1.4. 为现有的应用程序添加 Core Data 支持(Core Data 应用程序实践指南)
    1.3.2. App Icon 和 Launch Image(Core Data 应用程序实践指南)
    1.3.1. 新建Xcode项目并设置故事板(Core Data 应用程序实践指南)
    php验证邮箱是否合法
    如何使js函数异步执行
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/7440038.html
Copyright © 2020-2023  润新知