HTML5（八）Web Workers
HTML 5 Web Workers
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
想了解更多可以学习JavaScript同步异步的运行机制。
检测 Web Worker 支持
在创建 web worker 之前，请检测用户的浏览器是否支持它：
if (typeof (Worker) !== "undefined") {
console.log('支持Web worker 功能')
}
else {
console.log('Sorry')
}
创建 web worker 文件
现在，让我们在一个外部 JavaScript 中创建我们的 web worker。
在这里，我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：
demo_workers.js源码：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
web worker 通常用于更耗费 CPU 资源的任务。
Web Worker 实例代码
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<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 = "Sorry";
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
</html>
效果截图
遇到问题
谷歌和火狐浏览器出现
谷歌抛出异常cannot be accessed from origin 'null'. 无法从原点“null”访问
查找了一些资料原因大概就是谷歌浏览器安全机制导致的，不允许在本地直接运行，它会当作跨域访问了。
换IE浏览器就可以。
Web Workers 和 DOM
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
- window 对象
- document 对象
- parent 对象
HTML5（八）Web Workers的更多相关文章
- 【HTML5】Web Workers
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...
- Html5之web workers多线程
Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(t ...
- html5 Web Workers
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- HTML5学习(十)---Web Workers
参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...
- html5 Web Workers.RP
虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
- HTML5: HTML5 Web Workers
ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...
- HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
- HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...
随机推荐
- Java实现第八届蓝桥杯日期问题
日期问题 题目描述 小明正在整理一批历史文献.这些历史文献中出现了很多日期.小明知道这些日期都在1960年1月1日至2059年12月31日.令小明头疼的是,这些日期采用的格式非常不统一,有采用年/月/ ...
- 总结梳理:webpack中如何使用vue
1. 安装vue的包 cnpm i vue -S 2. 由于在webpack中,推荐使用 .vue这个组件模板文件定义的组件,所以,需要安装, 能解析这个文件的loader: cnpm i vu ...
- 深入理解JVM（③）判断对象是否还健在？
前言 因为Java对象主要存放在Java堆里,所以垃圾收集器(Garbage Collection)在对Java堆进行回收前,第一件事情就是要确定这些对象之中哪些还"存活"着,哪些 ...
- SmokePing 快速搭建
SmokePing介绍 smokeping是来监控IDC机房网络质量情况,可以从监控图上的延时与丢包情况分辨出机房的网络是否稳定,是否为多线,是否为BGP机房以及到各城市的三个运行商网络各是什么情况. ...
- 源码分析（2）-LinkedHashMap（JDK1.8）
1.概述 LinkedHashMap继承自HashMap:在HashMap基础上,通过维护一条双向链表,解决了HashMap键值对遍历顺序和插入顺序一致的问题. 想了解LinkedHashMap源码, ...
- NetAnalyzer笔记 之 十四 NetAnalyzer 6.0 的使用方法 -- 3.协议分析与统计
数据分析 完成了数据的抓取,那么接下来就是NetAnalyzer的第二个重点部分了,协议分析作为整个软件的核心之一,在最新的NetAnalyzer中已经得到了巨大的提升.NetAnalyzer中协议分 ...
- Netty 源码解析: Netty 的 ChannelPipeline
ChannelPipeline和Inbound.Outbound 我想很多读者应该或多或少都有 Netty 中 pipeline 的概念.前面我们说了,使用 Netty 的时候,我们通 ...
- java第三阶段作业总结
Java第三阶段总结 前言 到这里,Java课程学习进入了尾声,在这学习过程中,我学习到很多,也发现了自己的很多不足,这篇博客主要针对的是Java整门课程学习的总结. 课程收获 对整门课程的学习,我有 ...
- 4.vue class 绑定- model基础应用
//代码可以复制自行体验 <template> <div id="app" @click.stop="test('你点击了我big- ...
- CentOS7——搭建LNMP环境(WordPress案例)
CentOS7--搭建LNMP环境(WordPress案例) LNMP组成介绍 LNMP(Linux-Nginx-MySQL-PHP)网站架构是目前国际流行的Web框架,该框架包括:Linux操作系统 ...