HTML 5 之 Web Workers

系统管理员 2022-08-19 08:38 17阅读 0赞

**1 定义**

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

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

## 2 浏览器支持 ##

所有主流浏览器均支持 web worker，除了 Internet Explorer。

**3.使用步骤**

## 检测 Web Worker 支持----创建 web worker 文件----创建 Web Worker 对象----终止 Web Worker ##

**4.实例分析**

**在浏览器内部创建个计数器，不影页面性能**

<span style="font-size:18px;"><strong><!DOCTYPE html>
    <html>
    <body>
    
    <p>Count numbers: <output id="result"></output></p>
    <button οnclick="startWorker()">Start Worker</button>
    <button οnclick="stopWorker()">Stop Worker</button>
    <br /><br />
    
    <script>
    var w;
    
    function startWorker()
    {
    if(typeof(Worker)!=="undefined")//</strong></span>检测支持<span style="font-size:18px;"><strong>
    {
      if(typeof(w)=="undefined")
        {
        w=new Worker("demo_workers.js");//</strong></span>创建web work,js文件以及new 对象<span style="font-size:18px;"><strong>
        }
      w.onmessage = function (event) {
        document.getElementById("result").innerHTML=event.data;//</strong></span>向 web worker 添加一个 "onmessage" 事件监听器：<span style="font-size:18px;"><strong>
      };
    }
    else
    {
    document.getElementById("result").innerHTML="Sorry, your browser
     does not support Web Workers...";
    }
    }
    
    function stopWorker()
    {
    w.terminate();//</strong></span>终止<span style="font-size:18px;"><strong>
    }
    </script>
    
    </body>
    </html></strong></span>

##  ##

## 5.注意点  由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：  window 对象  document 对象  parent 对象      ##