HTML5中的Web Worker
什么是 Web Worker？
当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。
为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
示例：后台计数
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Web worker</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p>计数：<output id="result"></output></p>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">停止Worker</button>
</body>
<script>
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
w=new Worker("demo_worker.js");
}
w.onmessage=function(event){//监听worker后台脚本的postMessage方法
document.getElementById("result").innerHTML=event.data;
}
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker(){
if(w!=undefined){
w.terminate();
}
}
</script>
</html>
demo_woker.js
var i=0;
function timedCount(){
i=i+1;
postMessage(i);//使用postMeassage()方法传递给网页数据
setTimeout(() => {
timedCount();
}, 1000);
}
timedCount();
HTML5中的Web Worker的更多相关文章
- HTML5中的Web Worker技术
为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...
- 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 ...
- vue中使用web worker
众所周知,JavaScript是单线程的,一些复杂比较耗时的操作,会阻塞页面的渲染交互,引起页面卡顿,影响用户体验.web worker是html5的新特性之一,主要就是用来解决此类问题,为页面额外开 ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- 聊聊HTML5中的Web Notification桌面通知
有的时候我们会在桌面右下角看到这样的提示: 这种桌面提示是HTML5新增的 Web Push Notifications 技术. Web Notifications 技术使页面可以发出通知,通知将被显 ...
- HTML5中的Web Notification桌面通知(右下角提示)
html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...
- 简单了解HTML5中的Web Notification桌面通知
原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...
随机推荐
- 原来程序是这样从NandFlash拷贝并跳转到SDRAM的
重新看了一下FL2440的BootLoader,终于把程序是怎样从Nandflash拷贝并跳转到SDRAM的过程弄清楚了,在这边做一下笔记.先上张图: 1. 当S3C2440被配置成从Nand Fla ...
- Pandas中的qcut和cut
qcut与cut的主要区别: qcut:传入参数,要将数据分成多少组,即组的个数,具体的组距是由代码计算 cut:传入参数,是分组依据.具体见示例 1.qcut方法,参考链接:http://panda ...
- Qt中图元对象的多重集成
在继承自定义QGraphicsItem图元对象时,有时需要用到信号/槽机制,由于QGraphicsItem非QObject的子类 所以需要多重继承QObject,有一点需要特别注意:就是继承的顺序,一 ...
- es之java插入优化（批量插入）
插入文档操作的一种优化,因为每次插入单条文档,都会向es中发送请求.然后es执行在返回结果: 如果有大批量的文档数据需要插入,这个时候单挑插入操作显然是不合理的: 之前学习的命令行批量执行方式: PO ...
- CruiseControl.NET配置
CruiseControl.NET简介 CruiseControl.NET是.net平台下,一个开源的自动化持续集成工具. 它是一个程序套件,但其核心是一个叫做CruiseControl.NET Se ...
- MVC3: 页面向服务传参（view->controller，get,post）
HttpGet HttpPost GetPost 总结比较 ajax get post 1)HttpGet Get是http请求的默认形式.拿MVC官方教程Movie项目举例如下. 编辑页面 Vie ...
- SpringBoot 切换国际化
git:https://github.com/xiaozhuanfeng/demoProj 代码结构: application.properties: spring.messages.basename ...
- 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第1节 Scanner类_2-概述及其API文档
键盘输入的类 Scanner首字母是大写的S.说明这是一个类,并不是关键字.关键字都是小写的.这个类是jdk中已经提供好的 1.看包 2.构造方法. 3.方法 只要不是引用类型,就是基本类型
- 《图解设计模式》读书笔记8-1 Observer模式
目录 示例程序 程序类图 程序 角色和类图 角色 类图 思路拓展 可复用性 Observer的顺序 MVC模式 Observer模式 Observer模式即观察者模式,该模式中,被观察者的状态发生变化 ...
- 测开之路一百零二：jquery元素操作
jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...