99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

 HTML5中我覺得最有用和激動人心的功能就是引入了線程的概念，從而我們可以用多線程的思想來處理比較復雜的應用。我們可以讓前臺線程去完成和用戶交互的工作，而把比較復雜的，耗時較長的運算放在后臺線程中完成，而讓前臺線程與后臺線程通過消息交互.(注意：后臺線程是不可以直接操作window對象和dom樹的)

創(chuàng)新互聯(lián)公司服務項目包括章貢網(wǎng)站建設、章貢網(wǎng)站制作、章貢網(wǎng)頁制作以及章貢網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，章貢網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到章貢省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

創(chuàng)建后臺線程的核心就是HTML5 提供的 Workers API,下面是我用這個API開發(fā)一個相對比較復雜的應用。

 

假設我們有一個需求，頁面上有一個輸入框，讓用戶輸入一個整數(shù)，然后計算出所有小于這個整數(shù)的素數(shù)，然后把所有的素數(shù)分別計算平方，最后吧結果顯示在主頁面上。

如果不用HTML5，那么將會是非常長的一段JS代碼，而且如果輸入的值比較大時，它會吧整個頁面全部“凍結”，有了HTML5就輕松許多了，我們分工如下：

 

主線程：把主頁面上的輸入框的中的數(shù)發(fā)送給后臺線程1

后臺線程1：根據(jù)這個數(shù)來找到所有比它小的素數(shù)，然后把這些素數(shù)封裝在一個JSON數(shù)組中發(fā)送給主線程,同時把這一步驟的處理時間發(fā)送給主線程

主線程：收到后臺線程發(fā)過來的信息，然后把素數(shù)列表發(fā)給后臺線程2

后臺線程2：對于素數(shù)列表中的每一個素數(shù)，計算求出其平方，然后把所有的結果以JSON數(shù)組形式發(fā)送給主線程，同時把這一步驟的處理時間發(fā)送給主線程

主線程：把后臺線程1，后臺線程2所得到的結果以及每個線程執(zhí)行各自所用的時間顯示在主頁面上指定id的區(qū)域內

 

所以，我們首先要有個主頁面，用來接受用戶輸入和最終顯示結果，這個頁面代碼如下：

 
 
 
    charset="utf-8" 
/> 
 
 
  
 
 
 
 
    
這個例子演示HTML5中的Worker的用法，它可以讓主線程和多個后臺線程合作來完成一項任務
 
    
步驟概述： 
    
主線程：把主頁面上的輸入框的中的數(shù)發(fā)送給后臺線程1
 
    
后臺線程1：根據(jù)這個數(shù)來找到所有比它小的素數(shù)，然后把這些素數(shù)封裝在一個字符串對象中發(fā)送給主線程,同時把這一步驟的處理時間發(fā)送給主線程
 
    
主線程收到后臺線程發(fā)過來的信息，然后把素數(shù)列表發(fā)給后臺線程2
 
    
后臺線程2：對于素數(shù)列表中的每一個素數(shù)，計算求出其平方，然后把所有的結果發(fā)送給主線程，同時把這一步的處理時間發(fā)送給主線程
 
    
主線程：構造html頁面，顯示出每個步驟的處理時間，以及最終顯示結果
 
    
 
    輸入一個正整數(shù)： 
     
     
     
    
 
 
 
 

 

 

其次，我們來構建主線程，它主要任務就是進行協(xié)調和調度，它先取得用戶輸入，然后發(fā)送消息給后臺工作線程1，之后接收從后臺工作線程1返回的內含素數(shù)數(shù)組的消息，并把這個數(shù)組發(fā)給后臺工作線程2，再接收從后臺工作線程2中返回的內含素數(shù)平方數(shù)組的消息，最終把所有消息匯總然后打印在主頁面上，細節(jié)請看我的代碼注釋：

mainthread.js

