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实现第九届蓝桥杯第几天
第几天 题目描述 2000年的1月1日,是那一年的第1天. 那么,2000年的5月4日,是那一年的第几天? 注意:需要提交的是一个整数,不要填写任何多余内容. import java.util.Cal ...
- 一个Redis查询案例
1.远程登陆进服务器 使用ssh连接至Linux服务器中 2.接入redis集群 redis-cli -h 10.1.8.12 -p 29000 3.执行查询命令 根据userid查询用户的最近在线时 ...
- Spring zuul 快速入门实践 --看zuul如何进行服务转发
zuul 作为springCloud 的全家桶组件之一,有着不可或缺的分量.它作为一个普通java API网关,自有网关的好处: 避免将内部信息暴露给外部: 统一服务端应用入口: 为微服务添加额外的安 ...
- x memory pool c语言 内存池
#ifndef X_MEMORY_H #define X_MEMORY_H #include <stdlib.h> #include <stdio.h> #include &l ...
- epic无法登陆怎么办【百分百解决】
epic无法登陆怎么办(感谢吾爱破解吧www.52pjb.net)站长提供的文章教程以及解决思路,谢谢大佬,更详细的解决办法可以参考下他的网站解决的方法实例! epic登陆不上去怎么办?随着GTA5免 ...
- beta版 tomcat 应用监控指标
指标是集合网络搜索得到的汇总并且现在在使用的,现在记录一下 数据平台:Prometheus v2.18.1 展示平台:Grafana 指标来源: 日志类的是mtail 其他都是通过jmx_export ...
- @codefoces - 566E@ Restoring Map
目录 @description@ @solution@ @accepted code@ @details@ @description@ 对于一棵 n 个点的树,我们称两个点是相邻的当且仅当两个点的距离 ...
- Docker学习 ，超全文档！
我们的口号是:再小的帆也能远航,人生不设限!! 一.学习规划: Docker概述 Docker安装 Docker命令 Docker镜像 镜像命令 容器命令 操作命令 容器数据卷 Doc ...
- 全网最完整的Redis入门指导
前言 本文提供全网最完整的Redis入门指导教程,下面我们从下载Redis安装包开始,一步一步的学习使用. 下载Redis 官网提供的Redis安装包是服务于Linux的,而我们需要在Window下使 ...
- [每日一题2020.06.12]P3375 【模板】KMP字符串匹配
题目链接 关于kmp : https://www.cnblogs.com/roccoshi/p/13096988.html 关于kmp, 想了很久, 我觉得不应该放在这里写, 另开一贴记录一下. #i ...