搜索
首页web前端H5教程HTML5新特性之Web Worker

HTML5新特性之Web Worker

Mar 30, 2017 am 11:54 AM

1、概述

JavaScript语言采用的是单线程模型,也就是说,所有任务排成一个队列,一次只能做一件事。随着电脑计算能力的增强,这一点带来很大的不便,无法充分发挥JavaScript的潜能。龙其考虑到,File API允许JavaScript读取本地文件,就更加如此了。

Web Worker的目就,就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程。在主线程运行的同时,子线程在后台运行,两者互不干扰。等到子线程完成计算任务,再把结果返回给主线程。因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作。

Web Worker有以下几个特点:

  • 同域限制:子线程加载的脚本文件,必须与主线程的脚本文件在同一个域。

  • DOM限制:子线程无法读限网页的DOM对象,即document、window、parent这些对象,子线程都无法得到。(但是,navigator对象和location对象可以获得。)

  • 脚本限制:子线程无法读取网页的全局变量和函数,也不能执行alert和confirm方法,不过可以执行setInterval和setTimeout,以及使用XMLHttpRequest对象发出AJAX请求。

  • 文件限制:子线程无法读取本地文件,即子线程无法打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

使用之前,检查浏览器是否支持这个API。支持的浏览器包括 IE 10+、Firefox 3.6+、Safari 4.0+、Chrome 和 Opera 11,但是手机浏览器还不支持。

if (window.Worker) {    // 支持} else {    // 不支持}

2、新建和启动子线程

在主线程内部,采用new命令调用Worker方法,可以新建一个子线程。

var worker = new Worker('work.js');

Worker方法的参数是一个脚本文件,这个文件就是子线程所要完成的任务,上面代码中是work.js。由于子线程不能读取本地文件系统,所以这个脚本文件必须来自网络端。如果下载没有成功,比如出现404错误,这个子线程就会默默地失败。

子线程新建之后,并没有启动,必需等待主线程调用postMessage方法,即发出信号之后才会启动。

worker.postMessage('hello world');

postMessage方法的参数,就是主线程传给子线程的信号。它即可以是一个字符串,也可以是一个对象。

worker.postMessage({method: 'each', args: ['work']});

3、子线程的事件监听

在子线程内,必须有一个回调函数,监听message事件。

//File: work.jsself.addEventListener('message', function(e) {

    self.postMessage('You said: ' + e.data);

}, false);

self代表子线程自身,self.addEventListener表示对子线程的message事件指定回调函数(直接指定onmessage属性的值也可以)。回调函数的参数是一个事件对象,它的data属性包含主线程发来的信号。self.postMessage则表示,子线程向主线程发送一个信号。

根据主线程发来的不同的信号值,子线程可以调用不同的方法。

'message',  method = args = reply =);

4、主线程的事件监听

主线程也必须指定message事件的回调函数,监听子线程发来的信号。

// File: main.jsworker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

5、错误处理

主线程可以监听子线程是否发生错误。如果发生错误,会触发主线程的error事件。

worker.onerror(function(e) {
    console.log(e);
});// orworker.addEventListener('error', function(e) {
    console.log(e);
}, false);

6、关闭子线程

使用完毕后,为了节省系统资源,我们必须在主线程调用terminate方法,手动关闭子线程。

worker.terminate();

也可以子线程内部关闭自身。

self.close();

7、主线程与子线程的数据通信

主线程与子线程之间的通信内容,可以是文本,也可以是对象。需要注意的是,这种通信是拷贝关系,即是传值而不是传址,子线程对通信内容的修改,不会影响到主线程。事实上,浏览器内部的运行机制是,先将通信内容串行化,然后把串行化后的字符串发给子线程,后者再将它还原。

主线程也子线程这间也可以交换二进制数据,比如File、Blob、ArrayBuffer等对象,也可以在线程之间发送。

但是,用拷贝方式发送二进制数据,会造成性能问题。比如,主线程向子线程发送一个500MB文件,默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题,JavaScript允许主线程把二进制数据直接转移给子线程,但是一旦转移,主线程就无法再使用这些二进制数据了,这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法,叫做Transferable Objects。

如果要使用该方法,postMessage方法的最后一个参数必须是一个数组,用来指定前面发送的哪些值可以被转移给子线程。

worker.postMessage(arrayBuffer, [arrayBuffer]);

8、同页面的Web Worker

通常情况下,子线程载入的是一个单独的JavaScript文件,但是也可以载入与主线程在同一个网页的代码。假设网页代码如下:

<!DOCTYPE html>
    <body>
        <script id="worker" type="app/worker">

            addEventListener(&#39;message&#39;, function() {
                postMessage(&#39;Im reading Tech.pro&#39;);
            }, false);        </script>
    </body></html>

我们可以读取页面的script,用worker来处理。

var blob = new Blob([document.querySelector(&#39;#workere&#39;).textContent]);

这里需要把代码当作二进制数据读取,所以使用Blob接口。然后,这个二进制对象转为URL,再通过这个URL创建worker。

var url = window.URL.createObjectURL(blob);var worker = new Worker(url);

部署事件监听代码。

worker.addEventListener(&#39;message&#39;, function(e) {
    console.log(e.data);
}, false);

最后启动worker。

worker.postMessage(&#39;&#39;);

整个页面的代码如下:


    
        

        <script>
            (function() {                
            var blob = new Blob([document.querySelector(&#39;#worker&#39;).textContent]);                
            var url = window.URL.createObjectURL(blob);                
            var worker = new Worker(url);

                worker.addEventListener(&#39;message&#39;, function(e) {
                    console.log(e.data);
                }, false);

                worker.postMessage(&amp;#39;&amp;#39;);
            })();        </script>
    

可以看到,主线程和子线程的代码都在同一个网页上面。

上面所讲的Web Worker都是专属于某个网页的,当该网页关闭,worker就自动结束。除此之外,还有一种共享式的Web Worker,允许多个浏览器窗口共享同一个worker,只有当所有窗口关闭,它才会结束。这种共享式的Worker用SharedWorker对象来创建,因为适用场合不多,这里就省略了。

以上是HTML5新特性之Web Worker的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5代码的基础:密钥元素及其目的H5代码的基础:密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等,用于构建现代网页。1.定义头部内容,2.用于导航链接,3.表示独立文章内容,4.组织页面内容,5.展示侧边栏内容,6.定义页脚,这些元素增强了网页的结构和功能性。

HTML5和H5:了解常见用法HTML5和H5:了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别,H5是HTML5的简称。1.HTML5是HTML的第五个版本,增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用,适用于各种移动设备。

HTML5:现代网络的基础(H5)HTML5:现代网络的基础(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本,由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强,提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签,如、、、等,使网页结构更清晰,SEO效果更好。HTML5支持多媒体元素和,无需第三方插件,提升了用户体验和加载速度。HTML5增强了表单功能,引入了新的输入类型如、等,提高了用户体验和表单验证效率。

H5代码:编写清洁有效的HTML5H5代码:编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码?答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等,提升代码可读性和SEO效果。2.保持代码结构化和可读性,使用适当缩进和注释。3.优化性能,通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误,如标签未闭合,确保代码有效性。

H5:如何增强网络上的用户体验H5:如何增强网络上的用户体验Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

解构H5代码:标签,元素和属性解构H5代码:标签,元素和属性Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

了解H5代码:HTML5的基本原理了解H5代码:HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

H5代码:Web开发人员的最佳实践H5代码:Web开发人员的最佳实践Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括:1.使用正确的DOCTYPE声明和字符编码;2.采用语义化标签;3.减少HTTP请求;4.使用异步加载;5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。