From fa271b1759c79f0bd1fa378cb67fbcfc48b0c507 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Wed, 13 Dec 2023 01:10:57 +0800 Subject: [PATCH] perf: optimize extension loading speed (#75) --- src/contentScripts/index.ts | 76 ++++++++++---------------------- src/contentScripts/views/App.vue | 20 ++++++--- 2 files changed, 37 insertions(+), 59 deletions(-) diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index c1214205..c3d5c6a9 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -14,7 +14,9 @@ import 'vue-toastification/dist/index.css' const isFirefox: boolean = /Firefox/i.test(navigator.userAgent) -const beforeLoadedStyleEl = injectCSS(` +let beforeLoadedStyleEl: HTMLStyleElement +if (localStorage.getItem('darkMode')?.toLowerCase() === 'true') { + beforeLoadedStyleEl = injectCSS(` html.dark { background-color: hsl(230 12% 6%); } @@ -23,6 +25,14 @@ const beforeLoadedStyleEl = injectCSS(` opacity: 0; } `) +} +else { + beforeLoadedStyleEl = injectCSS(` + body { + opacity: 0; + } + `) +} // Add opacity transition effect for page loaded injectCSS(` @@ -34,6 +44,7 @@ injectCSS(` if (isFirefox) { let isFirstScriptExecute = true document.addEventListener('beforescriptexecute', () => { + document.documentElement.removeChild(beforeLoadedStyleEl) if (!isFirstScriptExecute) return @@ -41,61 +52,18 @@ if (isFirefox) { injectApp() }, 1000) isFirstScriptExecute = false - - const currentUrl = document.URL - - // Handling for video page to prevent the issue of video being played but the page remaining empty - if ( - // video page - /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl) - // anime playback & movie page - || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl) - // watch later playlist - || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl) - // favorite playlist - || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) - ) { - setTimeout(() => { - document.documentElement.removeChild(beforeLoadedStyleEl) - }, 400) - } - else { - window.onload = () => { - setTimeout(() => { - document.documentElement.removeChild(beforeLoadedStyleEl) - }, 300) - } - } }) } else { document.addEventListener('DOMContentLoaded', () => { + // nextTick(() => { + // setTimeout(() => { + // document.body.style.opacity = '1' + // document.documentElement.removeChild(beforeLoadedStyleEl) + // }, 300) + // }) + injectApp() - - const currentUrl = document.URL - - // Handling for video page to prevent the issue of video being played but the page remaining empty - if ( - // video page - /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl) - // anime playback & movie page - || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl) - // watch later playlist - || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl) - // favorite playlist - || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) - ) { - setTimeout(() => { - document.documentElement.removeChild(beforeLoadedStyleEl) - }, 400) - } - else { - window.onload = () => { - setTimeout(() => { - document.documentElement.removeChild(beforeLoadedStyleEl) - }, 300) - } - } }) } @@ -163,7 +131,10 @@ function injectApp() { const newStyleEl = document.createElement('link') newStyleEl.setAttribute('rel', 'stylesheet') newStyleEl.setAttribute('href', browser.runtime.getURL('dist/contentScripts/style.css')) - document.body.appendChild(newStyleEl) + document.documentElement.appendChild(newStyleEl) + newStyleEl.onload = () => { + document.body.style.opacity = '1' + } // inject svg icons const svgDiv = document.createElement('div') @@ -171,6 +142,7 @@ function injectApp() { shadowDOM.appendChild(svgDiv) document.body.appendChild(container) + const app = createApp(App) setupApp(app) app diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index 629765d2..0f0dc5a1 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -24,6 +24,7 @@ const scrollbarRef = ref() const showTopbarMask = ref(false) const dynamicComponentKey = ref(`dynamicComponent${Number(new Date())}`) const topbarRef = ref() +const mainAppOpacity = ref(0) const isVideoPage = computed(() => { if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(location.href)) @@ -89,11 +90,11 @@ watch(() => settings.value.adaptToOtherPageStyles, () => { }) onMounted(() => { - // nextTick(() => { - // setTimeout(() => { - // mainAppOpacity.value = 1 - // }, 1200) - // }) + nextTick(() => { + setTimeout(() => { + mainAppOpacity.value = 1 + }, 1000) + }) if (isHomePage()) { // Force overwrite Bilibili Evolved body tag & html tag background color @@ -171,22 +172,26 @@ function setAppAppearance() { mainAppRef.value?.classList.add('dark') document.querySelector('#bewly')?.classList.add('dark') document.documentElement.classList.add('dark') + localStorage.setItem('darkMode', 'true') } else if (settings.value.theme === 'light') { mainAppRef.value?.classList.remove('dark') document.querySelector('#bewly')?.classList.remove('dark') document.documentElement.classList.remove('dark') + localStorage.setItem('darkMode', 'false') } else if (settings.value.theme === 'auto') { if (currentColorScheme) { mainAppRef.value?.classList.add('dark') document.querySelector('#bewly')?.classList.add('dark') document.documentElement.classList.add('dark') + localStorage.setItem('darkMode', 'true') } else { mainAppRef.value?.classList.remove('dark') document.querySelector('#bewly')?.classList.remove('dark') document.documentElement.classList.remove('dark') + localStorage.setItem('darkMode', 'false') } } } @@ -253,9 +258,10 @@ provide('scrollbarRef', scrollbarRef)