diff --git a/.vitepress/config.js b/.vitepress/config.js
index d98851e..010f919 100644
--- a/.vitepress/config.js
+++ b/.vitepress/config.js
@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress'
-import { SearchPlugin } from '../src/plugins/search/plugin'
+import { SearchBackend, SearchFrontend } from '../src/plugins/search/plugin'
 import { SitemapStream } from 'sitemap'
 import { createWriteStream } from 'node:fs'
 import { resolve } from 'node:path'
@@ -192,281 +192,286 @@ export default defineConfig({
     },
     vite: {
         plugins: [
-            SearchPlugin({
-                profile: 'score',
-                tokenize: 'reverse',
-                cache: 50,
-                context: {
-                    resolution: 4,
-                    depth: 5,
-                },
-                fastupdate: false,
-                filter: [
-                    // array blacklist
-                    '的',
-                    '得',
-                    '地',
-                    '了',
-                    ' ',
-                    ...'!@#$%^&*！￥……&*/\\,.，。<>《》；：;:"\'“”’‘[]{}|()（）-—`_+'.split(
-                        ''
-                    ),
-                    'a',
-                    'about',
-                    'above',
-                    'after',
-                    'again',
-                    'against',
-                    'all',
-                    'also',
-                    'am',
-                    'an',
-                    // 'and',
-                    'any',
-                    'are',
-                    "aren't",
-                    'as',
-                    'at',
-                    //"back",
-                    'be',
-                    'because',
-                    'been',
-                    'before',
-                    'being',
-                    'below',
-                    //"between",
-                    'both',
-                    'but',
-                    'by',
-                    'can',
-                    'cannot',
-                    "can't",
-                    'come',
-                    'could',
-                    "couldn't",
-                    //"day",
-                    'did',
-                    "didn't",
-                    'do',
-                    'does',
-                    "doesn't",
-                    'doing',
-                    'dont',
-                    'down',
-                    'during',
-                    'each',
-                    'even',
-                    'few',
-                    'first',
-                    'for',
-                    'from',
-                    'further',
-                    'get',
-                    //"give",
-                    'go',
-                    //"good",
-                    'had',
-                    "hadn't",
-                    'has',
-                    "hasn't",
-                    'have',
-                    "haven't",
-                    'having',
-                    'he',
-                    'hed',
-                    //"hell",
-                    'her',
-                    'here',
-                    "here's",
-                    'hers',
-                    'herself',
-                    'hes',
-                    'him',
-                    'himself',
-                    'his',
-                    'how',
-                    "how's",
-                    'i',
-                    'id',
-                    'if',
-                    'ill',
-                    'im',
-                    'in',
-                    'into',
-                    'is',
-                    "isn't",
-                    'it',
-                    "it's",
-                    'itself',
-                    "i've",
-                    'just',
-                    'know',
-                    "let's",
-                    'like',
-                    //"look",
-                    'make',
-                    'me',
-                    'more',
-                    'most',
-                    "mustn't",
-                    'my',
-                    'myself',
-                    'new',
-                    'no',
-                    'nor',
-                    // 'not',
-                    'now',
-                    'of',
-                    'off',
-                    'on',
-                    'once',
-                    //"one",
-                    'only',
-                    // 'or',
-                    'other',
-                    'ought',
-                    'our',
-                    "our's",
-                    'ourselves',
-                    'out',
-                    'over',
-                    'own',
-                    //"people",
-                    'same',
-                    'say',
-                    'see',
-                    "shan't",
-                    'she',
-                    "she'd",
-                    'shell',
-                    'shes',
-                    'should',
-                    "shouldn't",
-                    'so',
-                    'some',
-                    'such',
-                    //"take",
-                    'than',
-                    'that',
-                    "that's",
-                    'the',
-                    'their',
-                    'theirs',
-                    'them',
-                    'themselves',
-                    'then',
-                    'there',
-                    "there's",
-                    'these',
-                    'they',
-                    "they'd",
-                    "they'll",
-                    "they're",
-                    "they've",
-                    //"think",
-                    'this',
-                    'those',
-                    'through',
-                    'time',
-                    'to',
-                    'too',
-                    //"two",
-                    //"under",
-                    'until',
-                    'up',
-                    'us',
-                    //"use",
-                    'very',
-                    'want',
-                    'was',
-                    "wasn't",
-                    'way',
-                    'we',
-                    'wed',
-                    'well',
-                    'were',
-                    "weren't",
-                    "we've",
-                    'what',
-                    "what's",
-                    'when',
-                    "when's",
-                    'where',
-                    "where's",
-                    'which',
-                    'while',
-                    'who',
-                    'whom',
-                    "who's",
-                    'why',
-                    "why's",
-                    'will',
-                    'with',
-                    "won't",
-                    //"work",
-                    'would',
-                    "wouldn't",
-                    //"year",
-                    'you',
-                    "you'd",
-                    "you'll",
-                    'your',
-                    "you're",
-                    "your's",
-                    'yourself',
-                    'yourselves',
-                    "you've",
-                ],
-                stemmer: {
-                    ational: 'ate',
-                    iveness: 'ive',
-                    fulness: 'ful',
-                    ousness: 'ous',
-                    ization: 'ize',
-                    tional: 'tion',
-                    biliti: 'ble',
-                    icate: 'ic',
-                    ative: '',
-                    alize: 'al',
-                    iciti: 'ic',
-                    entli: 'ent',
-                    ousli: 'ous',
-                    alism: 'al',
-                    ation: 'ate',
-                    aliti: 'al',
-                    iviti: 'ive',
-                    ement: '',
-                    enci: 'ence',
-                    anci: 'ance',
-                    izer: 'ize',
-                    alli: 'al',
-                    ator: 'ate',
-                    logi: 'log',
-                    ical: 'ic',
-                    ance: '',
-                    ence: '',
-                    ness: '',
-                    able: '',
-                    ible: '',
-                    ment: '',
-                    eli: 'e',
-                    bli: 'ble',
-                    ful: '',
-                    ant: '',
-                    ent: '',
-                    ism: '',
-                    ate: '',
-                    iti: '',
-                    ous: '',
-                    ive: '',
-                    ize: '',
-                    al: '',
-                    ou: '',
-                    er: '',
-                    ic: '',
-                },
-            }),
+            SearchFrontend(),
         ],
+        worker: {
+            plugins: [
+                SearchBackend({
+                    profile: 'score',
+                    tokenize: 'reverse',
+                    cache: 50,
+                    context: {
+                        resolution: 4,
+                        depth: 5,
+                    },
+                    fastupdate: false,
+                    filter: [
+                        // array blacklist
+                        '的',
+                        '得',
+                        '地',
+                        '了',
+                        ' ',
+                        ...'!@#$%^&*！￥……&*/\\,.，。<>《》；：;:"\'“”’‘[]{}|()（）-—`_+'.split(
+                            ''
+                        ),
+                        'a',
+                        'about',
+                        'above',
+                        'after',
+                        'again',
+                        'against',
+                        'all',
+                        'also',
+                        'am',
+                        'an',
+                        // 'and',
+                        'any',
+                        'are',
+                        "aren't",
+                        'as',
+                        'at',
+                        //"back",
+                        'be',
+                        'because',
+                        'been',
+                        'before',
+                        'being',
+                        'below',
+                        //"between",
+                        'both',
+                        'but',
+                        'by',
+                        'can',
+                        'cannot',
+                        "can't",
+                        'come',
+                        'could',
+                        "couldn't",
+                        //"day",
+                        'did',
+                        "didn't",
+                        'do',
+                        'does',
+                        "doesn't",
+                        'doing',
+                        'dont',
+                        'down',
+                        'during',
+                        'each',
+                        'even',
+                        'few',
+                        'first',
+                        'for',
+                        'from',
+                        'further',
+                        'get',
+                        //"give",
+                        'go',
+                        //"good",
+                        'had',
+                        "hadn't",
+                        'has',
+                        "hasn't",
+                        'have',
+                        "haven't",
+                        'having',
+                        'he',
+                        'hed',
+                        //"hell",
+                        'her',
+                        'here',
+                        "here's",
+                        'hers',
+                        'herself',
+                        'hes',
+                        'him',
+                        'himself',
+                        'his',
+                        'how',
+                        "how's",
+                        'i',
+                        'id',
+                        'if',
+                        'ill',
+                        'im',
+                        'in',
+                        'into',
+                        'is',
+                        "isn't",
+                        'it',
+                        "it's",
+                        'itself',
+                        "i've",
+                        'just',
+                        'know',
+                        "let's",
+                        'like',
+                        //"look",
+                        'make',
+                        'me',
+                        'more',
+                        'most',
+                        "mustn't",
+                        'my',
+                        'myself',
+                        'new',
+                        'no',
+                        'nor',
+                        // 'not',
+                        'now',
+                        'of',
+                        'off',
+                        'on',
+                        'once',
+                        //"one",
+                        'only',
+                        // 'or',
+                        'other',
+                        'ought',
+                        'our',
+                        "our's",
+                        'ourselves',
+                        'out',
+                        'over',
+                        'own',
+                        //"people",
+                        'same',
+                        'say',
+                        'see',
+                        "shan't",
+                        'she',
+                        "she'd",
+                        'shell',
+                        'shes',
+                        'should',
+                        "shouldn't",
+                        'so',
+                        'some',
+                        'such',
+                        //"take",
+                        'than',
+                        'that',
+                        "that's",
+                        'the',
+                        'their',
+                        'theirs',
+                        'them',
+                        'themselves',
+                        'then',
+                        'there',
+                        "there's",
+                        'these',
+                        'they',
+                        "they'd",
+                        "they'll",
+                        "they're",
+                        "they've",
+                        //"think",
+                        'this',
+                        'those',
+                        'through',
+                        'time',
+                        'to',
+                        'too',
+                        //"two",
+                        //"under",
+                        'until',
+                        'up',
+                        'us',
+                        //"use",
+                        'very',
+                        'want',
+                        'was',
+                        "wasn't",
+                        'way',
+                        'we',
+                        'wed',
+                        'well',
+                        'were',
+                        "weren't",
+                        "we've",
+                        'what',
+                        "what's",
+                        'when',
+                        "when's",
+                        'where',
+                        "where's",
+                        'which',
+                        'while',
+                        'who',
+                        'whom',
+                        "who's",
+                        'why',
+                        "why's",
+                        'will',
+                        'with',
+                        "won't",
+                        //"work",
+                        'would',
+                        "wouldn't",
+                        //"year",
+                        'you',
+                        "you'd",
+                        "you'll",
+                        'your',
+                        "you're",
+                        "your's",
+                        'yourself',
+                        'yourselves',
+                        "you've",
+                    ],
+                    stemmer: {
+                        ational: 'ate',
+                        iveness: 'ive',
+                        fulness: 'ful',
+                        ousness: 'ous',
+                        ization: 'ize',
+                        tional: 'tion',
+                        biliti: 'ble',
+                        icate: 'ic',
+                        ative: '',
+                        alize: 'al',
+                        iciti: 'ic',
+                        entli: 'ent',
+                        ousli: 'ous',
+                        alism: 'al',
+                        ation: 'ate',
+                        aliti: 'al',
+                        iviti: 'ive',
+                        ement: '',
+                        enci: 'ence',
+                        anci: 'ance',
+                        izer: 'ize',
+                        alli: 'al',
+                        ator: 'ate',
+                        logi: 'log',
+                        ical: 'ic',
+                        ance: '',
+                        ence: '',
+                        ness: '',
+                        able: '',
+                        ible: '',
+                        ment: '',
+                        eli: 'e',
+                        bli: 'ble',
+                        ful: '',
+                        ant: '',
+                        ent: '',
+                        ism: '',
+                        ate: '',
+                        iti: '',
+                        ous: '',
+                        ive: '',
+                        ize: '',
+                        al: '',
+                        ou: '',
+                        er: '',
+                        ic: '',
+                    },
+                }),
+            ],
+        },
     },
 
     head: [
diff --git a/src/plugins/search/NavBarSearch.vue b/src/plugins/search/NavBarSearch.vue
index d3f1b9c..aa93de8 100644
--- a/src/plugins/search/NavBarSearch.vue
+++ b/src/plugins/search/NavBarSearch.vue
@@ -7,6 +7,7 @@ const open = ref(false)
 const searchBox = ref()
 
 const openSearch = () => {
+    searchBox.value?.load()
     setTimeout(() => {
         searchBox.value?.focus()
     }, 100)
diff --git a/src/plugins/search/SearchBox.vue b/src/plugins/search/SearchBox.vue
index 3314d2f..a299fc2 100644
--- a/src/plugins/search/SearchBox.vue
+++ b/src/plugins/search/SearchBox.vue
@@ -1,50 +1,29 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
 import { useData } from 'vitepress'
 import FlexSearch from 'flexsearch'
 import FlexLogo from './flex-logo.svg'
 import SearchItem from './SearchItem.vue'
+import {useIndexer} from './indexOperator.js'
 
 const emit = defineEmits(['close'])
 
 const { localePath } = useData()
+const indexer = useIndexer()
 
 const searchTerm = ref()
 const origin = ref('')
 const input = ref()
-const PREVIEW_LOOKUP = ref()
-const searchIndex = ref()
-
-const indexLoaded = computed(
-    () => !!searchIndex.value && !!PREVIEW_LOOKUP.value
-)
-
-const result = computed(() => {
-    if (indexLoaded.value && searchTerm.value) {
-        const searchResults = searchIndex.value.search(searchTerm.value, 10)
-        const search = []
-
-        for (let i = 0; i < searchResults.length; i++) {
-            const id = searchResults[i]
-            const item = PREVIEW_LOOKUP.value[id]
-
-            const title = item['t']
-            const preview = item['p']
-            const link = item['l']
-            const anchor = item['a']
-            const pageTitle = item['T']
-            const pageLink = origin.value + link.slice(0, link.indexOf('#'))
-            search.push({
-                id: i,
-                link,
-                title,
-                preview,
-                anchor,
-                pageTitle,
-                pageLink,
-            })
-        }
-        return search
+const indexLoading = ref(false)
+const indexLoaded = ref(false)
+
+const result = ref([])
+
+watch([indexLoaded, searchTerm], async ([loaded, query]) => {
+    if (loaded && query) {
+        result.value = await indexer.search(query, origin.value)
+    } else if (query === '') {
+        result.value = []
     }
 })
 
@@ -65,48 +44,18 @@ const GroupBy = (array, func) => {
 }
 
 async function loadSearchIndex() {
-    const [{ indexData, options }, { previewLookup }] = await Promise.all([
-        import('virtual:search-index'),
-        import('virtual:search-preview'),
-    ])
-    PREVIEW_LOOKUP.value = previewLookup
-    const idx = FlexSearch({
-        ...options,
-        encode: (str) => {
-            const filter = options.filter ?? []
-            const stemmer = options.stemmer
-                ? Object.entries(options.stemmer)
-                : []
-
-            const eng = Array.from(str.toLowerCase().matchAll(/[a-z0-9]+/gi))
-                .map(n => n[0])
-                .map(n => {
-                    for (const [key, value] of stemmer) {
-                        if (n.endsWith(key)) return n.slice(0, -key.length) + value
-                    }
-                    return n
-                })
-            const chs = str.replaceAll(/[a-zA-Z0-9]+/g, '').split('')
-            return eng
-                .concat(chs)
-                .filter((n) => !!n)
-                .filter((n) => n.trim() !== '')
-                .filter((n) => !filter.includes(n))
-        },
-    })
-
-    idx.registry = indexData.reg
-    idx.cfg = indexData.cfg
-    idx.map = indexData.map
-    idx.ctx = indexData.ctx
-
-    searchIndex.value = idx
+    if (indexLoading.value || indexLoaded.value) return
+    indexLoading.value = true
+    try {
+        await indexer.loadIndex()
+        indexLoaded.value = true
+    } finally {
+        indexLoading.value = false
+    }
 }
 
 onMounted(() => {
     origin.value = window.location.origin + localePath.value
-
-    setTimeout(() => loadSearchIndex(), 0)
 })
 
 function cleanSearch() {
@@ -115,6 +64,7 @@ function cleanSearch() {
 }
 
 defineExpose({
+    load: () => loadSearchIndex(),
     focus: () => input.value.focus(),
     clear: () => (searchTerm.value = ''),
 })
@@ -210,7 +160,9 @@ defineExpose({
 .search-list {
     padding: 1rem;
     min-height: 150px;
-    max-height: calc(100vh - 230px);
+    height: 100%;
+    // max-height: calc(100vh - 230px);
+    flex-grow: 1;
     overflow-x: auto;
 }
 
@@ -266,12 +218,22 @@ defineExpose({
     /* box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64; */
     overflow: hidden;
     border: 1px solid #222222;
+
+    height: 80%;
+}
+
+.modal-content {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
 }
 
 @media (max-width: 768px) {
     .modal {
         max-width: 100%;
         border-radius: 0px;
+        margin: 60px 0 0 0;
+        height: 100%;
     }
 }
 
diff --git a/src/plugins/search/indexOperator.js b/src/plugins/search/indexOperator.js
new file mode 100644
index 0000000..558d682
--- /dev/null
+++ b/src/plugins/search/indexOperator.js
@@ -0,0 +1,56 @@
+function generateCallbackID() {
+    return Date.now().toString(36) + Math.random().toString(36).slice(2)
+}
+
+export function useIndexer() {
+    const worker = new Worker(new URL('./indexWorker.js', import.meta.url), {
+        type: 'module',
+    })
+    
+    const eventBus = {
+        listeners: {},
+        on(callbackID, callback) {
+            this.listeners[callbackID] = callback
+        },
+        emit(callbackID, data) {
+            this.listeners[callbackID]?.(data)
+            delete this.listeners[callbackID]
+        },
+    }
+
+    worker.addEventListener('message', (e) => {
+        const { callbackID, ...data } = e.data
+        eventBus.emit(callbackID, data)
+    })
+    
+    return {
+        loadIndex() {
+            const callbackID = generateCallbackID()
+            
+            return new Promise((resolve, reject) => {
+                eventBus.on(callbackID, (event) => {
+                    if (event.type === 'success') {
+                        resolve(event.result)
+                    } else {
+                        reject(event.result)
+                    }
+                })
+                worker.postMessage({ type: 'loadIndex', callbackID })
+            })
+        },
+        search(query, origin) {
+            const callbackID = generateCallbackID()
+            
+            return new Promise((resolve, reject) => {
+                eventBus.on(callbackID, (event) => {
+                    if (event.type === 'success') {
+                        resolve(event.result)
+                    } else {
+                        reject(event.result)
+                    }
+                })
+                worker.postMessage({ type: 'search', callbackID, query, origin })
+            })
+        },
+    }
+}
diff --git a/src/plugins/search/indexWorker.js b/src/plugins/search/indexWorker.js
new file mode 100644
index 0000000..4397009
--- /dev/null
+++ b/src/plugins/search/indexWorker.js
@@ -0,0 +1,90 @@
+import FlexSearch from 'flexsearch'
+
+const state = {
+    idx: null,
+    preview: null,
+}
+
+async function loadIndex() {
+    const [{ indexData, options }, { previewLookup }] = await Promise.all([
+        import('virtual:search-index'),
+        import('virtual:search-preview'),
+    ])
+
+    state.idx = FlexSearch({
+        ...options,
+        encode: (str) => {
+            const filter = options.filter ?? []
+            const stemmer = options.stemmer ? Object.entries(options.stemmer) : []
+
+            const eng = Array.from(str.toLowerCase().matchAll(/[a-z0-9]+/gi))
+                .map((n) => n[0])
+                .map((n) => {
+                    for (const [key, value] of stemmer) {
+                        if (n.endsWith(key)) return n.slice(0, -key.length) + value
+                    }
+                    return n
+                })
+            const chs = str.replaceAll(/[a-zA-Z0-9]+/g, '').split('')
+            return eng
+                .concat(chs)
+                .filter((n) => !!n)
+                .filter((n) => n.trim() !== '')
+                .filter((n) => !filter.includes(n))
+        },
+    })
+
+    state.idx.registry = indexData.reg
+    state.idx.cfg = indexData.cfg 
+    state.idx.map = indexData.map
+    state.idx.ctx = indexData.ctx
+
+    state.preview = previewLookup
+}
+
+async function search({ query, origin }) {
+    if (!state.idx || !state.preview) throw new Error('index not ready')
+    const searchResults = state.idx.search(query, 10)
+    const search = []
+
+    for (let i = 0; i < searchResults.length; i++) {
+        const id = searchResults[i]
+        const item = state.preview[id]
+
+        const title = item['t']
+        const preview = item['p']
+        const link = item['l']
+        const anchor = item['a']
+        const pageTitle = item['T']
+        const pageLink = origin + link.slice(0, link.indexOf('#'))
+        search.push({
+            id: i,
+            link,
+            title,
+            preview,
+            anchor,
+            pageTitle,
+            pageLink,
+        })
+    }
+    return search
+}
+
+const exported = {
+    loadIndex,
+    search,
+}
+ 
+self.addEventListener(
+    'message',
+    async function (e) {
+        const { type, callbackID, ...args } = e.data
+        try {
+            const result = await exported[type](args)
+            self.postMessage({ type: 'success', callbackID, result })
+        } catch (e) {
+            self.postMessage({ type: 'error', callbackID, result: e })
+        }
+    },
+    false
+)
diff --git a/src/plugins/search/plugin.js b/src/plugins/search/plugin.js
index 4dff3dd..ad79fc7 100644
--- a/src/plugins/search/plugin.js
+++ b/src/plugins/search/plugin.js
@@ -2,19 +2,10 @@ import { buildIndex, buildPreview } from './index-builder'
 import { dirname, resolve } from 'path'
 import { fileURLToPath } from 'url'
 
-export function SearchPlugin(options) {
-    /** @type {import('vite').ResolvedConfig} */
-    let config
-    const virtualIndexModuleId = 'virtual:search-index'
-    const resolvedVirtualIndexModuleId = '\0' + virtualIndexModuleId
-    const virtualPreviewModuleId = 'virtual:search-preview'
-    const resolvedVirtualPreviewModuleId = '\0' + virtualPreviewModuleId
+export function SearchFrontend() {
     return {
-        name: 'vite-plugin-search',
+        name: 'vite-plugin-search-frontend',
         enforce: 'pre',
-        configResolved(resolvedConfig) {
-            config = resolvedConfig
-        },
 
         config: () => {
             const dir = dirname(fileURLToPath(import.meta.url))
@@ -30,6 +21,22 @@ export function SearchPlugin(options) {
                 },
             }
         },
+    }
+
+}
+
+export function SearchBackend(options) {
+    /** @type {import('vite').ResolvedConfig} */
+    let config
+    const virtualIndexModuleId = 'virtual:search-index'
+    const resolvedVirtualIndexModuleId = '\0' + virtualIndexModuleId
+    const virtualPreviewModuleId = 'virtual:search-preview'
+    const resolvedVirtualPreviewModuleId = '\0' + virtualPreviewModuleId
+    return {
+        name: 'vite-plugin-search-backend',
+        configResolved(resolvedConfig) {
+            config = resolvedConfig
+        },
 
         async resolveId(id) {
             switch (id) {
@@ -41,6 +48,7 @@ export function SearchPlugin(options) {
         },
 
         async load(id) {
+            console.log(id)
             if (config.build.ssr || config.command === 'serve') {
                 switch (id) {
                     case resolvedVirtualIndexModuleId: