HTML5的WebWorkers怎么创建

本篇内容主要讲解“HTML5的Web Workers怎么创建”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5的Web Workers怎么创建”吧!

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了漳县免费建站欢迎大家使用！

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

什么是Web Worker？

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

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

浏览器支持

所有主流浏览器均支持web worker，除了Internet Explorer。

HTML5 Web Workers实例

下面的例子创建了一个简单的web worker，在后台计数：

计数：

<！DOCTYPE html>

<身体>

计数：

开始工作者 

停止Worker

<脚本>

var w;

函数startWorker（）

{

if（typeof（Worker）！==“未定义”）

  {

  if（typeof（w）==“ undefined”）

  {

  w = new Worker（“ / example / html5 / demo_workers.js”）;

  }

  w.onmessage =函数（事件）{

    document.getElementById（“ result”）。innerHTML = event.data;

    };

  }

别的

  {

  document.getElementById（“ result”）。innerHTML =“对不起，您的浏览器不支持Web Workers ...”;

  }

}

函数stopWorker（）

{ 

w.terminate（）;

}

检测Web Worker支持

在创建web worker之前，请检测用户的浏览器是否支持它：

if（typeof（Worker）！==“未定义”）

  {

  // 是的！网络工作者支持！

  //一些代码.....

  }

别的

  {

  // 对不起！不支持Web Worker。

  }

创建网络工作者

现在，让我们在一个外部JavaScript中创建我们的web worker。

在这里，我们创建了计数脚本。该脚本存储于“ demo_workers.js”文件中：

var i = 0;

函数timedCount（）

{

i = i + 1;

postMessage(i);

setTimeout（“ timedCount（）”，500）;

}

timedCount（）;

以上代码中重要的部分是 postMessage（） 方法-它用于向HTML页面传回一段消息。

注释： web worker通常不使用如此简单的脚本，或者用于更耗费CPU资源的任务。

创建Web Worker对象

我们已经有了web worker文件，现在我们需要从HTML页面调用它。

下面的代码检测是否存在worker，如果不存在，-它会创建一个新的web worker对象，然后运行“ demo_workers.js”

if（typeof（w）==“ undefined”）

  {

  w = new Worker（“ demo_workers.js”）;

  }

然后我们就可以从web worker发生和接收消息了。

向web worker添加一个“ onmessage”事件监听器：

w.onmessage =功能（事件）{

document.getElementById（“ result”）。innerHTML = event.data;

};

当web worker传递消息时，会执行事件监听器中的代码。

终止网络工作者

当我们创建web worker对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如果终止网络工作人员，并释放浏览器/计算机资源，请使用Terminate（）方法：

w.terminate（）;

完整的Web Worker实例代码

我们已经看到了.js文件中的Worker代码。下面是HTML页面的代码：

实例

<！DOCTYPE html>

<身体>

计数：

开始工作者

停止工作者

<脚本>

var w;

函数startWorker（）

{

if（typeof（Worker）！==“未定义”）

{

  if（typeof（w）==“ undefined”）

    {

    w = new Worker（“ demo_workers.js”）;

    }

  w.onmessage =函数（事件）{

    document.getElementById（“ result”）。innerHTML = event.data;

  };

}

别的

{

document.getElementById（“ result”）。innerHTML =“对不起，您的浏览器

 不支持Web Workers ...”；

}

}

函数stopWorker（）

{

w.terminate（）;

}

网络工作者和DOM

由于web worker位于外部文件中，它们无法访问下例JavaScript对象：

window对象

document对象

parent对象

到此，相信大家对“HTML5的Web Workers怎么创建”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享文章：HTML5的WebWorkers怎么创建
当前路径：http://dcwzsj.com/article/pehcip.html