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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國際域名空間、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、同心網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

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

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

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

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

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

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

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

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

其次，我們來構(gòu)建主線程，它主要任務(wù)就是進(jìn)行協(xié)調(diào)和調(diào)度，它先取得用戶輸入，然后發(fā)送消息給后臺工作線程1，之后接收從后臺工作線程1返回的內(nèi)含素數(shù)數(shù)組的消息，并把這個數(shù)組發(fā)給后臺工作線程2，再接收從后臺工作線程2中返回的內(nèi)含素數(shù)平方數(shù)組的消息，最終把所有消息匯總?cè)缓蟠蛴≡谥黜撁嫔希?xì)節(jié)請看我的代碼注釋：

mainthread.js

//這個函數(shù)是頁面上點(diǎn)擊button的事件處理函數(shù)
function handleInputInteger(){
//讓window對象創(chuàng)建第一個后臺線程(worker1)，這個后臺線程專門負(fù)責(zé)得到小于等于某個整數(shù)的所有素數(shù)
var worker1= new Worker("js/worker1-getPrimeList.js");
//獲取用戶輸入的整數(shù)并轉(zhuǎn)為10進(jìn)制
var integerInput=document.getElementById("inputedInteger").value;
var num=parseInt(integerInput,10);
//把從用戶輸入的整數(shù)傳給后臺線程1
worker1.postMessage(num);
//當(dāng)獲取從后臺線程1(worker1)傳遞過來的結(jié)果時，我們處理這個結(jié)果,我們這個結(jié)果是個json對象
worker1.onmessage=function(event){
    //取得從后臺線程1(worker1)返回的JSON對象,并且分離出信息
    //其中primeArray是由后臺線程1(worker1)完成的取得所有<=指定整數(shù)的素數(shù)構(gòu)成的素數(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);
    //當(dāng)獲得從后臺線程2(worker2)傳來的結(jié)果時，我們在主頁面上構(gòu)造信息塊，反映出整個過程
    worker2.onmessage=function(event){
        //取得從后臺線程2(worker2)返回的JSON對象，并且分離出信息
        //primeArray是從主線程傳遞給后臺線程2（worker2)的素數(shù)數(shù)組
        //squaredPrimeArray是由后臺線程2(worker2)完成的所有的素數(shù)的平方構(gòu)成的數(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;
        //構(gòu)造信息文本,并且顯示在頁面上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文件中，它必須定義當(dāng)接收從主線程傳來的消息（一個整數(shù)）時的處理函數(shù)，它會構(gòu)造一個小于這個整數(shù)的所有素數(shù)組成的素數(shù)數(shù)組，并把這個素數(shù)數(shù)組返回給調(diào)用者線程（主線程）、當(dāng)然了，我們還需要一個輔助方法來判斷某個整數(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;
     
    // 構(gòu)造一個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++;
        }
    }
    //構(gòu)造真正的素數(shù)數(shù)組
    var primeArray = new Array(primeArrayMaxIndex);
    //將buffer素數(shù)數(shù)組中的所有的素數(shù)移動到這個數(shù)組中
    for(var j=0;j
        primeArray[j]=bufferedPrimeArray[j];
    }
    //計算結(jié)束時間
    var endTime= new Date().getTime();
    var elapsedTime=endTime-beginTime;
    //構(gòu)造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文件中，它必須定義當(dāng)接收從主線程傳來的消息（一個素數(shù)數(shù)組）時的處理函數(shù)，它會構(gòu)造一個對應(yīng)的素數(shù)平方數(shù)組，并把這個素數(shù)數(shù)組，以及素數(shù)平方數(shù)組返回給調(diào)用者線程（主線程），所以worker2-getSquaredPrimeList.js的代碼如下：

// 這個 js代碼可以把傳入的素數(shù)數(shù)組中每個素數(shù)依次求平方，然后構(gòu)造一個素數(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;
    //構(gòu)造一個素數(shù)平方數(shù)組
    var squaredPrimeArray=new Array(length);
    //將原來數(shù)組中的所有素數(shù)依次求平方，然后填充到這個新的平方數(shù)組中
    for (var i=0;i
        squaredPrimeArray[i]=primeArray[i]* primeArray[i];
    }
    //計算結(jié)束時間
    var endTime= new Date().getTime();
    var elapsedTime=endTime-beginTime;
    //構(gòu)造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ù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：HTML5多線程處理-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/ddspcj.html