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

單線程JavaScript

作為單線程編程語言，Javascript一次只能執行一組指令，這意味著在執行下一個進程之前，所有其他進程都必須等待一條指令完成。

如果我們必須執行繁重的進程，并且還希望用戶仍然能夠與我們的應用程序交互，那么這將在我們的Web應用程序中帶來速度問題。比如說我們需要計算多個投資包的投資回報率，仍然要保證這些進程是非阻塞的，不在主線程上運行，這樣我們就可以在主線程上執行其他任務，比如進行網絡請求......進入web workers。

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

Web Worker允許我們在后臺線程中運行進程，并在這些進程完成時通知主線程。這大大提升了性能，因為我們不需要把主線上的所有東西都分塊。

Web workers

Web Workers是Web內容在后臺線程中運行腳本的一種簡單方法，可以在不干擾用戶界面的情況下執行任務。一旦創建，worker就可以通過向代碼指定的事件處理程序發布消息，向創建它的JavaScript代碼發送消息(反之亦然)。

Javascript中的Web workers

主線程使用“Worker”構造函數創建 Worker，該構造函數只接收一個參數，即Worker文件的路徑。Worker包含將在Worker線程中運行的代碼;Worker在另一個不同于當前 window 的全局上下文中運行。

數據通過消息(message)在worker和主線程之間傳遞——主線程和worker線程使用 postMessage() 方法發送消息，并使用 onmessage 處理程序響應發送的消息。

這是一個使用Javascript實現Web workers的簡單示例：

MartinsOnuoha/js-webworker-example「鏈接」

在Vue中使用Web Worker

要在Vue應用中使用web worker，我們可以使用vue的web worker包裝器，比如vue-worker包，或者在低層實現它(從底層開始構建)。我將保持它的簡單性，并將在不使用vue-worker包的情況下構建這個示例，這樣我們就可以了解底層發生了什么。

讓我們設置我們的vue應用程序。

為了保持簡單，我將在純HTML頁面中使用Vue CDN，而不是使用Vue-CLI生成項目。讓我們設置應用程序文件夾。我們的文件夾結構如下所示：

應用

我們將在Vue中實現同樣的Javascript例子(一個倒計時計時器)，由于倒計時計時器是一個長期運行的過程，我們將把它委托給我們的web worker，并在我們的主線程上觸發一個方法，當我們的計數器值被10整除時，從這個API中獲取一個隨機的狗圖像。結果看起來像這樣：

[[422310]]

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

HTML

在index.html文件中，我們將構建我們的標記，包括vue-next CDN鏈接，我們的主腳本文件，以及vue的掛載點。

在這里，我們在頂部導入了CSS文件，在底部導入了腳本。我們還會顯示來自數據對象的counter屬性，當它可用時。使用image標簽，我們還會在可用時渲染“dogImage”值。

接下來，我們將在app.js條目文件中設置vue應用。

因為這個示例應用程序嚴重依賴于web Worker，所以我們需要首先檢查瀏覽器是否支持Worker，然后再實例化一個新的Worker類。

接下來，我們設置App對象。

const App = { 
   ... 
} 

我們將有兩個 data 屬性：

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

在我們的method對象中，我們將創建一個方法來從dog API中獲取隨機狗圖像。

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

最后，在 mounted 的鉤子中，我們將第一次調用 getDogImage 方法，然后在我們的worker對象上設置一個 onmessage 監聽器來監聽worker線程的更新，我們檢查worker發送的計數器值是否被10整除，如果是，我們再次調用 getDogImage 方法。

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

然后，我們將App對象掛載在 #app 元素上。

整個app.js文件應如下所示：

為了美觀起見，我們將添加一些樣式。將其添加到app.css文件中。

您可以在VScode上使用LiveServer啟動應用程序。

源碼

查看所用示例應用程序的源代碼：https://github.com/MartinsOnuoha/vue-webworker-example