HTML Web Workers
Web worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。
Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。
检测 Web Worker 支持
在创建 web worker 之前,请检测用户浏览器是否支持它:
if (typeof(Worker) !== "undefined") {
// 是的!支持 Web worker!
alert("支持 ")
// 一些代码.....
} else {
// 抱歉!不支持 Web Worker!
alert("不支持")
}
}
创建 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;
};
当 web worker 传送消息时,会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。
终止 Web Worker
当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
复用 Web Worker
如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:
w = undefined;
完整的 Web Worker 实例代码
我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码:
实例
<!DOCTYPE html>
<html>
<body> <p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button>
<br /><br /> <script>
var w; function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("/example/html5/demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
} function stopWorker()
{
w.terminate();
}
</script> </body>
</html>
Web Worker 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
- window 对象
- document 对象
- parent 对象
HTML Web Workers的更多相关文章
- Web Workers
在 Web Workers 中使用 postMessage 和 onmessage 首先,需要在客户端页面的 JavaScript 代码中 new 一个 Worker 实例出来,参数是需要在另一个线程 ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- 3D拓扑自动布局之Web Workers篇
2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的 ...
- 【HTML5】Web Workers
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
- HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
- HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
- JavaScript 学习笔记 - Web Workers
前言 本文仅是 Web Workers 的入门科普文章,不涉及太琐碎的知识点. 我们知道,在 Web Workers 出来之前,JavaScript 是单线程的.即使是 setTimeout 之类的看 ...
- (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event
浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核 Trident内核,也是俗称的IE内核Chrome 浏览器内核 统称为 Chromium 内核或 ...
- 通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。
Web Workers API - Web API 接口参考 | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API ...
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
随机推荐
- 201871010128-杨丽霞《面向对象程序设计(java)》第十五周学习总结
201871010128-杨丽霞<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- 201871010132-张潇潇-《面向对象程序设计(java)》第六-七周学习总结
201871010132-张潇潇-<面向对象程序设计(java)>第六-七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh ...
- Linux上用NAT实现上网
1. 安装好Linux后,选择NAT方式 2. 在Windows主机上用ipconfig /all 查看VMnet8的IP地址,一般是192.168.X.1/255.255.255.0,如果不知道是哪 ...
- HTTPS各版本安全策略HTTPS1_1_TLS1_0、HTTPS2_TLS1_0、HTTPS2_TLS1_2
来自阿里云 https://help.aliyun.com/document_detail/115169.html HTTPS安全策略 更新时间:2019-04-26 14:49:12 分组 ...
- org.slf4j.helpers.Log4jLoggerFactory is not on classpath. Good!
View Javadoc 1 /* 2 * Licensed to the Apache Software Foundation (ASF) under one or more 3 * contrib ...
- redixdb 基于redis 协议的实时key-value 存储
redixdb 是一个基于redis 协议搞的一个实时key value 处理的轻量级应用,支持多种后端 存储模型. 以下是一个小版的容器镜像(官方的太大了) dockerfile FROM go ...
- 【转】用C语言实现FFT算法
傅里叶变换 快速傅里叶变换(Fast Fourier Transform,FFT)是一种可在 时间内完成的离散傅里叶变换(Discrete Fourier transform,DFT)算法. 在算法 ...
- [ Python入门教程 ] Python文件基本操作
本文将python文件操作实例进行整理,以便后续取用. 文件打开和创建 Python中使用open()函数打开或创建文件.open()的声明如下: open(name[, mode[, bufferi ...
- js中VO解析
执行环境(环境) 执行环境的用处 执行环境定义了变量或函数有权访问的其他数据,每一个执行环境都存在一个关联的变量对象(VO),代码无法访问,内部解析器会使用它,如果环境为函数,则将函数的AO作为VO, ...
- [LeetCode] 457. Circular Array Loop 环形数组循环
You are given a circular array nums of positive and negative integers. If a number k at an index is ...