为了让后台程序更好的执行,在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技术的更多相关文章

  1. HTML5中的Web Worker

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...

  2. HTML5中的Web Workers

    https://www.cnblogs.com/yanan-boke/p/6954390.html https://segmentfault.com/a/1190000014938305 HTML5 ...

  3. html5中的Web Storage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  4. H5中的web worker示例demo分析

    web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web w ...

  5. 聊聊HTML5中的Web Notification桌面通知

    有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...

  6. vue中使用web worker

    众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...

  7. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  8. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

  9. HTML5中的Web Notification桌面通知(右下角提示)

    html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...

随机推荐

  1. Android Scroller解析

    作用 这个类封装了滚动操作,如帮我们处理手指抬起来时候的滑动操作.与ViewGroup的scrollTo(),scrollBy()的生硬式移动,Scroller提供了一个更加柔和的移动效果.Scrol ...

  2. 记录一次Oracle创建DBLink踩到小坑

    1.查询当前是否具有创建DBlink的权限: select * from user_sys_privs where privilege like upper('%DATABASE LINK%'); 如 ...

  3. Django之ORM多对多表创建方式,AJAX异步提交,分页器组件等

    MTV与MVC MTV模型: ​ M:模型层(models.py),负责业务对象和数据库关系的映射(ORM) ​ T:模板层(Template),负责如何把页面展示给用户(HTML) ​ V:视图层( ...

  4. 【Spring Cloud】Spring Cloud之整合Spring Cloud Bus以及最佳实践

    一.整合步骤 1)加入Maven坐标 <!-- actuator监控模块 --> <dependency> <groupId>org.springframework ...

  5. 【Spring】Spring注解之@EnableConfigurationProperties

    一.@EnableConfigurationProperties注解的作用 使能够对@ConfigurationProperties注解的bean的支持.   简单理解就是:可以在我们的配置类上不加@ ...

  6. U盘启动安装CentOS 7出现 -dracut initqueue timeout

    使用U盘启动安装CentOS7出现 Warning: dracut-initqueue timeout - starting timeout scripts 的解决办法 原因: ISO下,在/isol ...

  7. 卓越Code团队SCRUM呕心沥血实践总结

    卓越Code团队SCRUM呕心沥血实践总结 序言 所属课程 https://edu.cnblogs.com/campus/xnsy/2019autumnsystemanalysisanddesign ...

  8. ES6 手册

    不用就忘, 把阮大大的地址列在这儿: http://es6.ruanyifeng.com/#README

  9. 20180516模拟赛T1——queen

    题解 这题显然是\(总方案数不可行方案数总方案数-不可行方案数\)(直接算是无规则的).总方案数是\(n^2m^2\),于是问题就在于不可行的方案数. 若queen落在一个点上,则横竖是十分好求的(\ ...

  10. JMeter基础【第六篇】JMeter5.1事务、检查点、集合点、思考时间、其余设置等

    JMeter5.1事务.检查点.集合点.思考时间.其余设置等