//這個函數(shù)是頁面上點擊button的事件處理函數(shù) 
function handleInputInteger(){ 
     
//讓window對象創(chuàng)建第一個后臺線程(worker1)，這個后臺線程專門負責得到小于等于某個整數(shù)的所有素數(shù) 
var worker1= new Worker("js/worker1-getPrimeList.js"); 
 
 
//獲取用戶輸入的整數(shù)并轉為10進制 
var integerInput=document.getElementById("inputedInteger").value; 
var num=parseInt(integerInput,10); 
 
//把從用戶輸入的整數(shù)傳給后臺線程1 
worker1.postMessage(num); 
 
 
//當獲取從后臺線程1(worker1)傳遞過來的結果時，我們處理這個結果,我們這個結果是個json對象 
worker1.onmessage=function(event){ 
  
    //取得從后臺線程1(worker1)返回的JSON對象,并且分離出信息 
    //其中primeArray是由后臺線程1(worker1)完成的取得所有<=指定整數(shù)的素數(shù)構成的素數(shù)數(shù)組（還是未解析的JSON數(shù)組） 
    //而worker1ElapsedTime則是后臺線程1(worker1)完成它的工作的用時，單位毫秒 
    var data = event.data; 
    var dataInfo=JSON.parse(data); 
    var primeArray=dataInfo.primeArray; 
    var worker1ElapsedTime=dataInfo.worker1ElapsedTime; 
     
     
    //我們讓主線程創(chuàng)建第二個后臺線程(worker2)，這個后臺線程可以把所有的素數(shù)計算平方 
    var worker2 = new Worker("js/worker2-getSquaredPrimeList.js"); 
     
    //把primeArray的信息發(fā)送給第二個后臺線程（worker2） 
    worker2.postMessage(primeArray); 
     
    //當獲得從后臺線程2(worker2)傳來的結果時，我們在主頁面上構造信息塊，反映出整個過程 
    worker2.onmessage=function(event){ 
         
        //取得從后臺線程2(worker2)返回的JSON對象，并且分離出信息 
        //primeArray是從主線程傳遞給后臺線程2（worker2)的素數(shù)數(shù)組 
        //squaredPrimeArray是由后臺線程2(worker2)完成的所有的素數(shù)的平方構成的數(shù)組 
        //而worker2ElapsedTime則是后臺線程2（worker2)完成它的工作的用時，單位毫秒 
        var data = event.data; 
        var dataInfo=JSON.parse(data); 
        var primeArray=dataInfo.primeArray; 
        var squaredPrimeArray=dataInfo.squaredPrimeArray; 
        var worker2ElapsedTime=dataInfo.worker2ElapsedTime; 
         
        //取得素數(shù)的個數(shù) 
        var numOfPrimes=JSON.parse(primeArray).length; 
        //構造信息文本,并且顯示在頁面上id為"result"的區(qū)域 
        var result=document.getElementById("result"); 
        var resultStr="用戶輸入的整數(shù)為： "+num+"
"; 
        resultStr+="
"; 
        resultStr+="后臺線程1(worker1)經(jīng)過分析可知，小于該整數(shù)的素數(shù)一共有"+numOfPrimes+"個。"+"
"; 
        resultStr+="后臺線程1(worker1)得到了素數(shù)數(shù)組為："+primeArray+"
"; 
        resultStr+="后臺線程1(worker1)的操作用時為： "+worker1ElapsedTime+"毫秒!"+"
"; 
        resultStr+="
"; 
        resultStr+="后臺線程2(worker2)得到的素數(shù)的平方數(shù)組為:"+squaredPrimeArray+"
"; 
        resultStr+="后臺線程2(worker2)的操作用時為: "+worker2ElapsedTime+"毫秒!"+"
"; 
        result.innerHTML=resultStr; 
         
    } 
 
}; 
 
 
} 
  

 

再次，我們來定義后臺工作線程1(worker1),這個線程必須被包含在一個js文件中，它必須定義當接收從主線程傳來的消息（一個整數(shù)）時的處理函數(shù)，它會構造一個小于這個整數(shù)的所有素數(shù)組成的素數(shù)數(shù)組，并把這個素數(shù)數(shù)組返回給調用者線程（主線程）、當然了，我們還需要一個輔助方法來判斷某個整數(shù)是否為素數(shù)，所以worker1-getPrimeList.js的代碼如下：

