什么是 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. import Vue form 'vue' 解释

  2. css语法以及css选择器

    CSS语法 CSS的标准语法主要由两方面构成一是 选择器.二是 声明框. 一.选择器      通过选择器可以选定页面指定的元素,并将声明块中的样式应用在选择器选中的元素中去. 二.声明框       ...

  3. 软件工程 in MSRA 黄金点游戏-第一次结对编程

    简单介绍 第一次结对编程,邹欣老师选择了一个博弈游戏作为题目.博弈论是一门非常有趣的学科.之前竞赛时接触的博弈论大部分都是存在均衡点/必胜策略的.像这次这种多人参与,没有完美策略,你方唱罢我登台的游戏 ...

  4. 转载--C 的回归

    转载自http://blog.codingnow.com/2007/09/c_vs_cplusplus.html 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 goo ...

  5. TCP服务器并发编程构架：完成端口IOCP模式

    windows下socket网络编程模式:IOCP 完成端口 1)IOCP异步事件的获取放到操作系统的网络驱动层来处理,实际上反而是降低了编程难度, 2)同时对于多线程的并发调度,也放到操作系统级别来 ...

  6. Educational Codeforces Round 16 E. Generate a String （DP）

    Generate a String 题目链接: http://codeforces.com/contest/710/problem/E Description zscoder wants to gen ...

  7. fedora23安装php,mysql

    httpd: 他的服务器根: ServerRoot, 是在/etc/httpd. 因为httpd所有的配置文件, 运行文件等都在这里.所以这是他的根. httpd的配置文件: httpd.conf恰好 ...

  8. java操作JSON字符串转换成对象的时候如何可以不建立实体类也能获取数据

    引入依赖 <dependency>    <groupId>com.alibaba</groupId>    <artifactId>fastjson& ...

  9. FOUC（Flash Of Unstyled Content）文档样式闪烁

    今天看面试题看到了这个新名词..我以前是没有发现过这种状况,应该是我一直都是将加载 CSS 的 link 标签写到 head 里的缘故吧. 什么是文档样式闪烁(Flash Of Unstyled Co ...

  10. kafka 生产者发送消息

    KafkaProducer 创建一个 KafkaThread 来运行 Sender.run 方法. 1. 发送消息的入口在 KafkaProducer#doSend 中,但其实是把消息加入到 batc ...