HTML5的Web Workers

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

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

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方法

最终运行的界面 :

完整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/     (有部分修改)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

AS3初学者容易迷糊的几个问题

1.Sprite/MovieClip的Enter_Frame事件,不受addChild/removeChild影响 简单点讲:Sprite或MovieClip对...

2115
来自专栏文大师的新世界

7. 偷用Swiper简改

看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

1013
来自专栏QQ音乐技术团队的专栏

一个循环动画引起的内存泄露问题总结

本文主要记录项目中遇到的一个内存泄露问题:由于一个循环动画引起的内存泄露,并且这个问题也是偶现的,在后面的隐藏问题里会说明。

4142
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 ...

3128
来自专栏向治洪

MobX 在 React Native开发中的应用

MobX 是一款精准的状态管理工具库,如果你在 React 和 React Native 应用中使用过 Flux、Alt、Redux 和 Reflux,那毫不犹...

5048
来自专栏程序员互动联盟

【Windows编程】系列第六篇:创建Toolbar与Statusbar

上一篇我们学习了解了如何使用Windows GDI画图,该应用程序都是光光的静态窗口,我们使用Windows应用程序,但凡稍微复杂一点的程序都会有工具栏和状态栏...

4583
来自专栏python爬虫日记

python3下搜狗AI API实现

a、搜狗也发布了自己的人工智能 api,包括身份证ocr、名片ocr、文本翻译等API,初试感觉准确率一般般。

1793
来自专栏更流畅、简洁的软件开发方式

用接口实现事件的一种方法,只是玩玩。

  前一阵子,firelong说,应该用接口实现事件,而不应该用委托。我就希望他能给出一个用接口实现事件的方法,我是一直等呀,等到了现在也没有看到。   昨天又...

2348
来自专栏非著名程序员

基础篇章:关于 React Native 之 Navigator 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们来讲讲Navigator这个小家伙,...

1907
来自专栏pangguoming

c#以POST方式模拟提交表单

这是我一年前写的一个用C#模拟以POST方式提交表单的代码,现在记录在下面,以免忘记咯。那时候刚学C#~忽忽。。很生疏。。代码看上去也很幼稚 臃肿不堪 #reg...

3239

扫码关注云+社区

领取腾讯云代金券