什么是 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. python-上传文件的几种方式

    from requests_toolbelt import MultipartEncoder import requests # from_data上传文件,注意参数名propertyMessageX ...

  2. linux运维、架构之路-redis集群

    一.介绍            redis cluster 3.0之后的功能,至少需要3(Master)+3(Slave)才能建立集群,是无中心的分布式存储架构,可以在多个节点之间进行数据共享,解决了 ...

  3. requiredBackgroundModes

    申明需要后台运行的能力,类型为数组.目前支持以下项目: audio: 后台音乐播放如: { "pages": ["pages/index/index"], &q ...

  4. JDK，JRE与JVM浅析

    JAVA的两个特性: 1, 开源-指的是源代码免费 2,跨平台(可移植性好) 跨平台:是指跨操作系统 JVM(java virtual machine,java虚拟机) JVM就像是两国谈判时的使者充 ...

  5. 「HNOI2016」矿区

    https://loj.ac/problem/2052 题解 平面图转对偶图.. 首先我们转的话需要给所有的平面标号,然后找到每条边看看他们隔开了哪两个平面. 做法就是对每个点维护它的所有排好序的出边 ...

  6. [CSP-S模拟测试]:简单的序列（DP）

    题目描述 从前有个括号序列$s$,满足$|s|=m$.你需要统计括号序列对$(p,q)$的数量. 其中$(p,q)$满足$|p|+|s|+|q|=n$,且$p+s+q$是一个合法的括号序列. 输入格式 ...

  7. win10+VS2015+opencv3.4.0配置方法

    win10+VS2015+opencv3.4.0配置方法 操作环境: windows10 64位opencv 3.4.0:https://opencv.org/releases.html(选择open ...

  8. React Native商城项目实战12 - 首页头部内容

    1.HomeTopView为首页头部内容,HomeTopListView为HomeTopView子视图. 2.HomeTopView.js /** * 首页头部内容 */ import React, ...

  9. PriorityBlockingQueue 源码分析

    PriorityBlockingQueue PriorityBlockingQueue 能解决什么问题?什么时候使用 PriorityBlockingQueue? 1)PriorityBlocking ...

  10. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_08 Map集合_8_LinkedHashMap集合

    linked