HTML5-程序設計第13章_第1頁
HTML5-程序設計第13章_第2頁
HTML5-程序設計第13章_第3頁
HTML5-程序設計第13章_第4頁
HTML5-程序設計第13章_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML5根底教程授課教師：職務：第13章支持多線程編程的WebWorkers

課程描述提到多線程，大多數(shù)會想到VisualC++、VisualC#和Java等高級程序設計語言。傳統(tǒng)的Web應用程序都是單線程的，完成一項任務才去執(zhí)行下面的工作。這樣的應用程序效率自然不會高，甚至會出現(xiàn)網頁沒有響應的情況。HTML5新增了WebWorkers對象，使用WebWorkers對象可以后臺運行JavaScript程序，也就是支持多線程，從而提高了新一代Web應用程序的效率。

本章知識點13.1概述13.2WebWorkers編程13.1概述13.1.1什么是線程13.1.2什么是HTML5WebWorkers13.1.3瀏覽器對WebWorkers的支持情況13.1.1什么是線程線程是操作系統(tǒng)可以調度的最小執(zhí)行單位，通常是將程序拆分成2個或多個并發(fā)運行的任務。一個線程就是一段順序程序。但是線程不能獨立運行，只能在程序中運行。不同的操作系統(tǒng)實現(xiàn)進程和線程的方法也不同，但大多數(shù)是在進程中包含線程，Windows就是這樣。一個進程中可以存在多個線程，線程可以共享進程的資源〔比方內存〕。而不同的進程之間那么是不能共享資源的。線程與進程的比照方下：進程通?？捎锚毩⑦\行，而線程那么是進程的子集，只能在進程運行的根底上運行。進程擁有獨立的私有內存空間，一個進程不能訪問其他進程的內存空間；而一個進程中的線程那么可以共享內存空間。進程之間只能通過系統(tǒng)提供的進程間通信的機制進行通信；而線程間的通信那么簡單得多。一個進程中的線程之間切換上下文比不同進程之間切換上下文要高效得多。在操作系統(tǒng)內核中，線程可以被標記成如下狀態(tài)

