HTML5 Web Workers

最新推荐文章于 2024-08-16 19:29:16 发布

Neil-

最新推荐文章于 2024-08-16 19:29:16 发布

阅读量257

点赞数

分类专栏： web前端 html5 文章标签： Web-Worker html5 浏览器用户体验

本文链接：https://blog.csdn.net/luofeng457/article/details/73502045

版权

web前端同时被 2 个专栏收录

98 篇文章 0 订阅

订阅专栏

html5

5 篇文章 0 订阅

订阅专栏

JS脚本运行和UI交互不能同时进行，有时候在脚本运行时间较长的情况下，浏览器会出现假死状态，严重影响了用户交互的体验。Web Workers的出现一定程度上解决了此问题。每个Worker都有自己完全独立的全局运行环境，并且不占用浏览器UI线程的时间。因此，可以把一些计算量大的数据处理任务交给Web Workers处理而不影响用户交互（一般，认为浏览器端脚本运行时间超过100ms即会影响用户体验。此时可以考虑使用定时器将任务分解执行或者考虑Web Workers）。

由于Web Workers并没有在浏览器UI线程队列中，因此无法使用浏览器端的一些资源。了解更多关于Web Workers可以使用的函数、APIs等可以查看此处。

前边提到，每个Worker都有独立的全局运行环境。一般这些环境包括：

navigator对象：可以使用的属性有四个appName、appVersion、userAgent、platform；
location对象：所有属性只读；
self对象：与浏览器端的window类似，指向全局的worker对象；
postMessage()：function，用于worker和主线程间的通信；
importScripts()：function，Worker全局作用域中的一个方法，用于向worker以同步方式导入一个或多个外部脚本；
定时器相关的方法：setTimeout()、clearTimeotu()、serInterval()、clearInterval();
close()：function，用于在Worker线程中立即终止Worker，在主线程中可以使用myWorker.terminate()。
多数API：console API、FileReader、FileReaderSync、ImageData、WebSocket、WebGL、XMLHttpRequest等；

Worker与主线程的网页脚本通过postMessage()和onmessage事件句柄关联起来。postMessage()用于传递数据，而onmessage进行监听并对接收到的数据进行处理。首先由主线程使用postMessage()向Worker发送需要处理的数据，Worker中的onmessage事件句柄被触发并执行，然后Worker线程使用postMessage()进行回传同时触发主线程的onmessage事件句柄。简单示例如下：

//main.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Worker Test</title>
    <script>
        var worker = new Worker("worker.js");

        worker.onmessage = function (evet) {
            console.log(event.data);
        };

        worker.postMessage("Hello, I'm the tmp.js");
    </script>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

//worker.js
importScripts("tmp.js"); //调用外部脚本供worker使用
var answer_worker = function (e) {
    var response = "I received your message: ";
    var result = strCat(response, e.data);
    postMessage(result);
}

onmessage = answer_worker;

//tmp.js
function strCat(str1, str2) {
    return str1 + str2;
}

运行结果如下：
Web Worker示例

Neil-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5 Web Workers

JS脚本运行和UI交互不能同时进行，有时候在脚本运行时间较长的情况下，浏览器会出现假死状态，严重影响了用户交互的体验。Web Workers的出现一定程度上解决了此问题。每个Worker都有自己完全独立的全局运行环境，并且不占用浏览器UI线程的时间。因此，可以把一些计算量大的数据处理任务交给Web Workers处理而不影响用户交互（一般，认为浏览器端脚本运行时间超过100ms即会影响用户体验。此时
复制链接

扫一扫