剛寫了一個搜索框，一打字直接卡死了？？？
Hello，大家好，我是 Sunday。
昨天有位同學聯系我說：“sunday 老師，我做了一個搜索框的功能，但是一輸入內容就卡，這咋回事??？”
我一想咋還會有這種問題呢？ vue 性能還是不錯的呀！直到我看了他的代碼才發現問題......
我特意寫了一個 demo ，模擬了一下它當時的業務場景，咱們一起來看下：
<script setup>
import { ref, watch } from 'vue'
// 模擬 十萬 條用戶數據
const allUsers = [...Array(100000)].map((_, i) => ({
id: i,
name: `sunday-${i}`
}))
const keyword = ref('')
const results = ref([])
// 錯誤示范：直接在 watch 中同步執行重計算
watch(keyword, (val) => {
results.value = allUsers.filter((user) =>
user.name.toLowerCase().includes(val.toLowerCase())
)
})
</script>
<template>
<div style="padding: 20px; max-width: 500px; margin: auto">
<h2>模擬實時搜索，輸入 sunday-xxx 就會出現卡頓的情況</h2>
<input
v-model="keyword"
placeholder="請輸入關鍵詞搜索"
style="width: 100%; padding: 8px; font-size: 16px"
/>
<ul>
<li v-for="user in results" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>運行上面的代碼之后，你會發現：
只要你在輸入框里快速輸入，比如輸入 sunday-xxx，頁面就會變得非?？D，甚至無法流暢打字，更別說什么“用戶體驗”了。
那么問題出在哪？其實很簡單，但非常隱蔽：
整個代碼的問題就在這里。
這段代碼的本質是：每輸入一個字符，就立刻對10萬條數據進行一次完整篩選！ 而 Vue 是同步響應式系統，這一整套計算邏輯會直接阻塞主線程，讓頁面渲染、輸入響應統統被“卡住”。
那么 假如我們希望在每次內容輸入都可以實時展示輸入結果，應該怎么辦呢？ 這里給大家提供兩種常見方案
使用防抖（debounce）減少觸發頻率
很多同學不知道 防抖 是什么意思，所以咱們先說一下：
所謂防抖，指的就是：“等你不動了我再動”
具體做法是：當你持續輸入時，我暫時不觸發搜索；只有你停下來超過一定時間（比如 300ms），我才去執行真正的搜索邏輯。
比較典型的就是在搜索框場景中。
在以上案例里出現的性能問題就是：輸入一個字符，就立刻觸發一次搜索邏輯。
這在數據量小的時候沒什么，但一旦你的數據變成幾萬條、幾十萬條，每個字符都去篩選一次，全量計算 + 全量渲染，就很容易造成頁面卡頓甚至假死。
這時候，我們就需要用到防抖（debounce）。
<script setup>
import { ref, watch } from 'vue'
import debounce from 'lodash.debounce'
// 輸入框的值
const keyword = ref('')
// 篩選結果
const results = ref([])
// 模擬 10 萬條數據
const allUsers = [...Array(100000)].map((_, i) => ({
id: i,
name: `sunday-${i}`
}))
// 防抖后的搜索函數，300ms 內多次觸發會被合并為一次
const doFilter = debounce((val) => {
results.value = allUsers.filter(user =>
user.name.toLowerCase().includes(val.toLowerCase())
)
}, 300)
// 監聽輸入框變化，交給防抖函數處理
watch(keyword, (val) => {
doFilter(val)
})
</script>那么此時，在內容輸入時就不會卡頓了。（PS：在進行 10 萬條數據篩選時，依然會卡頓）
使用 requestIdleCallback 把重計算放在瀏覽器空閑時執行
第二種方案就是使用 requestIdleCallback
這是一種標準的 性能優化 方案，它的核心思路是 讓耗性能的操作延后執行，直到瀏覽器主線程空閑時，再去執行
通俗解釋就是：“兄弟，眼下有更重要的事你先忙，這事不急，你空了再幫我處理?！?/span>
<script setup>
import { ref, watch } from 'vue'
const keyword = ref('')
const results = ref([])
const allUsers = [...Array(100000)].map((_, i) => ({
id: i,
name: `sunday-${i}`
}))
watch(keyword, (val) => {
requestIdleCallback(() => {
results.value = allUsers.filter(user =>
user.name.toLowerCase().includes(val.toLowerCase())
)
})
})
</script>通過這種方式可以 適當 進行優化，但是，需要注意 以上案例因為卡點是對 10 萬條 數據的 filter 導致的，所以 如果電腦性能不足，那么僅執行這一步 filter 操作，也會卡頓
那么有什么辦法，讓這個卡頓無論是在 輸入時 還是在 filter 時，都不卡頓嗎？
答案肯定也是 有的
終極方案：WebWorker
Web Worker 是 瀏覽器提供的多線程能力。利用它，我們就可以把這段 filter 的重計算任務從主線程挪到后臺線程里跑，這樣就能 解決 UI 阻塞的問題！
- 新建 filterWorker.js 文件
self.onmessage = function (e) {
const { list, keyword } = e.data
// filter 操作移動到這里
const filtered = list.filter((user) =>
user.name.toLowerCase().includes(keyword.toLowerCase())
)
self.postMessage(filtered)
}- 修改 vue 代碼，使用 webworker
<script setup>
import { ref, watch, onBeforeUnmount } from 'vue'
import debounce from 'lodash.debounce'
// 輸入框的值
const keyword = ref('')
// 篩選結果
const results = ref([])
// 模擬 10 萬條數據
const allUsers = [...Array(100000)].map((_, i) => ({
id: i,
name: `sunday-${i}`
}))
// 使用 webWorker 來優化整個的 filter 操作
// -------- 以下為修改的代碼部分 --------
const doFilter = debounce((val) => {
worker.postMessage({ list: allUsers, keyword: val })
}, 300)
const worker = new Worker(new URL('./filterWorker.js', import.meta.url), {
type: 'module'
})
worker.onmessage = (e) => {
results.value = e.data
}
onBeforeUnmount(() => {
worker.terminate()
})
watch(keyword, (val) => {})
// -------- 核心修改的代碼截止到這里 --------
// 監聽輸入框變化，交給防抖函數處理
watch(keyword, (val) => {
doFilter(val)
})
</script>至此，整個問題就幾乎完美解決了！
