资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用WebWorkers需要明白哪些知识

这期内容当中小编将会给大家带来有关使用Web Workers需要明白哪些知识,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站设计、成都网站建设、讷河网络推广、微信小程序定制开发、讷河网络营销、讷河企业策划、讷河品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供讷河建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

介绍

Web Workers允许你在后台运行JavaScript代码,而不会阻止web用户界面。Web  Workers可以提高网页的整体性能,还可以增强用户体验。Web Workers有两种风格 ——专用Web Workers和共享Web  Workers。本文讨论了你所需要知道的Web worker的七个关键方面,帮助你决定在应用程序中使用它们的话。

1.Web Workers允许你在后台运行JavaScript代码

通常,你在Web页面中编写的JavaScript代码在与用户界面相同的线程中执行。这就是为什么当你点击一个会触发漫长处理过程的按钮,网页的用户界面会冻结。除非处理完成,否则你就无法工作于用户界面。Web  worker允许你在后台执行JavaScript,以便用户界面保持响应,即使同时正在执行某些脚本。执行脚本的后台线程通常称为worker thread或worker。你可以生成尽可能多的worker,只要你想。你还可以将数据传递到正在worker thread中执行的脚本,并在完成时将值返回到主线程。然而,Web Workers有一些限制,如下所示:

  • Web Workers无法从web页面访问DOM元素。

  • Web Workers无法从web页面访问全局变量和JavaScript函数。

  • Web Workers不能调用alert()或confirm()函数。

  • 不能在Web Workers中访问诸如窗口,文档和parent这样的对象。

但是,你可以使用setTimeout(),setInterval()等函数。你也可以使用XMLHttpRequest对象向服务器发出Ajax请求。

2.Web Workers有两种类型

Web Workers有两种类型:专用Web Workers和共享Web Workers。专用Web  Workers随同创建它们的网页一起存在和死亡。这意味着在网页中创建的专用Web Workers无法通过多个网页访问。另一方面,共享Web  Workers在多个网页之间是共享的。Worker类代表专用Web Workers,而SharedWorker类代表共享Web Workers。

在许多情况下,专用Web Workers就可以满足你的需求。这是因为通常你需要在worker thread中执行一个网页的特定脚本。然而,有时,你需要在worker  thread中执行一个脚本,并且这个worker thread对多个网页通用。在这种情况下,创建许多专用Web  Workers,每个页面一个,还不如使用共享Web Workers。由一个网页创建的共享web  worker仍然可用于其他网页。只有当所有到它的连接被关闭,才能毁坏它。共享Web Workers比专用Web Workers更复杂一点。

3.Worker对象代表专用Web Worker

现在,你了解了Web Workers的基础知识,让我们看看如何使用专用Web  Workers。下面讨论的示例假设你已使用喜欢的开发工具创建了一个Web应用程序,并且还在其Script文件夹中添加了jQuery和Modernizr库。将HTML页面添加到web应用程序,然后键入以下代码:

         $(document).ready(function () {             if (!Modernizr.webworkers)             {                 alert("This browser doesn't support Web Workers!");                 return;             }             $("#btnStart").click(function () {                 var worker = new Worker("scripts/lengthytask.js");                 worker.addEventListener("message", function (evt) {                     alert(evt.data);                 },false);                 worker.postMessage(10000);             });         });      

上面的HTML页面包含一个触发一些JavaScript处理的按钮(btnStart)。请注意,该网页引用了Modernizr和jQuery库。