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(桌面 ...
随机推荐
- MES实施可能会遇到的问题,这里都帮你解决
MES系统选型关键技术的发展已日趋成熟,开发MES系统技术并不是问题,困难的是如何确定系统的功能.规格,如何成功地使用MES系统,以充分发挥其作用,下面给大家分析这两大块内容. 实施MES系统选型的困 ...
- 解决服务器kipmid导致的CPU核心负载问题
临时解决 echo 100 > /sys/module/ipmi_si/parameters/kipmid_max_busy_us 永久生效配置/etc/modprobe.d/ipmi.conf ...
- 12306 抢票项目霸榜 GitHub,标星即将破万
十一将至,你买到回家的火车票了吗?如果没有,你可以试着打开 GitHub,在搜索栏键入 12306 的关键词,我相信你会发现一个新大陆.没错,这里有 1572 个抢票项目.它们大多用 Python.J ...
- sqlserver一次性修改多条
修改客户表 编号为 0101007002,0101007003的楼栋号 007-1-102,007-1-201 UPDATE gas_customerSET building= CASEWHEN g ...
- fastjson 将json字符串转化成List<Map<String, Object>>
亲测可行,如下: JSON.parseObject(jsonstr, new TypeReference<List<Map<String, Object>>>() ...
- Bootstrap。
bootstrap: 1.概念:前端开发框架. 2.快速入门:下载bootstrap.导入文件. 3.响应式布局: * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成1 ...
- mysqldump 备份
1. 直接备份某个库或表 ,或多个库多个表mysqldump -uroot -pPassword [database name] > [dump file]mysqldump -uroot - ...
- Mybatis如何插入空字段
出现异常:SQLException : 无效的类型: 1111 使用Mybatis插入一条记录,某字段设为null,出错 尝试将空的mgr属性插入到数据库,解决办法: 添加setting属性jdbcT ...
- 破解CentOS7的root及加密grub修复实战
破解CentOS7的root及加密grub修复实战 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.破解CentOS7的root口令方案1 1>.启动时任意键暂停启动 2& ...
- 论文笔记系列-Auto-DeepLab:Hierarchical Neural Architecture Search for Semantic Image Segmentation
Pytorch实现代码:https://github.com/MenghaoGuo/AutoDeeplab 创新点 cell-level and network-level search 以往的NAS ...