快捷導(dǎo)航

vue3中項(xiàng)目優(yōu)化方法詳解(Web?Worker的使用)

更新時(shí)間：2024年07月22日 10:07:37 作者：?團(tuán)子?

最近在做vue3的項(xiàng)目中,遇到了計(jì)算量龐大導(dǎo)致頁面響應(yīng)緩慢的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項(xiàng)目優(yōu)化方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.Web Worker的作用

本人的理解：js是單線程執(zhí)行代碼，也就是代碼需要從上往下執(zhí)行，而使用Web Worker后相當(dāng)于分了一條線程出來執(zhí)行代碼，那么兩條線程肯定是比一條線程執(zhí)行的快。

2.新建Web Worker文件

在public文件夾下新建worker.js

說明：名稱可以隨意，worker.js相當(dāng)于分裝了一個(gè)方法，只適用于某個(gè)功能或者數(shù)據(jù)處理，所以可以新建多個(gè)worker.js相當(dāng)于分裝了多個(gè)用于不同場(chǎng)景的方法。

// worker.js

self.onmessage = function(event) {
  const result = processData(event.data);  // 執(zhí)行數(shù)據(jù)處理操作
  console.log("result",result,event);
  postMessage(result); // 將處理后的數(shù)據(jù)發(fā)送回主線程
};

// 執(zhí)行數(shù)據(jù)處理操作
function processData(data) {
  // 在這里進(jìn)行數(shù)據(jù)處理操作
  let sum = 0;
    for (let i = 0; i < 200000; i++) {
        for (let i = 0; i < 10000; i++) {
            sum += Math.random()
        }
    }
  return '處理結(jié)果: ' + data +'/'+ sum;
}

3.引入使用

<template>
    <div>
        <button @click="processData">處理數(shù)據(jù)</button>
        <div>{{ result }}</div>
    </div>
</template>

<script setup>
import { ref } from "vue";

const result = ref('')
function processData() {
    const worker = new Worker('/public/worker.js'); // 創(chuàng)建 Web Worker 參數(shù)為worker.js文件路徑
    worker.onmessage = (event) => { // 監(jiān)聽Web Worker消息處理
        result.value = event.data; // 處理返回的結(jié)果
    };
    worker.postMessage('哇酷哇酷'); // 發(fā)送消息給 Web Worker 參數(shù)為需要傳遞的數(shù)據(jù)
}
</script>

4.效果

5.說明

（1）.如果不使用Web Worker而直接在processData方法中使用以下代碼，那么要么卡死要么需要很久才能打印，而使用后就能相對(duì)較快打印出來

let sum = 0;
    for (let i = 0; i < 200000; i++) {
        for (let i = 0; i < 10000; i++) {
            sum += Math.random()
        }
    }
console.log("sum",sum);

（2）.Web Worker不需要安裝插件，如果使用worker-loader這個(gè)插件就需要安裝，該插件好像只能在webpack項(xiàng)目才能使用

總結(jié)

到此這篇關(guān)于vue3中項(xiàng)目優(yōu)化方法的文章就介紹到這了,更多相關(guān)vue3項(xiàng)目優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題
這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
Vue3組件通信的具體用法實(shí)例
在Vue.js3中,組件通信主要包括父子組件通信、兄弟組件通信以及祖孫組件通信,這篇文章主要介紹了Vue3組件通信具體用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-09-09
詳解vue-video-player使用心得（兼容m3u8）
這篇文章主要介紹了詳解vue-video-player使用心得（兼容m3u8），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vite build vue3項(xiàng)目配置開啟sourcemap方式
這篇文章主要介紹了vite build vue3項(xiàng)目配置開啟sourcemap方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動(dòng)改變順序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue使用自定義指令實(shí)現(xiàn)拖拽行為實(shí)例分析
這篇文章主要介紹了Vue使用自定義指令實(shí)現(xiàn)拖拽行為,結(jié)合實(shí)例形式分析了Vue使用自定義指令實(shí)現(xiàn)拖拽行為具體步驟、原理與操作注意事項(xiàng),需要的朋友可以參考下
2020-06-06
Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)，Vue項(xiàng)目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下
2022-02-02
vuex-persist 使用場(chǎng)景分析
Vuex-Persist 是一個(gè)用于在 Vuex 中實(shí)現(xiàn)持久化狀態(tài)的庫,它可以用來解決應(yīng)用程序在刷新瀏覽器或關(guān)閉頁面后丟失 Vuex store 中狀態(tài)的問題,本文給大家介紹vuex-persist 可以用來干什么,感興趣的朋友一起看看吧
2023-11-11
vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“
這篇文章主要介紹了vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-11-11