什么是 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. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  2. react native 之 redux 使用套路

    redux是什么?他是一个state容器 redux的运作方式是怎样的? 接入方式: 1. npm install 下列内容: npm install --save redux npm install ...

  3. sh_03_注释

    sh_03_注释 # 这是第一个注释 print("hello hello") """ 这是一个多行注释 .... .... .... 注释结束了 & ...

  4. Bellman-ford算法与SPFA算法思想详解及判负权环（负权回路）

    我们先看一下负权环为什么这么特殊:在一个图中,只要一个多边结构不是负权环,那么重复经过此结构时就会导致代价不断增大.在多边结构中唯有负权环会导致重复经过时代价不断减小,故在一些最短路径算法中可能会凭借 ...

  5. BZOJ 4939: [Ynoi2016]掉进兔子洞(莫队+bitset)

    传送门 解题思路 刚开始想到了莫队+\(bitset\)去维护信息,结果发现空间不太够..试了各种奇技淫巧都\(MLE\),最后\(\%\)了发题解发现似乎可以分段做..这道题做法具体来说就是开\(3 ...

  6. 用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...

  7. yum命令查询详解

    一.列举包文件列出资源库中所有可以安装或更新的rpm包# yum list列出资源库中特定的可以安装或更新以及已经安装的rpm包# yum list perl           //列出名为perl ...

  8. PowerDesigner相关总结

    1.PowerDesigner 工具生成数据库Report指导 摘自:https://www.cnblogs.com/zycblog/archive/2010/05/11/1732918.html 1 ...

  9. 网络流小记(EK&dinic&当前弧优化&费用流)

    欢 迎 来 到 网 络 瘤 的 世 界 什么是网络流? 现在我们有一座水库,周围有n个村庄,每个村庄都需要水,所以会修水管(每个水管都有一定的容量,流过的水量不能超过容量).最终水一定会流向唯一一个废 ...

  10. Catalan numbers

    w https://en.wikipedia.org/wiki/Catalan_number 路径规划