为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。

　　Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其他脚本，从而不会影响页面的性能。

　　示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <div id="num"></div>

     <button onclick="startWork()">开始</button>

     <button onclick="stopWork()">停止</button>

     <script>

         var work;

         function startWork() {

             if(typeof(Worker)!=undefined) {

                 if(work==undefined) {

                     work = new Worker("script/01.js");

                     work.onmessage = function(event) {

                         document.getElementById("num").innerHTML = event.data;

                     }

                 }

             }

         }

         function stopWork() {

             if(work!=undefined) {

                 work.terminate();

             }

         }

     </script>

 </body>

 </html>

上面的代码引入了一个脚本文script/01.js，代码如下：

 var i=0;

 function timeCount() {

     i=i+1;

     console.log(i);

     postMessage(i);

     setTimeout("timeCount()",1000);

 }

 timeCount();

这个示例实现了一个计数器的功能，点击开始按钮，开始计数，点击停止按钮，停止计数。

下面我来解释一下代码的流程：

网页第17行，检测浏览器是否支持Web Worker技术，主流的浏览器谷歌、火狐都支持，IE只有IE10，IE11，IE Edge支持，低版本的IE不支持

网页第19行，引入js脚本，创建一个Worker对象的实例，并执行js脚本

js脚本第6行，在执行脚本的时候，使用postMessage方法，传递给网页数据

网页第20行，在脚本使用postMessage方法传递数据后，onmessage回调函数会接收传递过来的数据，对该数据进行处理

网页第19行，如果需要停止Worker，使用work.terminate();可以停止正在执行的脚本

HTML5中的Web Worker技术的更多相关文章

  1. HTML5中的Web Worker

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成. Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您 ...

  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. 聊聊HTML5中的Web Notification桌面通知

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

  6. vue中使用web worker

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

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

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

  8. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

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

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

随机推荐

  1. Bootstrap。

    bootstrap: 1.概念:前端开发框架. 2.快速入门:下载bootstrap.导入文件. 3.响应式布局: * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成1 ...

  2. OSPF 高级配置

    这是一个综合的实验,包含了静态路由.默认路由.RIP.OSPF四种路由.通过配置,最终实现全网互通. 实验拓扑 如图所示连接,地址规划如下: 名称 接口 IP地址 R1 f0/0 192.168.10 ...

  3. Git回滚代码

    回滚命令: 1.回退到上个版本 $ git reset --hard HEAD^ 2.回退到前2次提交之前,以此类推,回退到n次提交之前 $ git reset --hard HEAD~2 3.退到/ ...

  4. Python装饰器与闭包

    闭包是Python装饰器的基础.要理解闭包,先要了解Python中的变量作用域规则. 变量作用域规则 首先,在函数中是能访问全局变量的: >>> a = 'global var' & ...

  5. linux虚拟机网络配置

    环境:虚拟机-最小化安装  centos7   主机:win10 参考配置文件: TYPE=EthernetPROXY_METHOD=noneBROWSER_ONLY=noBOOTPROTO=stat ...

  6. 内核中dump_stack的实现原理（1） —— 栈回溯

    环境 Aarch64 Qemu aarch64-linux-gnu-gcc linux-4.14   概述     栈回溯的目的是将函数的调用栈打印出来,对于分析函数调用和debug系统异常会很有帮助 ...

  7. linux定时任务crontab怎样执行root命令

    在/var/spool/cron/文件夹下放置了所有定时任务文件, 1.运行crontab -u $用户名 -e会显示$用户的所有定时任务: 2.运行sudo crontab -e会显示root用户所 ...

  8. P2220 [HAOI2012]容易题[小学数学]

    题目描述 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值,我们定 ...

  9. MySQL 中的默认数据库介绍

    MySQL 中的默认数据库介绍:https://dataedo.com/kb/databases/mysql/default-databases-schemas 默认数据库 官方文档 informat ...

  10. 2019牛客暑期多校训练营（第八场）A：All-one Matrices（广告牌问题 单调队列）

    题意:给出N*M的01矩阵,求矩阵个数,满足矩阵内全是‘1’,,而且被至少一个’0‘围住.(假设边界外是‘0’.(N,M<3000) 思路:这类问题,一般解决就是两个方向: A:压缩一维,即枚举 ...