上一节:
下一节:

  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这三个对象

上一节:
下一节: