zoukankan      html  css  js  c++  java
  • html5 web worker

    A web worker is a JavaScript running in the background, without affecting the performance of the page.

    web worker是运行在后台的js,不影响页面的性能。

    What is a Web Worker?

    When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

    当执行js脚本时,页面是不可响应的直到脚本运行完。

    A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

    web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

    The example below creates a simple web worker that count numbers in the background:

    Check Web Worker Support

    Before creating a web worker, check whether the user's browser supports it:

    if(typeof(Worker)!=="undefined")
      {
      // Yes! Web worker support!
      // Some code.....
      }
    else
      {
      // Sorry! No Web Worker support..
      }

     


    Create a Web Worker File

    Now, let's create our web worker in an external JavaScript.

    Here, we create a script that counts. The script is stored in the "demo_workers.js" file:

    var i=0;

    function timedCount()
    {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
    }

    timedCount();

    The important part of the code above is the postMessage() method - which is used to posts a message back to the HTML page.

    Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.


    Create a Web Worker Object

    Now that we have the web worker file, we need to call it from an HTML page.

    The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":

    if(typeof(w)=="undefined")
      {
      w=new Worker("demo_workers.js");
      }

    Then we can send and receive messages from the web worker.

    Add an "onmessage" event listener to the web worker.

    w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
    };

    When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.


    Terminate a Web Worker

    When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

    To terminate a web worker, and free browser/computer resources, use the terminate() method:

    w.terminate();
     
    完整例子:
    <!DOCTYPE html>
    <html>
    <body>
    
    <p>Count numbers: <output id="result"></output></p>
    <button onclick="startWorker()">Start Worker</button> 
    <button onclick="stopWorker()">Stop Worker</button>
    <br><br>
    
    <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:

    var i=0;
    
    function timedCount()
    {
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
    }
    
    timedCount();
  • 相关阅读:
    网页a标签:导航制作 怎么让鼠标经过A标签的时候显示块状背景?
    从头开始,慢慢来,今天工作日志
    想看所有的美国系列电影
    百分比宽度并排元素浮动之后,设置margin,padding换行的问题
    TP5.1 首页路由
    关于Layui 响应式移动端轮播图的问题
    BootStrap 栅格化换行问题
    VS code 格式化插件, 仅需一步, 无须配置
    PHPStorm 批量选择,多光标同时编辑相同的内容
    使用Cmder 安装 Composer 出现 "attempt to call a nil value"
  • 原文地址:https://www.cnblogs.com/youxin/p/3411450.html
Copyright © 2011-2022 走看看