建站
咨詢
售后
建站咨詢
新聞中心
這篇文章假定您具有Javascript和Vue的基本知識。
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計,永定網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:永定等地區(qū)。永定做網(wǎng)站價格咨詢:18982081108
單線程JavaScript
作為單線程編程語言，Javascript一次只能執(zhí)行一組指令，這意味著在執(zhí)行下一個進程之前，所有其他進程都必須等待一條指令完成。
如果我們必須執(zhí)行繁重的進程，并且還希望用戶仍然能夠與我們的應(yīng)用程序交互，那么這將在我們的Web應(yīng)用程序中帶來速度問題。比如說我們需要計算多個投資包的投資回報率，仍然要保證這些進程是非阻塞的，不在主線程上運行，這樣我們就可以在主線程上執(zhí)行其他任務(wù)，比如進行網(wǎng)絡(luò)請求......進入web workers。
注意：阻塞是指串行處理，一次執(zhí)行一項操作。另一方面，非阻塞代碼(異步)可以并行運行(或多線程)
Web Worker允許我們在后臺線程中運行進程，并在這些進程完成時通知主線程。這大大提升了性能，因為我們不需要把主線上的所有東西都分塊。
Web workers
Web Workers是Web內(nèi)容在后臺線程中運行腳本的一種簡單方法，可以在不干擾用戶界面的情況下執(zhí)行任務(wù)。一旦創(chuàng)建，worker就可以通過向代碼指定的事件處理程序發(fā)布消息，向創(chuàng)建它的JavaScript代碼發(fā)送消息(反之亦然)。
Javascript中的Web workers
主線程使用“Worker”構(gòu)造函數(shù)創(chuàng)建 Worker，該構(gòu)造函數(shù)只接收一個參數(shù)，即Worker文件的路徑。Worker包含將在Worker線程中運行的代碼;Worker在另一個不同于當(dāng)前 window 的全局上下文中運行。
數(shù)據(jù)通過消息(message)在worker和主線程之間傳遞——主線程和worker線程使用 postMessage() 方法發(fā)送消息，并使用 onmessage 處理程序響應(yīng)發(fā)送的消息。
這是一個使用Javascript實現(xiàn)Web workers的簡單示例：
MartinsOnuoha/js-webworker-example「鏈接」
在Vue中使用Web Worker
要在Vue應(yīng)用中使用web worker，我們可以使用vue的web worker包裝器，比如vue-worker包，或者在低層實現(xiàn)它(從底層開始構(gòu)建)。我將保持它的簡單性，并將在不使用vue-worker包的情況下構(gòu)建這個示例，這樣我們就可以了解底層發(fā)生了什么。
讓我們設(shè)置我們的vue應(yīng)用程序。
為了保持簡單，我將在純HTML頁面中使用Vue CDN，而不是使用Vue-CLI生成項目。讓我們設(shè)置應(yīng)用程序文件夾。我們的文件夾結(jié)構(gòu)如下所示：
應(yīng)用
我們將在Vue中實現(xiàn)同樣的Javascript例子(一個倒計時計時器)，由于倒計時計時器是一個長期運行的過程，我們將把它委托給我們的web worker，并在我們的主線程上觸發(fā)一個方法，當(dāng)我們的計數(shù)器值被10整除時，從這個API中獲取一個隨機的狗圖像。結(jié)果看起來像這樣：
https://silent-wish.surge.sh/
HTML
在index.html文件中，我們將構(gòu)建我們的標(biāo)記，包括vue-next CDN鏈接，我們的主腳本文件，以及vue的掛載點。
在這里，我們在頂部導(dǎo)入了CSS文件，在底部導(dǎo)入了腳本。我們還會顯示來自數(shù)據(jù)對象的counter屬性，當(dāng)它可用時。使用image標(biāo)簽，我們還會在可用時渲染“dogImage”值。
接下來，我們將在app.js條目文件中設(shè)置vue應(yīng)用。
因為這個示例應(yīng)用程序嚴(yán)重依賴于web Worker，所以我們需要首先檢查瀏覽器是否支持Worker，然后再實例化一個新的Worker類。
接下來，我們設(shè)置App對象。
- const App = {
- ...
- }
我們將有兩個 data 屬性：
- const App = {
- data() {
- return {
- dogImage: null,
- counter: 0,
- }
- }
- }
在我們的method對象中，我們將創(chuàng)建一個方法來從dog API中獲取隨機狗圖像。
- 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對象上設(shè)置一個 onmessage 監(jiān)聽器來監(jiān)聽worker線程的更新，我們檢查worker發(fā)送的計數(shù)器值是否被10整除，如果是，我們再次調(diào)用 getDogImage 方法。
- ...
- mounted () {
- this.getDogImage()
- worker.onmessage = (e) => {
- this.counter = e.data
- if (this.counter % 10 === 0) {
- this.getDogImage()
- }
- }
- },
- ...
然后，我們將App對象掛載在 #app 元素上。
整個app.js文件應(yīng)如下所示：
為了美觀起見，我們將添加一些樣式。將其添加到app.css文件中。
您可以在VScode上使用LiveServer啟動應(yīng)用程序。
源碼
查看所用示例應(yīng)用程序的源代碼：https://github.com/MartinsOnuoha/vue-webworker-example
新聞標(biāo)題：在Vue應(yīng)用程序中使用WebWorkers
本文路徑：http://www.5511xx.com/article/dpjcidi.html
