HTML5中的Web Worker技术
为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其他脚本，从而不会影响页面的性能。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="num"></div>
<button onclick="startWork()">开始</button>
<button onclick="stopWork()">停止</button>
<script>
var work; function startWork() {
if(typeof(Worker)!=undefined) {
if(work==undefined) {
work = new Worker("script/01.js");
work.onmessage = function(event) {
document.getElementById("num").innerHTML = event.data;
}
}
}
} function stopWork() {
if(work!=undefined) {
work.terminate();
}
}
</script>
</body>
</html>
上面的代码引入了一个脚本文script/01.js，代码如下：
var i=0;
function timeCount() {
i=i+1;
console.log(i);
postMessage(i);
setTimeout("timeCount()",1000);
}
timeCount();
这个示例实现了一个计数器的功能，点击开始按钮，开始计数，点击停止按钮，停止计数。
下面我来解释一下代码的流程：
网页第17行，检测浏览器是否支持Web Worker技术，主流的浏览器谷歌、火狐都支持，IE只有IE10，IE11，IE Edge支持，低版本的IE不支持
网页第19行，引入js脚本，创建一个Worker对象的实例，并执行js脚本
js脚本第6行，在执行脚本的时候，使用postMessage方法，传递给网页数据
网页第20行，在脚本使用postMessage方法传递数据后，onmessage回调函数会接收传递过来的数据，对该数据进行处理
网页第19行，如果需要停止Worker，使用work.terminate();可以停止正在执行的脚本
HTML5中的Web Worker技术的更多相关文章
- HTML5中的Web Worker
什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...
- HTML5中的Web Workers
https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...
- html5中的Web Storage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...
- H5中的web worker示例demo分析
web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web w ...
- 聊聊HTML5中的Web Notification桌面通知
有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...
- vue中使用web worker
众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- HTML5中的Web Notification桌面通知(右下角提示)
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...
随机推荐
- 【 Android 】ViewPager + TabLayout + Fragment 数据初始化问题
在 ViewPager 和 Fragment 配合使用的时候,ViewPager 会使用预加载机制,使得我们在没有切换到到对应页面时,就已经加载好了,这是个非常不好的用户体验. 所以本示例项目就诞生了 ...
- Golang: 接收命令行输入
上次我们介绍了收集命令行参数的几种方式,感觉还是不过瘾,今天再来介绍一下如何从命令行接收用户输入. 我们这里设计一个小需求,借助程序从命令行收集用户的逐行输入,以 bye 为结束信号,然后在输入结束后 ...
- jmeter使用小结
写这篇短文主要想详细介绍一下jmeter中取样器.逻辑控制器.前置处理器.后置处理器.定时器.配置元件等,可能看起来比较繁杂,其实里面很多操作是类似的,一篇总结和记录的博客: jmeter官方用户手册 ...
- Qt编译报错：The kit Desktop Qt...has configuration issues which might be the root cause for this problem.
报错:Cannot find file: E:\实验室\20180409_Qt跑马灯\QtTest\QtTest.pro. 17:03:11: 进程"D:\Qt\Qt5.8.0\5.8\ms ...
- Window下安装Nignx并且使用文档
1.下载nignx http://nginx.org/en/download.html 下载稳定版本,以nginx/Windows-1.12.2为例,直接下载 nginx-1.12.2 ...
- 男上加男 BETA冲刺博客汇总
项目BETA冲刺(团队) --总结 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft https://www.cnblogs ...
- 在 Less 中使用 calc() 的坑：height: calc(~"50% - 21px");
注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...
- Gym - 101848D：XOR（线性基 欧拉降幂）
题意:给定N,K,P,表示现在有一个集合{0, 1, ..., 2n - 1},问有多少个非空子集的异或和为K: 答案%P.(1 ≤ n ≤ 1018, 0 ≤ k ≤ min(2n - 1, 101 ...
- Linux正则表达式与通配符
在linux中,有通配符和正则表达式,这是两个不同的概念通配符:它是由shell解析,并且一般用于匹配文件名.如:ls正则表达式:是一个字符匹配标准,可以匹配文本中的内容一些命令工具按此标准实现字符匹 ...
- Codechef July Challenge 2019 Hit the Coconuts
假设现在有一堆数,我想要保证能取出一个,至少需要敲 (数的个数)*(这些数里的最小值)那么把这些数从大到小排序,$dp[i][j]$ 表示前 $i$ 个里面保证能取出 $j$ 个需要敲的次数.$dp[ ...