织梦CMS - 轻松建站从此开始!

文档之家-IT技术文档共享平台

HTML5 – Web Workers

时间:2010-12-03 06:09来源:docfans.net 作者:admin 点击:
HTML5 – Web Workers

HTML5带来了许多的改变,除了标记语意上的增强之外,最令人震撼的莫过于它所附属的Javascript APIs。而 Web Workers 是 HTML5 提供的一个多线程(Multi-Thread)的解决方案,让我们可以把需要大量运算的程序交由Web Workers去做背景执行,如此的好处就是其他的工作仍可以顺利进行。

Web Workes 目前支持的浏览器有:Firefox 3.5+ / Safari 4.0+ / Chrome 5.0+

HTML5 的不同

标记的不同

HTML5在标记上有着相当大的变化,其中最为明显的即是语意上的标签,在HTML5中,结构化网页的语意更加清晰了,除了移除许多不必要的标记之 外也增加了许多标记及有用的属性,本文只简述范例中会用到的部份。

若想知道自己编写的HTML5是否有错误可以利用HTML5 validator来验证。

DOCTYPE 变简洁了

现在DOCTYPE只需简短的这样写:

标签不一定要闭合

在XHTML里标签必须要闭合,例如:

而在HTML5中,以下的写法也是正确的,而这也是比较建议的写法:

同样的方法也适用于meta,而且在指定content-type时,也只需要指定charset而不必定义文件类型text/html,例如:

Web Workers基本概念

在使用Web Workers时,我们必须建立一个Worker实体,并传入要被呼叫的Javascript档案所在URL,而我们必须把Worker要跑的程序写在这 个档案中,例如:

var worker = new Worker("worker.js");

在worker.js中我们必须绑定onmessage来执行我们想要执行的动作,在这里我们可以使用postMessage()来触发 Worker.onmessage事件,例如:

onmessage = function (evt) { for (var i=0; i<100000000; i++) { //执行大量循环 postMessage(i); // 触 发 Worker.onmessage() 并传入 i }; }; 

Worker.onmessage(event) 事件

当在被呼叫的javascript里呼叫postMessage()时,将会触发这个事件,在这个事件中我们可以透过event.data来取得传 入资料。

worker.onmessage = function (e){ // 由于在 worker.js 中使用 了 postMessage() 并传入 i 值 // 因此在这里可以使用 event.data 来取得 i 值,并做出相关处理 // 例如: console.log(e.data); } 

Worker.onerror(event) 事件

当呼叫失败时,将会触发此事件,在这个事件中我们可以透过event来取得事件相关信息。

worker.onerror = function(e){ alert("于第["+ e.lineno +"]行发生错误 : " + e.message); //显示错误信息 } 

Worker.terminate()

用以停止Worker的执行的成员函数。

因此Web Worker简单的操作流程图如下:

搭配jQuery的简单Web Worker范例

点我观看Web Workers Demo
worker.html

  開始 回文章 

worker.css

#worker-list { list-style-type: none; width: 400px; } #worker-list li { background-color: #FFE; margin: 3px; padding: 3px; border: 1px solid #C6BC9F; font-size: 16px; position: relative; } #worker-list .close { position: absolute; background-color: #FFF; display: block; height: 18px; width: 18px; border: 1px solid #CCC; text-align: center; vertical-align: middle; font-size: 12px; cursor:pointer; font-family: Arial, Helvetica, sans-serif; right: 3px; top: 3px; } 

worker.js

onmessage = function (e) { for (var i=0; i<e.data; i++) { //触发 worker.onmessage 传入 i if(0 === i % 10 ) postMessage(i); }; }; init.js $(function(){ function createWorker (msgObj) { // 建立 worker var worker = new Worker("worker.js"); worker.onmessage = function (e){ msgObj.html(e.data); // 更 新資訊 (e.data可取得觸發傳入值) } worker.onerror = function(e){ alert("於第["+ e.lineno +"]行發生錯誤 : " + e.message); //顯示錯誤訊息 } return worker; } $("#startWorker").click(function(){ for(var i=0;i<5;i++){ addworker(); } $(this).remove(); return false; }); function addworker(){ var newItem = $('<li />'); var msg = $('<span class="message">Waitting...</span>'); //關閉鈕 var close = $('<span class="close">X</span>').click(function(){ var li = $(this).closest('li'); li.data('worker').terminate(); //停止worker的執行 li.remove(); });; var worker = createWorker (msg); //儲存Worker在元素裡 newItem.data('worker',worker); //執行Worker worker.postMessage(30000); $('#worker-list').append(newItem.append(msg).append(close)) } }); 
(责任编辑:eric)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容