perf: release 4.10.0 performance optimization (notionnext-org#4163)

* perf: code-split landing and typography theme blocks

* perf: defer nav theme non-critical components via dynamic import

* perf: defer non-critical plugin loads and lazy-load search highlight

* docs: add performance optimization log and bump patch version

* perf: optimize search highlighting and Windows lighthouse audit

* perf: make theme scroll listeners passive

* fix: make MenuItemDrop scroll listener passive

* perf(next): throttle layout scroll updates with rAF

* chore: bump patch version after next theme scroll optimization

* perf: throttle theme progress listeners

* perf: coalesce next and endspace scroll updates

* perf: slim client page data payloads

* test: cover notice page link conversion

* docs: prepare 4.10.0 performance release

Author: tangly1024

__tests__/lib/db/notion/convertInnerUrl.test.js

@@ -0,0 +1,62 @@
+import { convertInnerUrl } from '@/lib/db/notion/convertInnerUrl'
+
+describe('convertInnerUrl', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    window.history.replaceState({}, '', 'http://localhost/notice')
+  })
+
+  it('maps notice links to published Page records from allLinkPages', () => {
+    document.body.innerHTML = `
+      <div id="notion-article">
+        <a class="notion-link" href="https://www.notion.so/4aea95fb3fd5fcf81846aaaaaaaaaaaa" target="_blank">Links</a>
+      </div>
+    `
+
+    convertInnerUrl({
+      allPages: [
+        {
+          title: 'Links',
+          type: 'Page',
+          href: '/links',
+          slug: 'links',
+          short_id: 'fcf8-1846-aaaaaaaaaaaa'
+        }
+      ],
+      lang: undefined
+    })
+
+    expect(document.querySelector('a.notion-link')).toHaveAttribute(
+      'href',
+      '/links'
+    )
+  })
+
+  it('does not resolve Page links when only post navigation data is present', () => {
+    const rawNotionUrl =
+      'https://www.notion.so/4aea95fb3fd5fcf81846aaaaaaaaaaaa'
+    document.body.innerHTML = `
+      <div id="notion-article">
+        <a class="notion-link" href="${rawNotionUrl}" target="_blank">Links</a>
+      </div>
+    `
+
+    convertInnerUrl({
+      allPages: [
+        {
+          title: 'Post only',
+          type: 'Post',
+          href: '/post-only',
+          slug: 'post-only',
+          short_id: '1111-2222-bbbbbbbbbbbb'
+        }
+      ],
+      lang: undefined
+    })
+
+    expect(document.querySelector('a.notion-link')).toHaveAttribute(
+      'href',
+      rawNotionUrl
+    )
+  })
+})

components/ExternalPlugins.js

@@ -3,7 +3,7 @@ import { convertInnerUrl } from '@/lib/db/notion/convertInnerUrl'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { GlobalStyle } from './GlobalStyle'
 import { initGoogleAdsense } from './GoogleAdsense'
 
