国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园

前言

提到 WebWorker，可能有些小伙伴比較陌生，不知道是做什么的，甚至不知道使用場景，今天這篇文章就帶大家一起簡單了解一下什么是 webworker！

概念

WebWorker 實際上是運行在瀏覽器后臺的一個單獨的線程，因此可以執(zhí)行一些耗時的操作而不會阻塞主線程。WebWorker 通過與主線程之間傳遞消息實現(xiàn)通信，這種通信是雙向的。WebWorker不能直接訪問 DOM，也不能使用像 window 對象這樣的瀏覽器接口對象，但可以使用一些WebWorker 標準接口和 Navigator 對象的部分屬性和方法。

為什么使用WebWorker？

1. 提高應用響應能力：主線程被獨占執(zhí)行一些耗時的計算或操作時，會導致UI無響應。WebWorker 可以把這些任務轉移到后臺線程，從而保證主線程的運行，提高應用的響應能力。

2. 充分利用多核CPU：現(xiàn)代CPU都是多核的，WebWorker 可以讓 Web 應用利用多核 CPU 的并行計算能力，充分發(fā)揮計算機硬件性能。

3. 避免渲染阻塞：JavaScript 運行在主線程，如果主線程一直占用，就無法執(zhí)行 GUI 渲染任務，導致界面渲染受阻。WebWorker 把一些費時任務分流到后臺線程就可以避免這一問題。

4. 后臺持續(xù)運行：WebWorker 所在后臺線程可持續(xù)運行，即使頁面被掛起或最小化，任務仍在后臺執(zhí)行，非常適合一些需要長時間運行的操作。

使用場景

一般來說,當遇到如下幾種情況時可以考慮使用 WebWorker:

1. 大量數(shù)據(jù)的計算/處理：比如圖像處理、數(shù)據(jù)分析等

2. 長時間運行的操作：如一些復雜的數(shù)學計算

3. 非阻塞式操作：希望執(zhí)行一些耗時操作時不阻塞主線程

示例

假設我們有一個需要計算斐波那契數(shù)列的任務，我們可以使用 Web Worker 來進行計算，以避免阻塞主線程。以下是一個簡單的示例：

?主線程

主線程創(chuàng)建 worker 實例，向子線程通過 postMessage 發(fā)送消息，通過 onmessage 監(jiān)聽子線程返回的數(shù)據(jù)。

const myWorker = new Worker('./worker.js')


myWorker.onmessage = function (e) {

console.log('Fibonacci result:', e.data)

}


myWorker.postMessage(40) // 請求計算斐波那契數(shù)列的第40項

worker.js

在同級目錄下創(chuàng)建 worker.js文件，通過 onmessage 接收主線程發(fā)來的數(shù)據(jù)，計算后通過postMessage 將計算結果返回主線程。

self.onmessage = function (e) {

const n = e.data

let a = 0,

b = 1,

temp

for (let i = 2; i <= n; i++) {

temp = a

a = b

b = temp + b

}

self.postMessage(b)

}

運行結果

可以看到主線程打印出 webworker 計算的運行結果

Vue、React項目使用

接下來為大家演示 vue 以及 react 項目如何使用

Vue使用

vue版本："vue": "^2.6.14",vue-cli版本：@vue/cli 5.0.8安裝 worker-loader

頁面使用

<template><div>我的頁面</div></template>

<script>

export default {

name: 'MyselfView',

data() {

return {

worker: null,

}

},

mounted() {

// 創(chuàng)建 WebWorker 實例

this.worker = new Worker(new URL('./worker.js', import.meta.url))

console.log('worker: ', this.worker)

this.worker.postMessage(40) // 請求計算斐波那契數(shù)列的第40項


this.worker.addEventListener('message', (event) => {

console.log('Fibonacci result:', event.data)

})

},

beforeDestroy() {

// 組件銷毀時終止 WebWorker

this.worker.terminate()

},

}

</script>

worker.js

// worker.js

self.addEventListener('message', (e) => {

console.log('e: ', e)

const n = e.data

let a = 0,

b = 1,

temp

for (let i = 2; i <= n; i++) {

temp = a

a = b

b = temp + b

}

self.postMessage(b)

})

效果 

React使用 

react版本： "react": "^18.2.0"

import React, { useEffect } from 'react'

// import WorkerScript from './worker.worker.js'


const Demo = () => {

useEffect(() => {

const worker = new Worker(new URL('./worker.worker.js', import.meta.url))


worker.onmessage = function (e) {

console.log('Fibonacci result:', e.data)

}

worker.postMessage(40) // 請求計算斐波那契數(shù)列的第40項

// 使用 worker ...

return () => worker.terminate()

}, [])


return (

<div>

<p>count的值</p>

</div>

)

效果

注意

由于我們在項目開發(fā)時，使用不同的打包工具(vite/webpack)。幸運的是，最新版的vite/webpack都支持Web Worker了。

我們可以通過：new URL()的方式 --vite/webpack都支持

new Worker(

new URL(

'./worker.js',

import.meta.url

)

);

總結

WebWorker是一種在 Web 應用中實現(xiàn)多線程運行的技術，可以將耗費 CPU 的任務交給后臺線程處理，避免阻塞主線程，從而提高Web應用的響應性能和用戶體驗。 總之，WebWorker的引入解決了Web應用長期以來在單個線程中運行所帶來的諸多問題，有效提升了Web應用的運行性能和用戶體驗。