什么是 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. 面试题常考&必考之--js中的难点!!!原型链，原型（__proto__），原型对象（prototype）结合例子更易懂

    1>首先,我们先将函数对象认识清楚: 补充snow的另一种写法: var snow =function(){}; 2>其次:就是原型对象 每当我们定义一个函数对象的时候,这个对象中就会包含 ...

  2. R 大小写转换

    >x = "CAGTTTCTTGAGTCTGATTAATTCAGGTTTCGGGGT"#定义字符串变量x>tolower(x)[1] "cagtttcttga ...

  3. JSP 自动刷新

    JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时功能,您就不得不规律性地刷新页面.JSP提供了一种机制来使这种工作变得简单, ...

  4. 13 November

    [HEOI2015] 定价 BZOJ 4027: 在市场上有很多商品的定价类似于 999 元.4999 元.8999 元这样.它们和 1000 元.5000 元和 9000 元并没有什么本质区别,但是 ...

  5. fastjson学习笔记

    先来说说什么是 JSON 吧. JSON:JavaScript对象表示法(JavaScript Object Notation).JSON 是存储和交换文本信息的语法.JSON 语法是 JavaScr ...

  6. 后端PHP框架laravel学习踩的各种坑

    安装完laravel的ventor目录后出现“Whoops, looks like something went wrong.”这样的错误信息 打开config/app.php,打开debug为tru ...

  7. 基于modelforms组件实现注册功能

    数据库部分 使用的是auth_user表,添加r_pwd字段后表名变为UserInfo from django.db import models from django.contrib.auth.mo ...

  8. Eclipse设置控制台日志输出位置

    1.选择服务器配置 2.设置输出文件路径

  9. python库文件文档的查看

    python库文件文档的查看 第一步:cmd窗口输入:python -m pydoc -p 4567,后台运行 第二步:浏览器中打开http://localhost:4567/

  10. 【SD系列】SAP SD模块-公司间销售简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-公司间销售简介   ...