@@ -132,36 +132,60 @@ const ExternalPlugin = props => {
   const UMAMI_HOST = siteConfig('UMAMI_HOST', null, NOTION_CONFIG)
   const UMAMI_ID = siteConfig('UMAMI_ID', null, NOTION_CONFIG)
 
-  // 自定义样式css和js引入
-  if (isBrowser) {
-    // 初始化AOS动画
-    // 静态导入本地自定义样式
-    loadExternalResource('/css/custom.css', 'css')
-    loadExternalResource('/js/custom.js', 'js')
+  const externalCssList = useMemo(() => {
+    return Array.isArray(CUSTOM_EXTERNAL_CSS)
+      ? CUSTOM_EXTERNAL_CSS.filter(url => !!url)
+      : []
+  }, [CUSTOM_EXTERNAL_CSS])
 
-    // 自动添加图片阴影
-    if (IMG_SHADOW) {
-      loadExternalResource('/css/img-shadow.css', 'css')
-    }
+  const externalJsList = useMemo(() => {
+    return Array.isArray(CUSTOM_EXTERNAL_JS)
+      ? CUSTOM_EXTERNAL_JS.filter(url => !!url)
+      : []
+  }, [CUSTOM_EXTERNAL_JS])
 
-    if (ANIMATE_CSS_URL) {
-      loadExternalResource(ANIMATE_CSS_URL, 'css')
+  useEffect(() => {
+    if (!isBrowser) {
+      return
     }
 
-    // 导入外部自定义脚本
-    if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
-      for (const url of CUSTOM_EXTERNAL_JS) {
-        loadExternalResource(url, 'js')
+    const scheduleTask = callback => {
+      if (window.requestIdleCallback) {
+        const taskId = window.requestIdleCallback(callback)
+        return () => window.cancelIdleCallback(taskId)
       }
+      const timeoutId = window.setTimeout(callback, 0)
+      return () => window.clearTimeout(timeoutId)
     }
 
-    // 导入外部自定义样式
-    if (CUSTOM_EXTERNAL_CSS && CUSTOM_EXTERNAL_CSS.length > 0) {
-      for (const url of CUSTOM_EXTERNAL_CSS) {
-        loadExternalResource(url, 'css')
-      }
+    const cancelTasks = []
+    cancelTasks.push(
+      scheduleTask(() => {
+        loadExternalResource('/css/custom.css', 'css')
+        loadExternalResource('/js/custom.js', 'js')
+
+        if (IMG_SHADOW) {
+          loadExternalResource('/css/img-shadow.css', 'css')
+        }
+
+        if (ANIMATE_CSS_URL) {
+          loadExternalResource(ANIMATE_CSS_URL, 'css')
+        }
+
+        for (const url of externalJsList) {
+          loadExternalResource(url, 'js')
+        }
+
+        for (const url of externalCssList) {
+          loadExternalResource(url, 'css')
+        }
+      })
+    )
+
+    return () => {
+      cancelTasks.forEach(cancel => cancel?.())
     }
-  }
+  }, [ANIMATE_CSS_URL, IMG_SHADOW, externalCssList, externalJsList])
 
   const router = useRouter()
   useEffect(() => {
@@ -182,13 +206,17 @@ const ExternalPlugin = props => {
   }, [router])
 
   useEffect(() => {
-    // 执行注入脚本
-    // eslint-disable-next-line no-eval
-    if (GLOBAL_JS && GLOBAL_JS.trim() !== '') {
-      // console.log('Inject JS:', GLOBAL_JS);
+    if (!isBrowser || !GLOBAL_JS || GLOBAL_JS.trim() === '') {
+      return
+    }
+
+    try {
+      // eslint-disable-next-line no-eval
+      eval(GLOBAL_JS)
+    } catch (error) {
+      console.error('Failed to execute GLOBAL_JS:', error)
     }
-    eval(GLOBAL_JS)
-  })
+  }, [GLOBAL_JS])
 
   if (DISABLE_PLUGIN) {
     return null

components/FacebookMessenger.js

@@ -19,7 +19,7 @@ export default function Messenger() {
 
   // 延时7秒，或页面滚动时加载该组件
   useEffect(() => {
-    window.addEventListener('scroll', showTheComponent);
+    window.addEventListener('scroll', showTheComponent, { passive: true });
     setTimeout(() => {
       showTheComponent()
     }, 7000);

components/Mark.js

@@ -1,28 +1,67 @@
 import { loadExternalResource } from '@/lib/utils'
 
+let markJsLoadPromise = null
+
+function escapeSearchKeyword(search) {
+  return String(search).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function runOnIdle() {
+  return new Promise(resolve => {
+    const done = () => resolve()
+
+    if (typeof window === 'undefined' || typeof window.requestIdleCallback !== 'function') {
+      setTimeout(done, 0)
+      return
+    }
+
+    window.requestIdleCallback(done, { timeout: 800 })
+  })
+}
+
+function ensureMarkScript() {
+  if (!markJsLoadPromise) {
+    markJsLoadPromise = loadExternalResource(
+      'https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js',
+      'js'
+    )
+  }
+  return markJsLoadPromise
+}
+
 /**
- * 将搜索结果的关键词高亮
+ * Highlights search keywords in DOM safely without blocking main-thread work.
  */
 export default async function replaceSearchResult({ doms, search, target }) {
-  if (!doms || !search || !target) {
+  if (!doms || !search || !target || typeof window === 'undefined') {
+    return
+  }
+
+  const keyword = String(search).trim()
+  if (!keyword) {
     return
   }
 
   try {
-    await loadExternalResource('https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js', 'js')
+    await ensureMarkScript()
+    await runOnIdle()
+
     const Mark = window.Mark
+    if (!Mark) return
+
+    const regex = new RegExp(escapeSearchKeyword(keyword), 'gim')
+
+    const markContainer = container => {
+      const instance = new Mark(container)
+      instance.markRegExp(regex, target)
+    }
+
     if (doms instanceof HTMLCollection) {
-      for (const container of doms) {
-        const re = new RegExp(search, 'gim')
-        const instance = new Mark(container)
-        instance.markRegExp(re, target)
-      }
+      Array.from(doms).forEach(markContainer)
     } else {
-      const re = new RegExp(search, 'gim')
-      const instance = new Mark(doms)
-      instance.markRegExp(re, target)
+      markContainer(doms)
     }
   } catch (error) {
-    console.error('markjs 加载失败', error)
+    console.error('Search highlight failed:', error)
   }
 }

docs/performance/2026-06-03-theme-performance-optimization-phase-1.md

@@ -0,0 +1,60 @@
+# 涓婚鎬ц兘浼樺寲锛堢 1 杞級
+
+鏃ユ湡锛?026-06-03
+鍒嗘敮锛歚codex/performance-optimization-main`
+鐗堟湰鐩爣锛歚4.10.0`
+
+## 鏈疆鍙樻洿
+
+### 1) 鍏ㄥ眬鎻掍欢鍔犺浇浼樺寲
+- 鏂囦欢锛歚components/ExternalPlugins.js`
+- 鏀瑰姩锛?  - 灏嗚嚜瀹氫箟澶栭儴璧勬簮鍔犺浇浠庣粍浠舵覆鏌撴湡绉诲叆 `useEffect`锛屽苟鏀逛负寮傛璋冨害锛坄requestIdleCallback` / `setTimeout`锛夋墽琛屻€?  - 瀵?`CUSTOM_EXTERNAL_CSS`銆乣CUSTOM_EXTERNAL_JS` 鍋?`useMemo` 杩囨护锛岄伩鍏嶉噸澶嶈绠椾笌閲嶅娉ㄥ叆銆?  - 灏?`GLOBAL_JS` 鎵ц浠庢棤渚濊禆鐨勫壇浣滅敤鏀逛负 `useEffect([GLOBAL_JS])`锛屽苟鍔?`try/catch`锛岄伩鍏嶆瘡娆?render 閲嶅鎵ц瀵艰嚧閲嶅娉ㄥ叆涓庢綔鍦ㄩ樆濉炪€?
+### 2) Typography 鎼滅储楂樹寒鎸夐渶鍔犺浇
+- 鏂囦欢锛歚themes/typography/index.js`
+- 鏀瑰姩锛?  - `LayoutSearch` 涓皢 `replaceSearchResult` 杩佺Щ涓烘寜闇€鍔ㄦ€?import锛堜粎鍦ㄦ悳绱㈤〉鐢熸晥鏃惰Е鍙戯級锛岄伩鍏嶉椤?鏂囩珷椤靛垵濮嬪寘瑁瑰叆杩欓儴鍒嗕唬鐮併€?  - 灏嗘悳绱㈤珮浜寕杞芥敼涓哄欢鍚庢墽琛岋紙`requestIdleCallback` 鎴?fallback timeout锛夛紝闄嶄綆棣栧睆闃诲銆?
+### 3) 鎼滅储楂樹寒閫昏緫缁熶竴浼樺寲锛堣法涓婚锛?- 鏂囦欢锛歚components/Mark.js`
+- 鏀瑰姩锛?  - 灏?`mark.js` 搴撳姞杞芥敼涓轰竴娆℃€?Promise 缂撳瓨锛岄伩鍏嶅悓涓€娆′細璇濆唴閲嶅璇锋眰銆?  - 瀵规悳绱㈠叧閿瘝杩涜瀹夊叏杞箟锛岄伩鍏嶅紓甯告鍒欏鑷撮珮浜矾寰勪腑鏂€?  - 鐢?`requestIdleCallback`锛堝吋瀹?fallback锛夊皢楂樹寒鎵ц寤跺悗锛屽噺灏戠洿鎺ラ樆濉炰富绾跨▼楂樺嘲銆?  - 淇濇寔鐜版湁楂樹寒杈撳嚭锛坈lassName/element锛変笌閰嶇疆涓嶅彉銆?
+### 4) 涓婚鎬ц兘瀹¤鑴氭湰璺ㄥ钩鍙板吋瀹逛慨澶?- 鏂囦欢锛歚scripts/audit-theme-performance.js`
+- 鏀瑰姩锛?  - 鎸夊钩鍙伴€夋嫨 `lighthouse` 鍙墽琛岃矾寰勶紙Windows 浼樺厛 `lighthouse.cmd`锛屾湭鍛戒腑鏃堕檷绾у埌 `lighthouse` 鎴栧寘鍐?CLI 鍏ュ彛锛夈€?  - `runLighthouse` 鎵ц璺緞鏀逛负鍙橀噺鍖栵紝閬垮厤 Windows 涓?`spawnSync` 璇嗗埆闂銆?  - `main` 鏀逛负鍚屾娴佺▼锛岀Щ闄?`async`/.`catch` 鐨勪笉鍖归厤璋冪敤銆?
+### 5) 涓婚绾ф粴鍔ㄧ洃鍚紭鍖栵紙璺ㄤ富棰橈級
+- 鏂囦欢锛歚themes/*/components/*.js`
+- 鏀瑰姩锛?  - 灏嗗ぇ閲忎粎璇绘粴鍔ㄤ綅缃?杩涘害鐨勭洃鍚櫒鏀逛负 `passive: true` 娉ㄥ唽锛屽噺灏戞粴鍔ㄤ簨浠跺涓荤嚎绋嬭皟搴﹀帇鍔涖€?  - 瑕嗙洊鑼冨洿锛欳atalog銆丳rogress銆佹诞鍔ㄥ鑸€丅ackToTop 绛夊ぇ閲忎富棰樺唴婊氬姩鍦烘櫙锛堝叡 70+ 澶勶級銆?  - 淇濇寔琛屼负涓€鑷达紙鐩戝惉閫昏緫鍜屽嵏杞戒粛淇濇寔鍘熸湁鍥炶皟鍖归厤锛夈€?
+## 楠岃瘉
+
+- `yarn type-check`锛氶€氳繃
+- `yarn build`锛氶€氳繃
+- `yarn lint`锛氭湰鏈虹幆澧冩姤閿欌€滄湭璇嗗埆 pages/app 鐩綍鈥濓紝鏆傛湭閫氳繃璇ラ」楠岃瘉锛堜笌褰撳墠 Next.js 鍚姩鐜璺緞瑙ｆ瀽鐩稿叧锛屼笉褰卞搷宸插畬鎴愮紪璇戜笌绫诲瀷鏍￠獙缁撴灉锛?
+## 椋庨櫓涓庡奖鍝?- 澶栭儴鑴氭湰鍔犺浇鏀逛负寤惰繜锛屼笉褰卞搷鐜版湁閰嶇疆椤逛笌鎻掍欢寮€鍏抽€昏緫锛坄DISABLE_PLUGIN` 绛変繚鎸佷笉鍙橈級銆?- `GLOBAL_JS` 鍙湪鍐呭鍙樺寲鏃舵墽琛岋紝琛屼负涓庨厤缃粨鏋滀繚鎸佷竴鑷达紝浣嗛檷浣庝簡閲嶅娉ㄥ叆椋庨櫓銆?
+## 涓嬩竴姝ヨ鍒掞紙P2锛?- 缁х画姊崇悊涓婚灞傞潰浠嶆湁杈冮噸鐨勯灞忛€昏緫锛堢壒鍒槸鎼滅储銆佺洰褰曘€侀珮棰?DOM 閬嶅巻閫昏緫锛夛紝鎸夊奖鍝嶉潰浼樺厛钀藉湴銆?- 寤虹珛鍙鐢ㄧ殑涓婚绾у欢杩熸墽琛屽熀绾匡紙绌洪棽/婊氬姩瑙﹀彂锛夛紝骞惰ˉ榻愬涓婚瀵规瘮鐨勮嚜鍔ㄥ寲 Lighthouse 鎶ュ憡銆?
+
+## 2026-06-03 Follow-up: Next and Endspace scroll rendering pass
+
+Version: `4.10.0`
+
+### Scope
+- `themes/next/components/BlogPostListScroll.js`
+- `themes/next/components/StickyBar.js`
+- `themes/next/components/Toc.js`
+- `themes/next/components/TopNav.js`
+- `themes/endspace/components/FloatingControls.js`
+- `themes/endspace/components/FloatingToc.js`
+- `themes/endspace/components/MobileToc.js`
+
+### Meaning
+- Replaced high-frequency lodash throttle scroll handlers with `requestAnimationFrame` scheduling where the UI is tied to visual scroll state.
+- Collapsed duplicated progress and TOC scroll listeners in Endspace into a single scroll pipeline per component.
+- Added ref-based state guards for reading progress and active TOC section to avoid repeated React state updates with the same value.
+- Cached DOM targets such as sticky navigation elements through refs instead of querying on every scroll tick.
+- Kept theme APIs, config switches, visual behavior, and plugin behavior unchanged.
+
+### Acceptance
+- `yarn -s eslint` on affected files: passed.
+- `.\\node_modules\\.bin\\tsc.cmd --noEmit --pretty false`: passed.
+- `yarn -s build`: passed.
+- Browser validation:
+  - `/article/guide?theme=next`: desktop and mobile scroll progress updates, no console errors.
+  - `/article/guide?theme=endspace`: desktop and mobile TOC/progress controls remain visible and update on scroll, no console errors.
+
+### Next optimization target
+- Build output still warns that `/` and selected article page-data exceed 128KB. The next priority should be reducing serialized page props and trimming data sent to the client before pursuing smaller per-component scroll wins.
+

docs/user-guide/changelog/index.md

@@ -2,7 +2,7 @@
 
 | 文档 | 说明 |
 | --- | --- |
-| [最新版本](./latest.md) | 当前主线要点（4.9.5.x） |
+| [最新版本](./latest.md) | 当前主线要点（4.10.0） |
 | [V4 历史](./v4-history.md) | 旧版 changelog 索引 |
 
 另见：[升级](../update.md) · 仓库 [GitHub Releases](https://github.com/notionnext-org/NotionNext/releases)