HTML Web Workers



  • HTML5 Web Workers

    Web worker是在后台运行的JavaScript,不会影响页面的性能。在HTML页面中执行脚本时,页面将变为无响应,直到脚本完成。Web worker是一种在后台运行的JavaScript,与其他脚本无关,不会影响页面的性能。您可以继续执行任何操作:在Web工作程序在后台运行时,单击,选择内容等。

  • 浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    10.0(包含)以上支持 4.0(包含)以上支持 3.5(包含)以上支持 4.0(包含)以上支持 11.5(包含)以上支持

    下面的示例创建了一个简单的Web worker,它在后台计算数字:

    var w;
    
                                            function startWorker() {
                                                if(typeof(Worker) !== "undefined") {
                                                    if(typeof(w) == "undefined") {
                                                        w = new Worker("/jc_script/demo_workers.js");
                                                    }
                                                    w.onmessage = function(event) {
                                                        document.getElementById("result").innerHTML = event.data;
                                                    };
                                                } else {
                                                    document.getElementById("result").innerHTML = "对不起您的浏览器不支持 Web Workers...";
                                                }
                                            }
    
                                            function stopWorker() { 
                                                w.terminate();
                                                w = undefined;
                                            }
    

    在创建Web worker之前,请检查用户的浏览器是否支持:

    if (typeof(Worker) !== "undefined") {
                                    // 浏览器支持,编写业务逻辑代码。
                                    } else {
                                        // 对不起不支持 Web worker。
                                    }
    
  • 创建Web工作文件

    现在,让我们在外部JavaScript中创建我们的Web worker。在这里,我们创建一个重要的脚本。该脚本存储在“/jc_script/demo_workers.js”文件中,代码如下:

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

    上面代码的重要部分是postMessage()方法 - 用于将消息发布回HTML页面。

    注意:通常,Web worker不用于这样的简单脚本,而是用于CPU密集型任务。
  • 创建Web Worker对象

    现在我们有了web worker文件,我们需要从HTML页面调用它。以下行检查worker是否已存在 - 如果不存在 - 它将创建一个新的Web worker对象并运行“/jc_script/demo_workers.js”中的代码:

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

    然后我们可以发送和接收来自Web worker的消息。向Web worker添加“onmessage”事件侦听器。

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

    当Web worker发布消息时,将执行事件侦听器中的代码。来自Web worker的数据存储在event.data中。

  • 终止Web Worker

    创建Web工作对象时,它将继续侦听消息(即使在外部脚本完成后),直到它终止。要终止Web工作程序并释放浏览器/计算机资源,请使用以下 terminate()方法:

    w.terminate();
    

    如果将worker变量设置为undefined,则在终止后,可以重用代码:

    w = undefined;
    
  • Web Workers和DOM

    由于Web worker位于外部文件中,因此他们无权访问以下JavaScript对象:

    window,document,parent这三个对象