夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色
【翻译】【Web前端】WebWorker – 维基百科

原文:https://en.wikipedia.org/wiki/Web_worker
翻译:van_fanatsy
翻译自英文

Web worker

WebWorker由万维网联盟(W3C)与网页超文本应用技术工作小组(WHATWG)定义。

WebWorker是由HTML页面执行、在后台运行的Javascript脚本,其运行独立于由HTML页面执行的其它脚本,它通常能高效利用多核CPU。

W3C与WHATWG认为WebWorker是长期运行的脚本,它不受响应点击以及其它DOM事件的脚本的影响。由于不受用户页面操作的影响,它能使页面在保持响应的同时处理长期任务。

WebWorker的最简单的使用就是在不影响用户界面的情况下执行高计算量的任务。

WebWorker规范是HTML标准的一部分。

总览

WHATWG认为WebWork占用高,不适宜大量使用。它们会长期运行,启动成本高,每个实例的内存占用也高。

WebWorker独立于HTML页面脚本运行。因此,虽然它们无法进行DOM操作,但它们可以与其它JavaScript脚本并发执行。

特点

WebWorker通过消息传递的方式与页面进行交互。如下代码是对一个Worker的初始化:

var worker = new Worker("worker_script.js");

可以通过postMessage方法进行消息传递:

worker.postMessage("Hello World!");

onmessage事件触发器来获取Worker传递消息:

worker.onmessage = function(event) {
    alert("Received message " + event.data);
    doSomething();
}

function doSomething() {
    //do work
    worker.postMessage("Work done!");
}

worker.terminate();

当Worker程序结束后,其生命周期结束,引用它的变量回到无效的状态,此时,如果需要,得初始化一个新的Worker。

例子

WebWorker的最简单的使用就是在不影响用户界面的情况下执行高计算量的任务。

在这个例子中,页面生成了一个用于运算素数的WebWorker,它并不会影响用户界面。页面代码如下:

<!DOCTYPE html>
<html>
    <head>
    <title>Worker example: One-core computation</title>
    </head>
     <body>
        <p>The highest prime number discovered so far is: <output id="result"></output></p>
        <script>
            var worker = new Worker('worker.js');
            worker.onmessage = function (event) {
                document.getElementById('result').textContent = event.data;
            };
        </script>
    </body>
</html>

Worker()构造方法生成了一个WebWorker并返回一个worker对象,代表WebWorker。该对象用于与WebWorker的交互,其onmessage事件使得它能接收WebWorker发来的消息。

WebWorker代码入下:

var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
    n++;
    for (var i = 2; i <= Math.sqrt(n); i++)
        if (n % i == 0)
            continue search;
    // 找到了素数
    postMessage(n);
}

在此,postMessage()方法被用来在找到素数时给页面传递消息。

支持

若浏览器支持,Worker属性在全局窗口对象有效,若浏览器不支持,Worker属性无效。

以下代码检查浏览器是否支持WebWorker:

function browserSupportsWebWorkers() {
    return typeof window.Worker === "function";
}

目前,Chrome, Opera, Edge, IE10, Mozilla Firefox和Safari支持WebWorker。对于移动端,IOS5以上的Safari以及安卓2.1下的安卓浏览器支持,2.2到4.3不支持,4.4开始重新支持。

评论

  1. 上一篇 Galgame 吓一跳,看篇 Wiki 压压惊。

    13小时前
    2020-7-11 13:29:52

发送评论 编辑评论


上一篇
下一篇
隐藏
变装