zoukankan      html  css  js  c++  java
  • web worker

    web worker 多开子线程,且这些子线程无I/O权限,只能为主线程分担一些诸如计算的任务

    不足
    worker内代码不能操作DOM(更新UI)
    只能加载服务器的js文件且不能跨域加载JS
    不是所有浏览器都支持这个特性

    API
    1. 主线程
    ①创建新的Worker
    var worker = new Worker(“worker.js”)

    ②传递参数
    worker.postMessage()

    ③接收消息
    worker.onMessage = function(msg){}
    worker.onmessageerror = function(msg){}

    ④异常处理
    worker.onerror = function(err){}

    ⑤结束worker
    worker.terminate()

    2.worker线程
    self.name: Worker 的名字。该属性只读,由构造函数指定。
    self.onmessage:指定message事件的监听函数。
    self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。
    self.close():关闭 Worker 线程。
    self.postMessage():向产生这个 Worker 线程发送消息。
    self.importScripts():加载 JS 脚本。


    示例

    index.html代码:

    <!DOCTYPE html>
    <html>
      <body>
        <p>Count numbers: <output id="result"></output></p>
        <button onclick="startWorker()">Start Worker</button>
        <button onclick="stopWorker()">Stop Worker</button>
        <input type="text" value="" />
        <script>
          var w;
          function startWorker() {
            if (typeof Worker !== 'undefined') {
              if (typeof w === 'undefined') {
                w = new Worker('demo_workers.js');
              }
              w.onmessage = function (event) {
                document.getElementById('result').innerHTML = event.data;
              };
            } else {
              document.getElementById('result').innerHTML = 'Sorry, your browser does not support Web Workers...';
            }
          }
    
          function stopWorker() {
            w.terminate();
          }
        </script>
      </body>
    </html>

    demo_workers.js代码:

    function timedCount () {
      for (var i = 0; i < 10000000000; i++) {
        if (i % 100000 === 0) {
          postMessage(i);
        }
      }
    }
    
    timedCount();

    运行结果:

  • 相关阅读:
    Java学习9
    Windows环境下实现WireShark抓取HTTPS
    WireShark新手使用教程
    charles使用教程
    charles
    知道做到
    Appium 自动化测试改造思路
    今日总结
    今日总结
    今日总结
  • 原文地址:https://www.cnblogs.com/sghy/p/13529269.html
Copyright © 2011-2022 走看看