@xingwangzhe/stalux 1.41.4 → 1.41.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.41.4",
+    "version": "1.41.5",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",

package/src/scripts/analytics-runtime.ts

@@ -274,6 +274,57 @@ function trackVercountPage(): void {
     document.head.appendChild(script);
 }
 
+/** 文档是否已解析完、DOM 可查询（`loading` 之外的两种状态都算）。 */
+function documentIsParsed(): boolean {
+    const readyState = document.readyState;
+    return readyState === "interactive" || readyState === "complete";
+}
+
+let pendingEarlyView = 0;
+let earlyViewPending = false;
+let viewedEarly = false;
+
+function dispatchPageView(): void {
+    initializeTrackers();
+    trackGooglePage();
+    trackUmamiPage();
+    trackVercountPage();
+    state.previousPage = window.location.href;
+}
+
+/**
+ * 首访在文档解析完成后就上报一次，不等 window.load。
+ * `astro:page-load` 首访时由 window.load 派发，要等完所有图片、字体和第三方资源，
+ * 慢资源或卡死的请求会让页脚统计一直停在 Loading...。上报必须按页去重，
+ * 否则同一次访问会被重复计入、Vercount 也会重复追加脚本。
+ */
+function dispatchEarlyView(): void {
+    const token = ++pendingEarlyView;
+    earlyViewPending = true;
+    queueMicrotask(() => {
+        if (token !== pendingEarlyView || !earlyViewPending) return;
+        earlyViewPending = false;
+        viewedEarly = true;
+        dispatchPageView();
+    });
+}
+
+function handlePageLoad(): void {
+    if (earlyViewPending) {
+        // page-load 属于当前页，由它立即上报，作废排队中的早派发。
+        pendingEarlyView++;
+        earlyViewPending = false;
+        viewedEarly = true;
+        dispatchPageView();
+        return;
+    }
+    if (viewedEarly) {
+        viewedEarly = false;
+        return;
+    }
+    dispatchPageView();
+}
+
 if (state.installed && (!state.native || state.revision !== 4)) {
     // Revision 4 replaces synchronous Google page views and the motion policy.
     // An open tab can cross a deployment boundary. Its old anonymous worker
@@ -284,6 +335,9 @@ if (state.installed && (!state.native || state.revision !== 4)) {
     state.revision = 4;
     state.installed = true;
     document.addEventListener("astro:before-swap", (event) => {
+        pendingEarlyView++;
+        earlyViewPending = false;
+        viewedEarly = false;
         transitionReady = prepareRouteMotion(event as Event & RouteMotionEvent).ready;
         // Invalidate an older page's frames, timer and posted task before this
         // incoming snapshot starts. Its captured visit remains in the FIFO.
@@ -294,11 +348,7 @@ if (state.installed && (!state.native || state.revision !== 4)) {
     document.addEventListener("visibilitychange", () => {
         if (document.hidden) flushGooglePages();
     });
-    document.addEventListener("astro:page-load", () => {
-        initializeTrackers();
-        trackGooglePage();
-        trackUmamiPage();
-        trackVercountPage();
-        state.previousPage = window.location.href;
-    });
+    document.addEventListener("astro:page-load", handlePageLoad);
+    if (documentIsParsed()) dispatchEarlyView();
+    else document.addEventListener("DOMContentLoaded", dispatchEarlyView, { once: true });
 }

package/src/scripts/background.ts

@@ -92,9 +92,15 @@ function prepareBackground(): Promise<number | undefined> {
     );
 }
 
+let firstCommitStarted = false;
+
 function initializeBackground(): void {
     const active = getLayerEl(getActiveLayer());
     if (!prepared && active?.style.backgroundImage) return;
+    // 首访的早提交已经发起，但解码还没落地：此时 window.load 上的 page-load
+    // 不是新页面，不能再解码并淡入第二张。
+    if (!prepared && firstCommitStarted) return;
+    if (!prepared) firstCommitStarted = true;
     const current = generation;
     const ready = prepared ?? prepareBackground();
     prepared = undefined;
@@ -119,4 +125,9 @@ if (!(window as Window & { __STALUX_BG_LISTENER__?: boolean }).__STALUX_BG_LISTE
         transitionFinished = prepareRouteMotion(event as RouteMotionEvent).finished;
     });
     document.addEventListener("astro:page-load", initializeBackground);
+    // 首访的 page-load 由 window.load 派发，任何慢图片或卡死的第三方资源都会把首屏背景
+    // 拖成一片纯色；文档解析完就提交首张背景，软导航仍由 page-load 负责。
+    const readyState = document.readyState;
+    if (readyState === "interactive" || readyState === "complete") initializeBackground();
+    else document.addEventListener("DOMContentLoaded", initializeBackground, { once: true });
 }

package/src/scripts/page-runtime.ts

@@ -31,10 +31,21 @@ function getBrowserEnvironment(): PageRuntimeEnvironment | undefined {
     };
 }
 
+/** 文档是否已解析完、DOM 可查询（`loading` 之外的两种状态都算）。 */
+function isDocumentParsed(readyState: string | undefined): boolean {
+    return readyState === "interactive" || readyState === "complete";
+}
+
 /**
  * Mount one page-scoped behavior for the current DOM and dispose it before Astro swaps the body.
  * The key is global for the browser session, so a bundled module can be encountered repeatedly
  * without accumulating document-level listeners.
+ *
+ * 首访不能只等 `astro:page-load`：Astro 在首次加载时从 `window.load` 派发该事件，而
+ * `window.load` 要等完所有图片、字体与第三方 iframe。首访一旦有子资源变慢或卡死
+ * （国内访问外部资源时的常态），事件就迟迟不来甚至永不到达，评论与统计整页空白，
+ * 此时 `document.readyState` 停在 `interactive`，只判 `complete` 的兜底也救不回来。
+ * 因此文档解析完成即接管本页；`astro:page-load` 只负责软导航后的新页面与重复信号。
  */
 export function registerPageLifecycle(
     key: string,
@@ -55,7 +66,13 @@ export function registerPageLifecycle(
     logger.debug("lifecycle registered");
 
     let active = true;
-    let pageGeneration = 0;
+    // 已安排但尚未执行的早挂载。自增即作废：早挂载一旦被 page-load 或换页接管，
+    // 排队中的任务不能再挂到已被替换的 DOM 上。
+    let pendingEarlyMount = 0;
+    let earlyMountPending = false;
+    // 早挂载已经覆盖当前页。此时 window.load 上的 page-load 只是同一页的重复信号，
+    // 再挂一次会造出第二份观察器或第二个评论实例。
+    let mountedEarly = false;
     const registration: RuntimeRegistration = {
         unregister: () => undefined,
     };
@@ -73,7 +90,6 @@ export function registerPageLifecycle(
     };
     const mountPage = () => {
         if (!active) return;
-        pageGeneration++;
         disposePage();
         const started = performance.now();
         logger.debug("mount started");
@@ -87,11 +103,41 @@ export function registerPageLifecycle(
             throw error;
         }
     };
-    const handlePageLoad = () => mountPage();
+    const handlePageLoad = () => {
+        if (earlyMountPending) {
+            // page-load 属于当前页，由它立即挂载，作废排队中的早挂载。
+            pendingEarlyMount++;
+            earlyMountPending = false;
+            mountedEarly = true;
+            mountPage();
+            return;
+        }
+        if (mountedEarly) {
+            mountedEarly = false;
+            logger.debug("page-load after early mount; keeping the live instance");
+            return;
+        }
+        mountPage();
+    };
     const handleBeforeSwap = () => {
-        pageGeneration++;
+        pendingEarlyMount++;
+        earlyMountPending = false;
+        mountedEarly = false;
         disposePage();
     };
+    const mountEarlyPage = () => {
+        const token = ++pendingEarlyMount;
+        earlyMountPending = true;
+        // 微任务：模块脚本执行时 DOM 已完整，但要等模块自身求值结束再调用 mount()
+        // （模块顶层的后置绑定可能仍在 TDZ）。
+        queueTask(() => {
+            if (!active || token !== pendingEarlyMount || !earlyMountPending) return;
+            earlyMountPending = false;
+            mountedEarly = true;
+            mountPage();
+        });
+    };
+    const handleDomReady = () => mountEarlyPage();
 
     target.addEventListener("astro:page-load", handlePageLoad);
     target.addEventListener("astro:before-swap", handleBeforeSwap);
@@ -104,19 +150,14 @@ export function registerPageLifecycle(
         } finally {
             target.removeEventListener("astro:page-load", handlePageLoad);
             target.removeEventListener("astro:before-swap", handleBeforeSwap);
+            target.removeEventListener("DOMContentLoaded", handleDomReady);
             registry.delete(key);
         }
     };
     registry.set(key, registration);
 
-    // Late-loaded modules can miss Astro's initial page-load event.
-    if (target.readyState === "complete") {
-        const scheduledGeneration = pageGeneration;
-        queueTask(() => {
-            // A real page-load or swap supersedes this late-module fallback.
-            if (pageGeneration === scheduledGeneration) mountPage();
-        });
-    }
+    if (isDocumentParsed(target.readyState)) mountEarlyPage();
+    else target.addEventListener("DOMContentLoaded", handleDomReady, { once: true });
 
     return registration.unregister;
 }