快捷導(dǎo)航

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

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

最近在做vue3的項目中,遇到了計算量龐大導(dǎo)致頁面響應(yīng)緩慢的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項目優(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)于分裝了一個方法，只適用于某個功能或者數(shù)據(jù)處理，所以可以新建多個worker.js相當(dā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方法中使用以下代碼，那么要么卡死要么需要很久才能打印，而使用后就能相對較快打印出來

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這個插件就需要安裝，該插件好像只能在webpack項目才能使用