zoukankan      html  css  js  c++  java
  • HTML5中的Web Worker技术

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

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

      示例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <body>
    10     <div id="num"></div>
    11     <button onclick="startWork()">开始</button>
    12     <button onclick="stopWork()">停止</button>
    13     <script>
    14         var work;
    15 
    16         function startWork() {
    17             if(typeof(Worker)!=undefined) {
    18                 if(work==undefined) {
    19                     work = new Worker("script/01.js");
    20                     work.onmessage = function(event) {
    21                         document.getElementById("num").innerHTML = event.data;
    22                     }
    23                 }
    24             }
    25         }
    26 
    27         function stopWork() {
    28             if(work!=undefined) {
    29                 work.terminate();
    30             }
    31         }
    32     </script>
    33 </body>
    34 </html>

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

     1 var i=0;
     2 
     3 function timeCount() {
     4     i=i+1;
     5     console.log(i);
     6     postMessage(i);
     7     setTimeout("timeCount()",1000);
     8 }
     9 
    10 timeCount();

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

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

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

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

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

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

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

  • 相关阅读:
    Asp.Net中virtual、override理解
    SQL 知道字段名 全表搜索此字段属于哪个表
    C#中(int)a和Convert.ToInt32(a)的区别
    sql 查询表共多少列
    理解字节和字符
    C# IIS7.0+ Web.Config 配置Session过期时间
    Java版的扫雷游戏源码
    Activiti6.0教程 28张表解析 (三)
    Activiti6.0教程 Service用途剖析 (二)
    Activiti6.0教程 Eclipse安装Activiti Diagram插件(一)
  • 原文地址:https://www.cnblogs.com/modou/p/10933469.html
Copyright © 2011-2022 走看看