初始化〔Init〕：在創(chuàng)立線程時，操作系統(tǒng)在內部會將其標識為初始化狀態(tài)。此狀態(tài)只在系統(tǒng)內核中使用。就緒〔Ready〕：線程已經準備好被執(zhí)行。延遲就緒〔Deferredready〕：表示線程已經被選擇在指定的處理器上運行，但還沒有被調度。備用〔Standby〕：、表示線程已經被選擇下一個在指定的處理器上運行。當該處理器上運行的線程因等待資源等原因被掛起時，調度器將備用線程切換到處理器上運行。只有一個線程可以是備用狀態(tài)。運行〔Running〕：表示調度器將線程切換到處理器上運行，它可以運行一個線程周期〔quantum〕，然后將處理器讓給其他線程。等待〔Waiting〕：線程可以因為等待一個同步執(zhí)行的對象或等待資源等原因切換到等待狀態(tài)。過渡〔transition〕：表示線程已經準備好被執(zhí)行，但它的內核堆已經被從內存中移除。一旦其內核堆被加載到內存中，線程就會變成運行狀態(tài)。終止〔Terminated〕：當線程被執(zhí)行完成后，其狀態(tài)會變成終止。系統(tǒng)會釋放線程中的數(shù)據(jù)結構和資源。Windows線程的狀態(tài)切換13.1.2什么是HTML5WebWorkersWebWorkers是HTML5的一個亮點，使用它可以在后臺獨立地運行不需要與用戶進行交互的JavaScript程序。這就使得一些需要長時間運行的腳本與需要與用戶交流的腳本之間可以互不干擾的運行。后臺運行的腳本可以稱為Workers。通常Workers的工作量都是相對“重量級”的，啟動一個WebWorkers對象所消耗的性能本錢和維護一個WebWorkers實例所需要的內存本錢都比較高，因此不建議大量使用WebWorkers對象，只用于長期運行的后臺運算，不要頻繁地創(chuàng)立和銷毀WebWorkers對象。有兩種WebWorkers：專用線程〔dedicatedworker〕和共享線程〔SharedWorker〕。專用線程一旦創(chuàng)立就只能與創(chuàng)立它的頁面連接和通信，而共享線程那么沒有這個限制。13.1.3瀏覽器對WebWorkers的支持情況在JavaScript中可以使用typeof(Worker)檢測瀏覽器對WebWorkers的支持情況。如果typeof(Worker)等于"undefined"，那么說明當前瀏覽器不支持WebWorkers；否那么說明支持。在JavaScript中可以使用typeof(Worker)檢測瀏覽器對WebWorkers的支持情況。如果typeof(Worker)等于"undefined"，那么說明當前瀏覽器不支持WebWorkers；否那么說明支持?！纠?3-1】在網頁中定義一個按鈕，單擊此按鈕時，會檢測瀏覽器是否支持WebWorkers。定義按鈕的代碼如下：<buttonid="check"onclick="check();">檢測瀏覽器是否支持WebWorkers</button>單擊按鈕check將調用check()函數(shù)。check()函數(shù)的定義代碼如下：<scripttype="text/javascript">functioncheck(){if(typeof(Worker)!="undefined"){alert("您的瀏覽器支持WebWorkers。");}else{alert("您的瀏覽器不支持WebWorkers。");}}</script>13.2WebWorkers編程13.2.1創(chuàng)立WebWorkers對象13.2.2終止WebWorkers對象13.2.3共享線程〔SharedWorker〕13.2.1創(chuàng)立WebWorkers對象要進行WebWorkers編程，首先就要創(chuàng)立一個WebWorkers對象?？梢允褂胣ew關鍵字創(chuàng)立一個WebWorkers對象，語法如下：var<WebWorkers對象>=newWorker("<.js文件>");<.js文件>為WebWorkers對象在后臺運行的JavaScript腳本?！纠?3-2】WebWorkers編程的實例。本實例創(chuàng)立一個WebWorkers對象，在后臺運行demo_workers.js腳本，每隔1秒鐘就更新一次計數(shù)，并在頁面中顯示出來。這里使用<output>標簽result顯示計數(shù)，其定義代碼如下：<outputid="result"></output>定義一個按鈕，用于開始計數(shù)，代碼如下：<buttononclick="startWorker()">開始計數(shù)</button>單擊“開始計數(shù)”按鈕，會運行startWorker()函數(shù)<script>varw;//WebWorkers對象functionstartWorker(){if(typeof(Worker)!=="undefined"){if(typeof(w)=="undefined"){w=newWorker("demo_workers.js");//創(chuàng)立WebWorkers對象}//在demo_workers.js中會定時發(fā)送消息，這里處理接收到的消息w.onmessage=function(event){document.getElementById("result").innerHTML=event.data;};}else{document.getElementById("result").innerHTML="Sorry,yourbrowserdoesnotsupportWebWorkers...";}}</script>demo_workers.js腳本保存在網頁文件的同目錄下，代碼如下//demo_workers.jsvari=0;functiontimedCount(){i=i+1;postMessage(i);setTimeout("timedCount()",1000);}//調用timedCount()方法timedCount();setTimeout()方法setTimeout()方法用于在指定的毫秒數(shù)后調用函數(shù)或計算表達式，語法如下：setTimeout(code,millisec)參數(shù)code表示要調用的函數(shù)后要執(zhí)行的JavaScript代碼串；參數(shù)millisec指定在執(zhí)行代碼前需等待的毫秒數(shù)。在timedCount()方法中執(zhí)行setTimeout("timedCount()",1000);語句的作用就是每隔1秒鐘調用一次timedCount()方法。瀏覽【例13-2】的頁面提示必須通過Web效勞器訪問網頁，WebWorkers對象才能正常工作，通過雙擊訪問網頁那么不行?！纠?3-3】<!DOCTYPEHTML><html><head><title>使用線程統(tǒng)計所有質數(shù)</title></head><body><p>統(tǒng)計所有質數(shù):<outputid="result"></output></p><script>varworker=newWorker('worker.js');worker.onmessage=function(event){document.getElementById('result').textContent=event.data;};</script></body></html>worker.js腳本保存在網頁文件的同目錄下，代碼如下//worker.jsvarn=1;search:while(true){n+=1;for(vari=2;i<=Math.sqrt(n);i+=1)if(n%i==0)continuesearch;//找到質數(shù)!postMessage(n);}13.2.2終止WebWorkers對象調用terminate()方法可以終止WebWorkers對象，語法如下：worker.terminate();【例13-4】在【例13-2】的網頁中添加一個終止按鈕，其定義代碼如下：<buttononclick="stopWorker()">停止計數(shù)</button>單擊“停止計數(shù)”按鈕，會運行stopWorker()函數(shù)，代碼如下：functionstopWorker(){w.terminate();}13.2.3共享線程〔SharedWorker〕共享線程可以與多個頁面保持連接和通信。共享線程的創(chuàng)立和通信方法與前面介紹的WebWorkers對象并不相同。創(chuàng)立共享線程的方法如下：var<WebWorkers對象>=newSharedWorker("<.js文件>");<.js文件>為共享線程在后臺運行的JavaScript腳本。SharedWorker對象可以通過端口〔port〕與js文件通信，方法如下=function(e){//消息處理

……}e.data中包含通信數(shù)據(jù)。在.js文件中，需要定義連接處理函數(shù)，并可以在連接處理函數(shù)中使用端口〔port〕與頁面通信onconnect=function(e){varport=e.ports[0];port.postMessage(……);}【例13-5】共享線程編程的實例。本實例在頁面outer.html中使用框架模擬兩個頁面，在兩個頁面中分別創(chuàng)立一個SharedWorker對象在后臺運行demo_sharedworkers.js腳本，并實現(xiàn)與不同頁面的通信。outer.html的定義代碼如下：<!DOCTYPEHTML><title>演示SharedWorker對象的使用</title><preid="log">Log:</pre><script>varworker=newSharedWorker('sharedworkers.js');varlog=document.getElementById('log');worker.port.addEventListener('message',function(e){log.textContent+='\n'+e.data;},false);();('在嗎？');</script><iframesrc="inner.html"></iframe>inner.html

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論