浅谈HTML5 Web Worker

Tecode 发布于2019-08-23 15:54 / 722人阅读

摘要：事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。当一个的文档列表中的任何一个对象都是处于完全活动状态的时候，这个会被称之为需要激活线程。

浏览器中的Web Worker 背景介绍

我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行，HTML5则提出了web Worker标准，表示JavaScript允许有多个线程，但是子线程完全受主线程的控制，子线程不能操作DOM，只有主线程可以操作DOM，所以以主线程为主的单线程执行原理成了JavaScript这门语言的核心。

进程与线程的区别

根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。
在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行。

兼容性

web worker是什么？

简单来说，其实就是在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程。
举个栗子

传统情况下，执行下面的代码后，整个页面都会被冻结，由于javascript是单线程处理，如下代码已经完全组塞了后续的执行

while(1){}

如果换一种方式，我们通过开启一个新的线程来执行这段代码，将他放在一个多带带的worker.js文件中,在主线程执行以下代码，则可以避免这种情况。

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

Web Worker的用法 判断当前浏览器是否支持web worker

if (typeof (Worker) != "undefined") { //浏览器支持web worker  
    if (typeof (w) == "undefined") { //w是未定义的,还没有开始计数        
        w = new Worker("webworker.js"); //创建一个Worker对象,利用Worker的构造函数  
    }
    //onmessage是Worker对象的properties  
    w.onmessage = function (event) { //事件处理函数,用来处理后端的web worker传递过来的消息  
        // do something
    };
} 
else { // 浏览器不支持web worker
    // do something
}

API

①创建新的Worker

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

②传递参数

worker.postMessage()

③接收消息

worker.onMessage = function(msg){}

④异常处理

worker.onerror = function(err){}

⑤结束worker

worker.terminate()

⑥载入工具类函数

importScripts()

Worker作用域

当我们创建一个新的worker时，该代码会运行在一个全新的javascript的环境中（WorkerGlobalScope）运行,是完全和创建worker的脚本隔离，这时我们可以吧创建新worker的脚本叫做主线程，而被创建的新的worker叫做子线程。
WorkerGlobalScope是worker的全局对象，所以它包含所有核心javascript全局对象拥有的属性如JSON等，window的一些属性，也拥有类似于XMLHttpRequest()等。
但是我们所开启的新的worker也就是子线程，并不支持操作页面的DOM。

线程间的通讯是传值而不是传地址

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

JavaScript中的数据类型存放原理以及传递规则

共享线程（SharedWorker）

共享线程是为了避免线程的重复创建和销毁过程，降低了系统性能的消耗，
共享线程SharedWorker可以同时有多个页面的线程链接。
使用SharedWorker创建共享线程，也需要提供一个javascript脚本文件的URL地址或Blob,该脚本文件中包含了我们在线程中需要执行的代码，如下：

var worker = new SharedWorker("sharedworker.js");

共享线程也使用了message事件监听线程消息，但使用SharedWorker对象的port属性与线程通信如下:

worker.port.onmessage = function(msg){};

同时我们也可以使用SharedWorker对象的port属性向共享线程发送消息如下：

worker.port.postMessage(msg);

运行原理 生命周期

①当一个web worker的文档列表不为空的时候，这个web worker会被称之为许可线程。
②当一个web worker的文档列表中的任何一个对象都是处于完全活动状态的时候，这个web worker会被称之为需要激活线程。
③当一个web worker是许可线程并且拥有计数器或者拥有数据库事务或者拥有网络连接或者它的web worker列表不为空的时候，这个web worker会被称之为受保护的线程。
④当一个web worker是一个非需要激活线程同时又是一个许可线程的时候，这个web worker会被称之为可挂起线程。

以webKit为例加载并执行worker的过程

应用 可以做什么：

1.可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性

不可以做什么：

1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致，例如FF里允许worker中创建新的worker,而Chrome中就不行
4.不是每个浏览器都支持这个新特性

专线服务混合云 web-worker 设计浅谈浅谈javascript worker

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102534.html

浅谈HTML5 Web Worker

摘要：事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。当一个的文档列表中的任何一个对象都是处于完全活动状态的时候，这个会被称之为需要激活线程。浏览器中的Web Worker 背景介绍我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进...

Vicky 2019-08-05 18:13 评论0 收藏0
前端er来学习一下webWorker吧

摘要：监听线程返回的信息父进程接收的数据主线程关闭线程线程一旦新建成功，就会始终运行，这样有利于随时响应主线程的通信。幸运的是，提供了一中转移数据的方式，允许主线程把二进制数据直接转移给子线程。 showImg(https://segmentfault.com/img/remote/1460000017153372?w=1200&h=581); 我们都知道，JavaScript 是单线程的，...

Reducto 2019-08-23 13:43 评论0 收藏0
前端er来学习一下webWorker吧

摘要：监听线程返回的信息父进程接收的数据主线程关闭线程线程一旦新建成功，就会始终运行，这样有利于随时响应主线程的通信。幸运的是，提供了一中转移数据的方式，允许主线程把二进制数据直接转移给子线程。 showImg(https://segmentfault.com/img/remote/1460000017153372?w=1200&h=581); 我们都知道，JavaScript 是单线程的，...

tracy 2019-08-05 15:36 评论0 收藏0
浅谈JavaScript中的事件循环机制

摘要：事件循环背景是一门单线程非阻塞的脚本语言，单线程意味着，代码在执行的任何时候，都只有一个主线程来处理所有的任务。在意识到该问题之际，新特性中的可以让成为一门多线程语言，但实际开发中使用存在着诸多限制。这个地方被称为执行栈。事件循环（Event Loop）背景 JavaScript是一门单线程非阻塞的脚本语言，单线程意味着，JavaScript代码在执行的任何时候，都只有一个主线程来...

Pluser 2019-08-23 15:22 评论0 收藏0
浅谈 Canvas

摘要：众所周知是的核心技术技术所在，元素用于在网页上进行绘制图形，但是本身并不具备绘制功能，必须依靠才能绘制出绚丽的图形中提供了多种绘制路径矩形圆形字符以及添加图像的方法那么具体可以做什么呢游戏在图像显示方面要远比强大，在的运用能够使的游戏运行起众所周知 Canvas 是HTML5的核心技术技术所在，canvas元素用于在网页上进行绘制图形，但是canvas本身并不具备绘制功能，canva...

genefy 2019-08-05 10:32 评论0 收藏0