狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

前言

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

概念

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

為什么使用WebWorker？

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

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

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

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

使用場景

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

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

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

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

示例

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

?主線程

主線程創建 worker 實例，向子線程通過 postMessage 發送消息，通過 onmessage 監聽子線程返回的數據。

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


myWorker.onmessage = function (e) {

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

}


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

worker.js

在同級目錄下創建 worker.js文件，通過 onmessage 接收主線程發來的數據，計算后通過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() {

// 創建 WebWorker 實例

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

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

this.worker.postMessage(40) // 請求計算斐波那契數列的第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) // 請求計算斐波那契數列的第40項

// 使用 worker ...

return () => worker.terminate()

}, [])


return (

<div>

<p>count的值</p>

</div>

)

效果

注意

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

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

new Worker(

new URL(

'./worker.js',

import.meta.url

)

);

總結

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