//這個函數(shù)用于判斷某個數(shù)是否為素數(shù) 
function isPrime(number) { 
        if (number < 2) { 
            return false; 
        } else { 
            for (var j = 2; j <= Math.sqrt(number); j++) { 
                if (number % j == 0) { 
                    return false; 
                } 
            } 
        } 
        return true; 
    } 
  
 
// 這個js代碼可以接收傳入的整數(shù)并且返回所有小于等于這個整數(shù)的素數(shù)列表 
onmessage = function(event) { 
     
     
    //計算開始時間 
    var beginTime = new Date().getTime(); 
     
 
    // 獲取用戶輸入的整數(shù) 
    var num = event.data; 
     
 
    // 構造一個buffer素數(shù)數(shù)組 
    var bufferedPrimeArray = new Array(num); 
 
    var primeArrayMaxIndex=0; 
    for (var i = 0; i < num; i++) { 
        if (isPrime(i)){ 
            bufferedPrimeArray[primeArrayMaxIndex]=i; 
            primeArrayMaxIndex++; 
        } 
    } 
     
    //構造真正的素數(shù)數(shù)組 
    var primeArray = new Array(primeArrayMaxIndex); 
    //將buffer素數(shù)數(shù)組中的所有的素數(shù)移動到這個數(shù)組中 
    for(var j=0;j
        primeArray[j]=bufferedPrimeArray[j]; 
    } 
     
    //計算結束時間 
    var endTime= new Date().getTime(); 
     
    var elapsedTime=endTime-beginTime; 
     
     
    //構造json對象來存儲信息: 
    var data = new Object; 
    data.primeArray = JSON.stringify(primeArray); 
    data.worker1ElapsedTime= elapsedTime; 
    var str=JSON.stringify(data); 
     
    //把這個json對象發(fā)送回主線程 (也就是創(chuàng)建這個worker1的線程） 
    postMessage(str); 
     
     
} 

 

最后，我們來定義后臺工作線程2(worker2),這個線程也必須被包含在一個js文件中，它必須定義當接收從主線程傳來的消息（一個素數(shù)數(shù)組）時的處理函數(shù)，它會構造一個對應的素數(shù)平方數(shù)組，并把這個素數(shù)數(shù)組，以及素數(shù)平方數(shù)組返回給調用者線程（主線程），所以worker2-getSquaredPrimeList.js的代碼如下：

// 這個 js代碼可以把傳入的素數(shù)數(shù)組中每個素數(shù)依次求平方，然后構造一個素數(shù)平方數(shù)組 
onmessage = function(event) { 
     
     
    //計算開始時間 
    var beginTime = new Date().getTime(); 
     
 
    // 獲取從主線程傳來的素數(shù)數(shù)組,并且還原成真正的素數(shù)數(shù)組 
    var primeArrayFromMainThread= event.data; 
    var primeArray = JSON.parse(primeArrayFromMainThread); 
    var length=primeArray.length; 
 
    //構造一個素數(shù)平方數(shù)組 
    var squaredPrimeArray=new Array(length); 
     
    //將原來數(shù)組中的所有素數(shù)依次求平方，然后填充到這個新的平方數(shù)組中 
    for (var i=0;i
        squaredPrimeArray[i]=primeArray[i]* primeArray[i]; 
    } 
         
     
    //計算結束時間 
    var endTime= new Date().getTime(); 
     
    var elapsedTime=endTime-beginTime; 
     
     
    //構造json對象來存儲信息: 
    var data = new Object; 
    data.primeArray = JSON.stringify(primeArray); 
    data.squaredPrimeArray=JSON.stringify(squaredPrimeArray); 
    data.worker2ElapsedTime= elapsedTime; 
    var str=JSON.stringify(data); 
     
    //把這個json對象發(fā)送回主線程 (也就是創(chuàng)建這個worker1的線程） 
    postMessage(str); 
     
     
} 

 

最后國際慣例，我們演示下例子：

首先，用戶輸入前：

用戶輸入某個整數(shù)，比如98，則顯示如下：

 

網(wǎng)頁名稱：HTML5多線程處理
標題鏈接：http://www.ef60e0e.cn/article/jgeioj.html