什么是 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的更多相关文章

  1. HTML5中的Web Worker技术

    为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...

  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. vue中使用web worker

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

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

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

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

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

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

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

  9. 简单了解HTML5中的Web Notification桌面通知

    原文:http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/ 需要注意的是,消息通知只有通过Web服务访问该页 ...

随机推荐

  1. Xcode 代码注释

    /** * 生成二维码 * * @param data 二维码数据 * @param size 二维码大小 * @param color 二维码颜色 * @param backgroundColor ...

  2. Ajax中浏览器的缓存问题解决方法

    我们在做项目中,一般提交请求都会通过ajax来提交,但是测试的时候发现,每次提交后得到的数据都是一样的,调试可以排除后台代码的问题,所以问题肯定是出在前台 每次清除缓存后,就会得到一个新的数据,所以归 ...

  3. Java——package与import

    [package]   <1>为了解决类的命名冲突问题,Java引入包(package)机制,提供类的多重类命名空间. <2>package作为源文件的第一条语句(缺省时指定为 ...

  4. SQL ORDER BY 两个列

    ORDER BY  后可加2个字段,用英文逗号隔开. f1用升序, f2降序,sql该这样写 ORDER BY  f1, f2  DESC 也可以这样写,更清楚: ORDER BY  f1 ASC, ...

  5. php versionscan YAF

    https://github.com/psecio/versionscan   Yaf 的特点: 用C语言开发的PHP框架, 相比原生的PHP, 几乎不会带来额外的性能开销. 所有的框架类, 不需要编 ...

  6. 图解SQLSERVER联合查询和连接查询的区别

      相信很多人都会用SQLSERVER联合查询和连接查询,但是用起来不一定都得心应手,对于其中的原理可能就模糊不清了,要想很牢固地掌握和运用SQL联合查询和连接查询机制,必须对其根本原理有很清晰认识, ...

  7. clojure 语法

    Clojure 是一种运行在 Java 平台上的 LISP 方言,LISP 是一种以表达性和功能强大著称的编程语言. ; 分号作为注释的开始 ; clojure 用括号把元素括起来,元素之间用空格隔开 ...

  8. 7月清北学（zao）堂系列

    7.13:模拟,贪心(贪心题大赏),考试 7.14:分治,分块,搜索(大法师大法好),数论 7.15:数据结构(树状数组,线段树,),ST表,树上倍增求LCA 7.16:图论题大赏(分层建图神马的), ...

  9. 设置bios加快系统的启动

    设置bios加快系统的启动 bois的设置错误, 还会引起系统的工作不正常 bios设置正确合理, 关系到系统的高效运行: 一般, 应该将bios中, 系统的各个cache 缓存开启,如cpu缓存, ...

  10. 在阿里云centOS7上部署Redis 5.0.5主从 + 哨兵模式

    一.在两台服务器上分别安装.配置Redis 5.0.5 ,为一主一从 安装Redis关键命令: 将安装包上传至:/home 目录下解 压:.tar.gz 安装依赖:yum install gcc 安装 ...