Web Worker在Vue中的實(shí)際應(yīng)用

作者：張張 2021-08-28 10:06:29

作為單線程編程語(yǔ)言，Javascript一次只能執(zhí)行一組指令，這意味著在執(zhí)行下一個(gè)進(jìn)程之前，所有其他進(jìn)程都必須等待一條指令完成。

[[420073]]

這篇文章假定您具有Javascript和Vue的基本知識(shí)。

單線程JavaScript

如果我們必須執(zhí)行繁重的進(jìn)程，并且還希望用戶(hù)仍然能夠與我們的應(yīng)用程序交互，那么這將在我們的Web應(yīng)用程序中帶來(lái)速度問(wèn)題。比如說(shuō)我們需要計(jì)算多個(gè)投資包的投資回報(bào)率，仍然要保證這些進(jìn)程是非阻塞的，不在主線程上運(yùn)行，這樣我們就可以在主線程上執(zhí)行其他任務(wù)，比如進(jìn)行網(wǎng)絡(luò)請(qǐng)求......進(jìn)入web workers。

注意：阻塞是指串行處理，一次執(zhí)行一項(xiàng)操作。另一方面，非阻塞代碼(異步)可以并行運(yùn)行(或多線程)

Web Worker允許我們?cè)诤笈_(tái)線程中運(yùn)行進(jìn)程，并在這些進(jìn)程完成時(shí)通知主線程。這大大提升了性能，因?yàn)槲覀儾恍枰阎骶€上的所有東西都分塊。

Web workers

Web Workers是Web內(nèi)容在后臺(tái)線程中運(yùn)行腳本的一種簡(jiǎn)單方法，可以在不干擾用戶(hù)界面的情況下執(zhí)行任務(wù)。一旦創(chuàng)建，worker就可以通過(guò)向代碼指定的事件處理程序發(fā)布消息，向創(chuàng)建它的JavaScript代碼發(fā)送消息(反之亦然)。

Javascript中的Web workers

主線程使用“Worker”構(gòu)造函數(shù)創(chuàng)建 Worker，該構(gòu)造函數(shù)只接收一個(gè)參數(shù)，即Worker文件的路徑。Worker包含將在Worker線程中運(yùn)行的代碼;Worker在另一個(gè)不同于當(dāng)前 window 的全局上下文中運(yùn)行。

數(shù)據(jù)通過(guò)**消息(message)**在worker和主線程之間傳遞——主線程和worker線程使用 postMessage() 方法發(fā)送消息，并使用onmessage 處理程序響應(yīng)發(fā)送的消息。

這是一個(gè)使用Javascript實(shí)現(xiàn)Web workers的簡(jiǎn)單示例：MartinsOnuoha/js-webworker-example[1]

在Vue中使用Web Worker

要在Vue應(yīng)用中使用web worker，我們可以使用vue的web worker包裝器，比如vue-worker[2]包，或者在低層實(shí)現(xiàn)它(從底層開(kāi)始構(gòu)建)。我將保持它的簡(jiǎn)單性，并將在不使用vue-worker包的情況下構(gòu)建這個(gè)示例，這樣我們就可以了解底層發(fā)生了什么。

讓我們?cè)O(shè)置我們的vue應(yīng)用程序。

為了保持簡(jiǎn)單，我將在純HTML頁(yè)面中使用Vue CDN，而不是使用Vue-CLI生成項(xiàng)目。讓我們?cè)O(shè)置應(yīng)用程序文件夾。我們的文件夾結(jié)構(gòu)如下所示：

應(yīng)用

我們將在Vue中實(shí)現(xiàn)同樣的Javascript例子[3](一個(gè)倒計(jì)時(shí)計(jì)時(shí)器)，由于倒計(jì)時(shí)計(jì)時(shí)器是一個(gè)長(zhǎng)期運(yùn)行的過(guò)程，我們將把它委托給我們的web worker，并在我們的主線程上觸發(fā)一個(gè)方法，當(dāng)我們的計(jì)數(shù)器值被10整除時(shí)，從這個(gè)API[4]中獲取一個(gè)隨機(jī)的狗圖像。結(jié)果看起來(lái)像這樣[5]：

[[420074]]

https://silent-wish.surge.sh/

HTML

在index.html文件中，我們將構(gòu)建我們的標(biāo)記，包括vue-next CDN鏈接，我們的主腳本文件，以及vue的掛載點(diǎn)。

在這里，我們?cè)陧敳繉?dǎo)入了CSS文件，在底部導(dǎo)入了腳本。我們還會(huì)顯示來(lái)自數(shù)據(jù)對(duì)象的counter屬性，當(dāng)它可用時(shí)。使用image標(biāo)簽，我們還會(huì)在可用時(shí)渲染“dogImage”值。

接下來(lái)，我們將在app.js條目文件中設(shè)置vue應(yīng)用。

因?yàn)檫@個(gè)示例應(yīng)用程序嚴(yán)重依賴(lài)于web Worker，所以我們需要首先檢查瀏覽器是否支持Worker，然后再實(shí)例化一個(gè)新的Worker類(lèi)。

script/app.js

接下來(lái)，我們?cè)O(shè)置App對(duì)象。

const App = { 
   ... 
}

我們將有兩個(gè) data 屬性：

const App = { 
  data() { 
    return { 
      dogImage: null, 
      counter: 0, 
    } 
  } 
}

在我們的method對(duì)象中，我們將創(chuàng)建一個(gè)方法來(lái)從dog API中獲取隨機(jī)狗圖像。

methods: { 
  getDogImage () { 
    fetch('https://dog.ceo/api/breeds/image/random') 
      .then((response) => response.json()) 
      .then((data) => { 
         this.dogImage = data.message 
      }) 
    } 
}

最后，在 mounted 的鉤子中，我們將第一次調(diào)用 getDogImage 方法，然后在我們的worker對(duì)象上設(shè)置一個(gè) onmessage 監(jiān)聽(tīng)器來(lái)監(jiān)聽(tīng)worker線程的更新，我們檢查worker發(fā)送的計(jì)數(shù)器值是否被10整除，如果是，我們?cè)俅握{(diào)用 getDogImage 方法。

... 
mounted () { 
  this.getDogImage() 
  worker.onmessage = (e) => { 
    this.counter = e.data 
    if (this.counter % 10 === 0) { 
      this.getDogImage() 
    } 
  } 
}, 
...