refactor: Improve content loading speed

ronparkdev · Jun 19, 2024 · d68308c · d68308c
1 parent 955855f
commit d68308c
Showing 1 changed file with 48 additions and 45 deletions.
diff --git a/src/content.tsx b/src/content.tsx
@@ -5,6 +5,8 @@ void (async () => {
   let lastTargets: TargetConfig[] = []
   let mode: 'standby' | 'addTarget' = 'standby'
 
+  // Top priority functions (for save mouse position for contextmenu)
+
   const [{ DomService }] = await Promise.all([import('services/dom')])
 
   document.addEventListener(
@@ -15,22 +17,57 @@ void (async () => {
     { capture: true },
   )
 
-  const [
-    { default: getXPath },
-    { ConfigService },
-    { DomHighlightService },
-    { HotKeyService },
-    { UrlUtils },
-    { ChromeStorageUtils },
-  ] = await Promise.all([
-    import('get-xpath'),
+  // Middle priority functions (for hotkey)
+
+  const [{ ConfigService }, { HotKeyService }, { UrlUtils }, { ChromeStorageUtils }] = await Promise.all([
     import('services/config'),
-    import('services/domHighlight'),
     import('services/hotKey'),
     import('utils/url'),
     import('utils/chromeStorage'),
   ])
 
+  ChromeStorageUtils.get<TargetConfig[]>(ConfigService.TARGETS_KEY, []).then(targets => {
+    lastTargets = targets
+  })
+
+  ChromeStorageUtils.listen<TargetConfig[]>(ConfigService.TARGETS_KEY, targets => {
+    lastTargets = targets
+  })
+
+  document.addEventListener('keydown', async event => {
+    const url = UrlUtils.getCurrentUrl()
+    const hotKey = HotKeyService.parse(event)
+
+    const hitTargets = lastTargets
+      .filter(target => {
+        if (target.url.endsWith('/*')) {
+          if (url.endsWith('/')) {
+            return url.startsWith(target.url.replace('/*', '/'))
+          } else {
+            return url.startsWith(target.url.replace('/*', ''))
+          }
+        } else {
+          return url === target.url
+        }
+      })
+      .filter(target => HotKeyService.checkIsSame(hotKey, target.hotKey))
+
+    hitTargets
+      .flatMap(target => DomService.findElementsByXPath(target.selector))
+      .forEach(element => {
+        if (element instanceof HTMLElement) {
+          element.click()
+        }
+      })
+  })
+
+  // Low priority functions (for setting)
+
+  const [{ default: getXPath }, { DomHighlightService }] = await Promise.all([
+    import('get-xpath'),
+    import('services/domHighlight'),
+  ])
+
   document.addEventListener('mousemove', event => {
     if (mode === 'addTarget') {
       const element = DomService.getElementFromPoint(event.clientX, event.clientY)
@@ -59,16 +96,9 @@ void (async () => {
     }
   })
 
-  ChromeStorageUtils.get<TargetConfig[]>(ConfigService.TARGETS_KEY, []).then(targets => {
-    lastTargets = targets
-  })
-  ChromeStorageUtils.listen<TargetConfig[]>(ConfigService.TARGETS_KEY, targets => {
-    lastTargets = targets
-  })
-
   DomHighlightService.injectStyle()
 
-  const showDialog = ({ element }: { element: HTMLElement }) => {
+  const showDialog = async ({ element }: { element: HTMLElement }) => {
     const selector = getXPath(element)
     const defaultUrl = UrlUtils.getCurrentUrl()
     void render({ visible: true, defaultSelector: selector, defaultUrl })
@@ -128,31 +158,4 @@ void (async () => {
       mode = 'addTarget'
     }
   })
-
-  document.addEventListener('keydown', async event => {
-    const url = UrlUtils.getCurrentUrl()
-    const hotKey = HotKeyService.parse(event)
-
-    const hitTargets = lastTargets
-      .filter(target => {
-        if (target.url.endsWith('/*')) {
-          if (url.endsWith('/')) {
-            return url.startsWith(target.url.replace('/*', '/'))
-          } else {
-            return url.startsWith(target.url.replace('/*', ''))
-          }
-        } else {
-          return url === target.url
-        }
-      })
-      .filter(target => HotKeyService.checkIsSame(hotKey, target.hotKey))
-
-    hitTargets
-      .flatMap(target => DomService.findElementsByXPath(target.selector))
-      .forEach(element => {
-        if (element instanceof HTMLElement) {
-          element.click()
-        }
-      })
-  })
 })()