HTML5新特性 多線程Worker SharedWorker
There is no doubt that javascript是沒(méi)有多線程之說(shuō)的,他只能一件事一件事的做,做完一件事再做下一件事,假如你的js要花一段比較長(zhǎng)的時(shí)間做一件事的話,那么瀏覽器將會(huì)卡頓一段時(shí)間,不對(duì)用戶的操作產(chǎn)生響應(yīng),這可咋辦呢?謝天謝地,HTML5為我們提供了實(shí)現(xiàn)多線程的機(jī)制,這么好的東西,想必你早就再用了,不過(guò)沒(méi)關(guān)系啊,咱們一塊兒復(fù)習(xí)一下咯!
一、Worker類(lèi)
1、方法介紹
?。?)構(gòu)造函數(shù) new Worker(arg) :參數(shù)表示你的線程要執(zhí)行的代碼所在的js文件,例如‘myworker.js’,構(gòu)造函數(shù)當(dāng)然是返回一個(gè)Worker類(lèi)的實(shí)例
?。?)worker.postMessage(message):這個(gè)方法表示從主線程向子線程發(fā)送消息或者子線程向主線程發(fā)送消息,message一般是一個(gè)字符串,也可以將一個(gè)js對(duì)象轉(zhuǎn)成字符串發(fā)過(guò)去
?。?)worker上還有一個(gè)message事件,當(dāng)有人向這個(gè)worker實(shí)例發(fā)送消息時(shí),該事件被觸發(fā),我們可以從他的事件對(duì)象的data屬性中獲得post過(guò)來(lái)的值
可以看到Woker類(lèi)的API是相當(dāng)簡(jiǎn)潔的,只有兩個(gè)最常用的方法,一個(gè)事件,下面我們來(lái)通過(guò)實(shí)際的例子看看。
//main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">發(fā)送</button> <script type="text/javascript"> var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker = new Worker("thread1.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker.postMessage(postData); },false); worker.addEventListener('message',function(e){ out.innerText = e.data; },false); </script> </body> </html> //thread1.js onmessage = function(event){ var res = event.data+"帥氣!"; postMessage(res); }
當(dāng)我在文本框輸入“大~熊”點(diǎn)擊發(fā)送按鈕就會(huì)出現(xiàn)如下效果
簡(jiǎn)單分析分析,我在主線程由thead1.js創(chuàng)建了一個(gè)Worker的實(shí)例worker,當(dāng)點(diǎn)擊按鈕時(shí)會(huì)調(diào)用他的postMessage方法,將文本框中的內(nèi)容發(fā)送到thread1.js,我們的thread1.js怎么做的呢?是這樣,他偵聽(tīng)message事件,主線程發(fā)送消息過(guò)來(lái)就觸發(fā)這個(gè)事件,執(zhí)行回調(diào)函數(shù),回調(diào)函數(shù)從事件對(duì)象取得發(fā)送來(lái)的值,然后將這個(gè)值加上“帥氣!”,然后在發(fā)送回去。主線程呢也偵聽(tīng)了worker的message事件,所以有消息過(guò)去時(shí)會(huì)觸發(fā),將消息內(nèi)容顯示在div中,如此就看到了上面的效果。
或許你會(huì)將這有什么用呢?這里確實(shí)沒(méi)什么用,這里我們大可以在主線程還總完成加“帥氣!”的操作,因?yàn)樗膹?fù)雜度為O(1)(哈哈,最近在學(xué)算法!),但是假如不是做這么簡(jiǎn)單的操作呢?這種方法的好處就是不過(guò)你的子線程做多么復(fù)雜的工作,都不會(huì)讓主線程停下來(lái),主線程改干嘛還干嘛,等到子線程把數(shù)據(jù)處理好了他直接拿過(guò)來(lái)就好了。
陸老師將可以在子線程中在調(diào)用new Worker()創(chuàng)建新的子線程,我發(fā)現(xiàn)這樣是不可以的,會(huì)報(bào)undefined錯(cuò)誤,也就是說(shuō)子線程中是不能調(diào)用Worker構(gòu)造函數(shù)的,一開(kāi)始以為是自己錯(cuò)了,后來(lái)查閱了官方文檔,發(fā)現(xiàn)也沒(méi)有相關(guān)的描述。
下面看一個(gè)在主線程調(diào)用多個(gè)子線程的例子:
//main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">發(fā)送</button> <script type="text/javascript"> var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker1 = new Worker("thread1.js"); var worker2 = new Worker("thread2.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker1.postMessage(postData); },false); worker1.addEventListener('message',function(e){ worker2.postMessage(e.data); },false); worker2.addEventListener('message',function(e){ out.innerText = e.data; },false); </script> </body> </html> //thread1.js onmessage = function(event){ var res = event.data+"帥氣!"; postMessage(res); } //thread2.js onmessage = function(event){ var res = event.data+"沒(méi)騙你喲!"; postMessage(res); close(); }
主線程要完成一個(gè)任務(wù)需要兩個(gè)線程,它創(chuàng)建了兩個(gè)線程worker1,2,先向worker1請(qǐng)求,得到返回的數(shù)據(jù)后,再請(qǐng)求worker2,同時(shí)將worker1處理之后的數(shù)據(jù)交給worder2處理,然后拿到最終結(jié)果,顯示在頁(yè)面上。
在子線程中可以引入其他的js文件然后調(diào)用,比如下邊這個(gè)例子。
//main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>main</title> </head> <body> <div id="out"></div> <input type="text" name="" id="txt"> <button id="btn">發(fā)送</button> <script type="text/javascript"> var out = document.getElementById("out"); var btn = document.getElementById("btn"); var txt = document.getElementById("txt"); var worker1 = new Worker("thread1.js"); btn.addEventListener("click",function(){ var postData = txt.value; worker1.postMessage(postData); },false); worker1.addEventListener('message',function(e){ out.innerText = e.data; },false); </script> </body> </html> //thread1.js importScripts('tools.js') onmessage = function(event){ var res = handler(event.data); postMessage(res); } //tools.js function handler(data){ return data+"加油加油!" }
可以看到我們的thread1.js并沒(méi)有一個(gè)叫做tools.js的文件,但是它通過(guò)importScripts()導(dǎo)入了一個(gè)js文件,然后就可以調(diào)用里邊暴露出來(lái)的方法了。
二、SharedWorker類(lèi)
SharedWorker的實(shí)質(zhì)在于share,不同的線程可以共享一個(gè)線程,他們的數(shù)據(jù)也是共享的。
直接用例子來(lái)探討。
使用方法一:
//main.html <!DOCTYPE HTML> <head> <title>Shared workers: demo 1</title> </head> <body> <div id="log"></div> <script> var worker = new SharedWorker('shared.js'); var log = document.getElementById('log'); worker.port.onmessage = function(e) { // note: not worker.onmessage! log.textContent += '\n' + e.data; } </script> </body> </html> //shared.js onconnect = function(e) { var port = e.ports[0]; port.postMessage('Hello World!'); }
這是從w3c拿得一個(gè)例子,下面先看第二種方法,再做分析
<!DOCTYPE HTML> <html> <head> <title>Shared workers: demo 2</title> </head> <body> <div id="log"></div> <script> var worker = new SharedWorker('shared.js'); var log = document.getElementById('log'); worker.port.addEventListener('message', function(e) { log.textContent += '\n' + e.data; }, false); worker.port.start(); // note: need this when using addEventListener worker.port.postMessage('ping'); </script> </body> </html> //shared onconnect = function(e) { var port = e.ports[0]; port.postMessage('Hello World!'); port.onmessage = function(e) { port.postMessage('pong'); // not e.ports[0].postMessage! // e.target.postMessage('pong'); would work also } }
第一種方法中是使用事件句柄的方式將聽(tīng)message事件,不需要調(diào)用worker.port.start(),第二種方法是通過(guò)addEventListener()方法監(jiān)聽(tīng)message事件,需要worker.port.start()方法激活端口。他們不同于worker,當(dāng)有人和他通信時(shí)觸發(fā)connect事件,然后他的message事件是綁定在messagePort對(duì)象上的,不想worker那樣,你可以回頭看看worker是怎么做的。
那么sharedWorker是怎么共享數(shù)據(jù)的呢?請(qǐng)看下面的例子。
//main1 和main2都是這樣 <!DOCTYPE HTML> <html> <head> <title>Shared workers: demo 2</title> </head> <body> <div id="log"></div> <input type="text" name="" id="txt"> <button id="get">get</button> <button id="set">set</button> <script> var worker = new SharedWorker('shared.js'); var get = document.getElementById('get'); var set = document.getElementById('set'); var txt = document.getElementById('txt'); var log = document.getElementById('log'); worker.port.addEventListener('message', function(e) { log.innerText = e.data; }, false); worker.port.start(); // note: need this when using addEventListener set.addEventListener('click',function(e){ worker.port.postMessage(txt.value); },false); get.addEventListener('click',function(e){ worker.port.postMessage('get'); },false); </script> </body> </html> //shared var data; onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { if(e.data=='get'){ port.postMessage(data); }else{ data=e.data; } } }
這里分析一波,我們?cè)趍ain1.html的文本框輸入數(shù)據(jù),點(diǎn)擊set,然后在main2.html中點(diǎn)擊get法現(xiàn)能夠獲取到我們?cè)趍ain1.html中設(shè)置的數(shù)據(jù),這說(shuō)明我們的sharedWorker事實(shí)上是單例的,就像java中的static類(lèi)一樣,不管new多少個(gè),實(shí)際上只有一個(gè),這樣我們的不同線程就可以共享到sharedWorker中的數(shù)據(jù)了。這里把圖給上,記得有篇文章沒(méi)給圖,然后有人給我建議了,問(wèn)能不能給圖。
最后來(lái)小結(jié)一下,worker和sharedWorker沒(méi)有什么懸糊的,就是把臺(tái)前的工作搬到幕后去做,不打斷臺(tái)前的工作。正所謂臺(tái)上十分鐘,臺(tái)下十年功,如果你把臺(tái)下的十年供放到臺(tái)上做,觀眾的唾沫星子早就把你淹死了,所以說(shuō)那些費(fèi)事費(fèi)力的工作還是放到臺(tái)下去,臺(tái)上只用展示你最好的一面的好了,十分鐘足以!
本文地址:http://irelandcustomcontracting.com/tutorial/wd347.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