ylbtech-HTML5: HTML5 Web Workers
1.返回顶部
1、

HTML5 Web Workers


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


什么是 Web Worker?

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

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


浏览器支持

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.


HTML5 Web Workers 实例

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

实例

计数:

开始 Worker 停止 Worker

尝试一下 »

demo_workers.js 文件代码:

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
} timedCount();

检测浏览器是否支持 Web Worker

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

if(typeof(Worker)!=="undefined")
{
// 是的! Web worker 支持!
// 一些代码.....
}
else
{
//抱歉! Web Worker 不支持
}

创建 web worker 文件

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

在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:

var i=0;

function 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=function(event){
document.getElementById("result").innerHTML=event.data;
};

<p当 web="" worker="" 传递消息时,会执行事件监听器中的代码。event.data="" 中存有来自="" event.data="" 的数据。<="" p="">


终止 Web Worker

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

如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

w.terminate();

完整的 Web Worker 实例代码

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button> <p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p> <script>
var w; function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
}
} function stopWorker()
{
w.terminate();
w = undefined;
}
</script> </body>
</html>

尝试一下 »


Web Workers 和 DOM

由于 web worker 位于外部文件中,它们无法访问下列 JavaScript 对象:

  • window 对象
  • document 对象
  • parent 对象
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

HTML5: HTML5 Web Workers的更多相关文章

  1. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  2. Html5之web workers多线程

    Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(t ...

  3. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  4. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  5. html5 Web Workers.RP

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  6. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  7. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

  8. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  9. HTML5(八)Web Workers

    HTML 5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不 ...

随机推荐

  1. exception中return方法

    public class ExceptionPitfall { public static void main(String[] args) { try { throw new RuntimeExce ...

  2. java对象实例化 静态块,对象块,构造函数执行顺序

    public class TestA { public static void main(String []args) { new B(); } } class A { static { System ...

  3. HDU 5183 Negative and Positive (NP) (手写哈希)

    题目链接:HDU 5183 Problem Description When given an array \((a_0,a_1,a_2,⋯a_{n−1})\) and an integer \(K\ ...

  4. T1215:迷宫

    [题目描述] 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n * n的格点组成,每个格点只有2种状态,.和#,前者表示可以通行后者表示不能通行.同时当Extense处在某 ...

  5. 4.jmeter在线并发的怎样设置

    4.1Jmeter 快速入门教程(一) - 认识jmeter和google插件 4.2Jmeter 快速入门教程(二)--创建简单web测试 打印 E-mail 4.3Jmeter 快速入门教程(三- ...

  6. 【设计模式】FactoryPattern工厂模式

    Factory Pattern 简单工厂模式 将变化的部分封装起来 //简单工厂 class SimpleProductFactory{ Product createProduct(String ty ...

  7. MSF——信息收集(四)

    MSF系列: MSF——基本使用和Exploit模块(一) MSF——Payload模块(二) MSF——Meterpreter(三) MSF——信息收集(四) 发现和端口扫描 Nmap扫描 db_n ...

  8. luoguP1541 乌龟棋 题解(NOIP2010)

    P1541 乌龟棋 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include<cma ...

  9. 哪些文件在vue项目中很重要,哪些可以删掉

    是时候告诉你重要文件是哪些了,这是一个陆游,所以 需要路由配置 index.js 路由配置文件是index.js注意这个文件最开始就在集成路由了 然后最开始集成路由的地方可以不写后缀名字,因此注意这个 ...

  10. 51.Lowest Common Ancestor of a Binary Tree(二叉树的最小公共祖先)

    Level:   Medium 题目描述: Given a binary tree, find the lowest common ancestor (LCA) of two given nodes ...