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服务访问该页 ...
随机推荐
- 6389. 【NOIP2019模拟2019.10.26】小w学图论
题目描述 题解 之前做过一次 假设图建好了,设g[i]表示i->j(i<j)的个数 那么ans=∏(n-g[i]),因为连出去的必定会构成一个完全图,颜色互不相同 从n~1染色,点i的方案 ...
- 搭建nginx环境（参考腾讯云实验室）
使用 yum 安装 Nginx: yum install nginx -y 修改 /etc/nginx/conf.d/default.conf,去除对 IPv6 地址的监听,可参考下面的代码示例: s ...
- 上传文件报413 Request Entity Too Large错误解决办法
产生这种原因是因为服务器限制了上传大小 1.nginx服务器的解决办法 修改nginx.conf的值就可以解决了 将以下代码粘贴到nginx.conf内 client_max_body_size 20 ...
- IDEA集成Mybatis打印日志插件
MyBatis Log Plugin :把 mybatis 输出的sql日志还原成完整的sql语句. 如下图所示,点击Tools>MyBatis Log Plugin 然后运行程序后,就会看到对 ...
- oralce创建dblink
CREATE DATABASE LINK dblinkName CONNECT TO dbLoginName IDENTIFIED BY dbLoginPwd USING '(DESCRIPTION= ...
- NOIP2012 洛谷P1083 借教室
传送门 题意:有一些学(xian)生(quan)要借教室.在n天内,第i天学校有ri个教室.有m份订单,每份订单有三个数值dj,sj,tj,分别表示这个订单从第sj天开始到第tj天结束(包括端点),每 ...
- (转)VS2010结合水晶报表做条码标签打印功能
本文转载自:http://blog.sina.com.cn/s/blog_552ca1400100y6dd.html 先来个功能效果图: 大家都知道VS2005和VS2008软件本身是包含水晶报表插件 ...
- linux中的"空白字符"
[参考这个c语言中的空白字符文章] (http://blog.csdn.net/boyinnju/article/details/6877087) 所谓: linux中的"空白字符" ...
- python练习题--计算总分平均分操作excel
''' 有一个存着学生成绩的文件,里面存的是json串,json串读起来特别不直观,需要你写代码把它都写到excel中,并计算出总分和平均分,json格式如下 { "1":[&qu ...
- FineTuning机制的分析
FineTuning机制的分析 为什么用FineTuning 使用别人训练好的网络模型进行训练,前提是必须和别人用同一个网络,因为参数是根据网络而来的.当然最后一层是可以修改的,因为我们的数据可能并没 ...