上一版全站共用一个 useDark 之后,它一进页面仍要把 <html> 的 class 同步两遍,每遍都插 style + getComputedStyle 逼整页重算。class 已经对了就跳过,只有真要切换时才走原来那套。 CPU 降速 6 倍下每页省约 25ms;切换暗色、暗色下刷新、切回亮色都核过。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
f01870c072
commit
0c94f2db87
1 file changed
+10
-1
@@ -13,4 +13,13 @@ import { createGlobalState, useDark as useVueUseDark } from '@vueuse/core'
|
||||
* 切筛选再来 30 次,右栏换一条又是三四次。2026-11 实测(生产构建、CPU 降速 6 倍)首屏
|
||||
* 光这一处就占了 1.3 秒。全站共用一个之后只在第一次挂载时同步,后面的调用都是读同一个 ref。
|
||||
*/
|
||||
export const useDark = createGlobalState(() => useVueUseDark())
|
||||
export const useDark = createGlobalState(() =>
|
||||
useVueUseDark({
|
||||
// 剩下的那一次(一进页面它还要同步两遍)也省掉:<html> 上的 class 已经对了就不动。
|
||||
// 只有真要切换时才走它原来那套(关过渡 + 重算),切暗色不会有颜色慢慢渐变的过渡
|
||||
onChanged(dark, defaultHandler, mode) {
|
||||
if (document.documentElement.classList.contains('dark') === dark) return
|
||||
defaultHandler(mode)
|
||||
},
|
||||
}),
|
||||
)
|
||||
Reference in new issue
Block a user