溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么進(jìn)行Web Worker線程處理

發(fā)布時(shí)間：2021-12-23 17:20:43 來源：億速云 閱讀：184 作者：柒染 欄目：大數(shù)據(jù)

本篇文章為大家展示了怎么進(jìn)行Web Worker線程處理，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1  瀏覽器把所有事件都通過操作系統(tǒng)安排到事件隊(duì)列中（例如：你去一個(gè)·窗口買菜，需要排隊(duì)）；瀏覽器使用單線程處理隊(duì)列中的事件和執(zhí)行用戶代碼（也就是單線程；web workers除外）。

　　因此，瀏覽器每次只能處理這些任務(wù)中的一個(gè)，并且任意一個(gè)任務(wù)都能阻止其他任務(wù)的執(zhí)行。

2   怎樣判斷代碼“足夠快”？0.1秒的用戶體驗(yàn)為:用戶可以隨意操作，無需等待；0.2~1.0秒的延遲會(huì)被用戶注意到；如果超過1秒，那么用戶會(huì)覺得不流暢；超過10秒，用戶會(huì)非常沮喪。

　　手動(dòng)代碼檢測(cè)：

<div onclick="jsTest">...</div> function jsTest(){  var start  = new Date().getMilliseconds();//這里是一個(gè)開銷很大的代碼var time = stop - start;alert("jsTest() executes in " + time + " milliseconds");       }

　　fireBug的性能分析器

可以在測(cè)量的代碼中加入特定代碼來收集性能統(tǒng)計(jì)信息，或者在特定時(shí)間中實(shí)時(shí)檢驗(yàn)具體執(zhí)行的代碼來監(jiān)視運(yùn)行時(shí)間。后者分析的代買性能失真少，但獲取到的數(shù)據(jù)質(zhì)量會(huì)第一點(diǎn)。你可以通過（點(diǎn)擊“發(fā)送”按鈕）

然后再星星firebug性能分析器查看耗時(shí)。

3 線程處理

使用多線程把開銷大的代碼從與用戶交互的線程中剝離開來。多線程的基本問題是不同的線程可以訪問并修改相同的地址。（我們需要的是一種像多線程那樣能多任務(wù)執(zhí)行卻沒有線程之間互相侵入危險(xiǎn)的方法）

4 Web Workers

讓我們來看一下如何利用Web Workers API 對(duì)值進(jìn)行解封裝。如下展示了如何創(chuàng)建并啟動(dòng)Worker:

//創(chuàng)建并開始執(zhí)行workervar worker = new Worker("js/decrypt.js"); //注冊(cè)事件處理程序，當(dāng)worker給主線程發(fā)送信息時(shí)執(zhí)行worker.onmessage = function(e){  alert("The decrypted value is" + e.data);} //發(fā)送信息給worker，這里指待解密的值worker.postMessage(getValueToDecrypt()); //下面為js/decrypt.js中的內(nèi)容：//注冊(cè)用來接收來自主線程信息的處理程序onmessage = function(e){  //獲取傳過來的數(shù)據(jù)  var valueToDecrypt = e.data;  //TODO:這里實(shí)現(xiàn)解密功能  //把值返回給主線程  this.postMessage(decryptedValue);}

 　在頁面上任何開銷很大的（例如，長(zhǎng)時(shí)間運(yùn)行）javascript操作都應(yīng)委托給Worker；可以是運(yùn)行速度更快。

5  如果你所使用的瀏覽器不支持Web Worker API ,那么可以用Gears Worker API ;代碼如下：
//創(chuàng)建worker Pool,它會(huì)產(chǎn)生Workervar workerPool = google.gears.factory.create('beta.workpool'); //注冊(cè)事件處理程序，他接收來自Worker的信息workerPool.onmessage = function(ignorel, ignorel2, e){  alert("The decrypted value is" + e.body);} //創(chuàng)建Workervar workerId = workerPool.createWorkerFromUrl("js/decrypt.js"); //發(fā)送信息到這個(gè)WorkerworkerPool.sendMessage(getValueToDecrpt(). workerId); //下面是js/decrypt.js的Gears版本： var workerPool = google.gears.workerPool;workerPool.onmessage = function(ignorel, ignorel2, e){  //獲得傳遞過來的數(shù)據(jù)  var getValueToDecrpt = e.body;  //TODO:這里實(shí)現(xiàn)封裝功能   //把值返回給主線程  workerPool.sendMessage(decryptedValue, e.sender);}

　6. 定時(shí)器

var funState = {};function expensiveOperation(){  var startTime = new Date().getMilliseconds();  while ((new Date().getMilliseconds() - startTime) < 80){    //TODO:它用如下方法執(zhí)行開銷很大的運(yùn)算：    //它在迭代的語塊中執(zhí)行80毫秒內(nèi)完成的工作，    //然后修改本函數(shù)外部"function"中的狀態(tài)。  }  if(!funState.isFinished){    //退出10秒后再執(zhí)行expensiveOperation;    //用較大的值進(jìn)行試驗(yàn)，以在Ui響應(yīng)和性能上取得合適的平衡    setTimeout(expensiveOperation(),10);  }}

　　XHRHttpRequest: XHR 有同步與異步的執(zhí)行模式。在異步模式中，XHR實(shí)質(zhì)上就是一個(gè)擁有專用API的Web Worker。

　　XHR在在同步模式中，會(huì)導(dǎo)致用戶界面的持續(xù)延遲時(shí)間與XHR發(fā)送他的請(qǐng)求并解析來自服務(wù)端響應(yīng)的整體耗時(shí)一樣。還會(huì)導(dǎo)致不可預(yù)知和用戶不能容忍的界面延遲。

上述內(nèi)容就是怎么進(jìn)行Web Worker線程處理，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手