zoukankan      html  css  js  c++  java
  • HTML5的Web Workers

    该特性仅支持:FF3.5+、Opera 10.6+、Chrome 3+、Safari 4。

    image

    详情请参数(下面的参考链接中都有例子说明):

    https://developer.mozilla.org/En/Using_web_workers

    https://developer.mozilla.org/En/DOM/Worker

    http://www.whatwg.org/specs/web-workers/current-work/

    中文:WEB Workers提升WEB前端脚本JavaScript的处理性能

    这里以一个计算加法和乘法为例:

    1、创建一个worker

    2、worker使用postMessage方法,发送请求,在处理时再通过postMessage返回给消息给创建者,它的onmessage方法会捕获进行处理

    3、如果需要kill worker直接使用terminate方法

    最终运行的界面 :

    image

    完整html代码

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5__Web Workers(仅支持FF3.5+、Opera 10.6+、Chrome 3+、Safari 4)</title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="http://www.codediesel.com/demos/workers/view.css" />
    </head>

    <body id="main_body">

    <img id="top" src="http://www.codediesel.com/demos/workers/top.png" alt="">
    <div id="form_container">
    <h1><a>Untitled Form</a></h1>
    <form id="main" class="appnitro" method="post" action="">
    <div class="form_description">
    <h2 id="title"></h2>
    </div>
    <ul >
    <li id="li_2" >
    <label class="description" for="element_2">X </label>
    <div>
    <input id="x" name="x" class="element text medium" type="text" maxlength="255" value="3"/>
    </div>
    </li>
    <li id="li_3" >
    <label class="description" for="element_3">Y </label>
    <div>
    <input id="y" name="y" class="element text medium" type="text" maxlength="255" value="3"/>
    </div>
    </li>
    <li id="li_1" >
    <label class="description" for="element_1">Messages </label>
    <div>
    <textarea id="output" name="output" class="element textarea medium"></textarea>
    </div>
    </li>
    <li class="buttons">
    <input type="hidden" name="form_id" value="87137" />
    <input id="addButton" class="button_text" type="button" value="Add" />
    <input id="multButton" class="button_text" type="button" value="Multiply" />
    <input id="killButton" class="button_text" type="button" value="Stop Worker" />
    <input id="clearBtn" class="button_text" type="button" value="Clear" />
    </li>
    </ul>
    </form>
    <div id="footer"></div>
    </div>
    <img id="bottom" src="http://www.codediesel.com/demos/workers/bottom.png" alt="">

    <script type='text/javascript'>
       1:  
       2:  
       3: !(function() {
       4:     
       5:  
       6:     var getWebWorkerSupport = function() {
       7:         return (typeof(Worker) !== "undefined") ? true:false;
       8:     }
       9:  
      10:     var getElem = function(id) {
      11:         return typeof id === 'string' ? document.getElementById(id) : id;
      12:     }
      13:  
      14:     var worker,
      15:         isSupport = getWebWorkerSupport();
      16:  
      17:  
      18:     if (isSupport) {
      19:         
      20:         var createWorker = function() {
      21:             if (worker) {
      22:                 return ;
      23:             }
      24:  
      25:             worker = new Worker("worker.js");
      26:             worker.onmessage = function(evt) {
      27:                 getElem("output").value += evt.data + '\n';
      28:             }
      29:             worker.onerror = function(evt) {
      30:                 getElem("output").value += "\n在第["+ evt.lineno +"]行发生错误: " + evt.message;
      31:             }
      32:         }
      33:  
      34:         getElem("multButton").onclick = function() {
      35:             createWorker();
      36:  
      37:             var x = document.getElementById("x").value;
      38:             var y = parseFloat(document.getElementById("y").value);
      39:  
      40:             var str = "mult_" + x + "_" + y;
      41:             
      42:             worker.postMessage(str);
      43:         }
      44:         
      45:         getElem("addButton").onclick = function() {
      46:             createWorker();
      47:  
      48:             var x = document.getElementById("x").value;
      49:             var y = parseFloat(document.getElementById("y").value);
      50:  
      51:             var str = "add_" + x + "_" + y;
      52:             worker.postMessage(str);
      53:         }
      54:  
      55:         getElem("killButton").onclick = function() {
      56:             if (worker) {
      57:                 worker.terminate();
      58:                 worker = null;
      59:             }
      60:         }
      61:     } else {
      62:         getElem("multButton").disabled = getElem("addButton").disabled = getElem("killButton").disabled = true;
      63:     }
      64:  
      65:     getElem("title").innerHTML = "您当前使用的浏览器"+(isSupport ? "支持" : "<em class='error'>不支持</em>")+"Web Worker";
      66:  
      67:     getElem("clearBtn").onclick = function() {
      68:         getElem("output").value = "";
      69:     }
      70: })();
    </script>

    </body>
    </html>

    worker.js的代码:


    unction addNumbers(x,y) {
    return x + y;


    unction mulNumbers(x,y) {
    return x*y;


    his.onmessage = function (event) {
    var msg = event.data,
    arr = msg.split("_"),
    op = arr[0],
    x = (arr[1] || "")|0,
    y = (arr[2] || "")|0;

    switch(op) {
    case 'mult':
    postMessage( x + "*" + y + "=" + mulNumbers(x, y));
    break;
    case 'add':
    postMessage( x + "+" + y + "=" + addNumbers(x, y));
    break;
    default:
    postMessage("Wrong operation specified");
    }

    var i = 1;
    while (i < 1000*1000*1000) {
    if (i % 500000 === 0) {
    postMessage(i);
    }
    i++;
    }

    ;

    本章参考自:http://www.codediesel.com/demos/workers/     (有部分修改)

    点些直接下载本文示例代码>>

  • 相关阅读:
    bzoj2243: [SDOI2011]染色
    bzoj4538: [Hnoi2016]网络
    bzoj 1004
    数论小结2.
    数论小结1.
    Catalan Number
    uva 11645
    uva 01510
    redis cluster介绍
    搭建redis-sentinel(哨兵机制)集群
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2067570.html
Copyright © 2011-2022 走看看