通过一次实验来了解HTML5的 Web Worker

web worker 是运行在后台的 JavaScript,不会影响页面的性能。

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。



  以上是W3School对WebWorker的定义,讲的非常明确。在这段解释中,我一眼就看到了一句话“执行脚本时,页面状态是不可响应的”,这让我想到了BOM的一些系统对话框,像alert之类的。大家都知道当有alert之类的消息窗口时,它是模态且同步的,整个HTML页面元素和脚本都会停止无法点击,直到点击了确定,脚本才会继续执行。如果按照HTML5的Web Worker的后台工作的性质,是否意味着可以不受限于对话框的限制,继续执行代码。本着实践出真知,下面一起来看看!

  1.  我们首先看看正常情况,一个自动累加器是如何运作的。

第一张图,附上HTML结构。我们是用一个非常常见的方法,也就是通过一个setTimeout定时器,不断重复调用自身,达到1S增加一次的效果。然后把累加的值,放到output标签内。然后我们让它跑起来吧!

我们可以发现,当我们点击alert按钮的时候,数字不再往上累加。这是我们非常常见的啦,因为对话框是同步执行的,意味着不点击就会造成线程阻塞。难不成用了Web Worker就可以继续运行?我们接下来继续看。

  2.  使用Web Worker的累加器。

在我们看运行的GIF之前,我们先看看如何构建一个Web Worker。

首先,我们需要检测一下浏览器是否支持Worker,毕竟是一个HTML5的新功能。然后直接通过new一个Worker,再把需要执行的脚本文件作为一个参数传进去。然后通过监听这个Web Worker的message事件,数据放在event.data进行实时的反馈。既然有一个message事件,那么那个需要执行的脚本自然会有一个发送message的操作,我们看一下是什么样子的。

也就是postMessage(data),通过这个API我们可以将Worker里的数据通过message传出去。然后外部再监听message事件,进行数据更新。那说了这么多,那真正的问题是否解决了呢?也就是那个,Worker里执行的脚本是独立于其它脚本,自行在后台运行的。废话不多说,直接看效果!

非常的牛逼!我忍不住打了几个字。我们可以清楚的看到,对于单线程的JavaScript来说,即使模态框阻塞了线程,计数器的数字依旧是在做改变的。(这里不得不有些小疑问,既然线程被阻塞了,但是为什么message事件监听触发的innerHTML依旧是可以运行?难道是只要事件一触发就会立即执行的原因?有知道的人可以帮忙解答一下,谢谢~!)从这里我们可以明显看到,确实在web worker的Js脚本是独立的,并不会和当前页面的脚本相冲突。当然,这里不得不提一句,Web Worker的Js脚本的作用域和当前页面Js脚本作用域并不能共享,换言之也就是,它们的全局作用域并不是同一个,Worker的全局作用域是它自己本身,所以Web Worker自然也就无法操作DOM元素。

  那我们可以用 Web Worker 做什么呢?因为Js的单线程,我们必须要防止过大的计算堵塞了用户页面,那通过这个HTML5最新的 Web Worker 技术,我们可以把一些非常耗时的计算都放在外部,以免影响了用户体验。

  最后,这里同样是抛砖引玉。希望可以通过这个可以帮助更多的人,了解到较新的HTML5技术,然后主动的去探寻更多的Web技术。

时间: 2024-10-11 05:55:56

通过一次实验来了解HTML5的 Web Worker的相关文章

html5的Web Worker和SSE(Server-Sent-Event)

web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 创建 web worker 文件 现在,让我们在一个外部 JavaScript 中创建我们的 web worker. 在这里,我们创建了计数脚本.该脚本

html5之Web Worker -- js多线程编程

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成.而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作.后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程. 有两种 W

JS利用HTML5的Web Worker实现多线程

需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面 var number = 55;//传入分线程的参数 var worker = new Worker('worker.js');//利用一个js文件创建一个分线程 worker.postMessage(number);//向分线程传入数据 woker.onmessage=function(event){//设置分线程的回调函数,并接收返回的结果 console.log('接收到分线

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5新增的一些属性和功能之八——web Worker

Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把js文件放在body结束之前,或者优化算法复杂度.但是根本上解决还是线程的问题.在HTML5中新增了web Workers的方法,用来解决JavaScript多线程的问题.把一些耗时的程序放在单独的js中,和浏览器的UI渲染线程同步执行. 如何用: 1.首先把需要单独执行的js代码单独放在一个js文

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

【HTML5】Web Workers

什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker 在后台运行. 计数器: <!DOCTYPE html> <html> <body> <p>计数: <output id="result"><

HTML5之WEB Storage

什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速. 数据不再包括在每个server请求中,仅仅存在你须要的时候.同一时候我们也能够保存大量数据,而不影响站点的性能. 数据都保存成key/value形式,一个web页面仅仅能够訪问自己的数据. 浏览器支持 IE8+,Firefox,Chrome.Opera和Safari 5都支持这个特性. 注意IE7和更早版本号

深入 HTML5 Web Worker 应用实践:多线程编程

深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持.其中,最重要的一个便是对多线程的支持.在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启