(function() { var earlyScriptStart = performance.now(); var thresholdMs = 20; var perfStore = window.__MAIN_APP_OPEN_PAGE_PERF__ = window.__MAIN_APP_OPEN_PAGE_PERF__ || { entries: [], thresholdMs: thresholdMs }; perfStore.entries = perfStore.entries || []; perfStore.thresholdMs = perfStore.thresholdMs || thresholdMs; function roundMs(value) { return Math.round(Number(value || 0) * 100) / 100; } function roundMetric(value, precision) { var multiplier = Math.pow(10, precision || 2); return Math.round(Number(value || 0) * multiplier) / multiplier; } function getConnectionInfo() { var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; return { effectiveType: connection && connection.effectiveType ? connection.effectiveType : 'unknown', saveData: Boolean(connection && connection.saveData), downlink: connection && typeof connection.downlink === 'number' ? connection.downlink : null, rtt: connection && typeof connection.rtt === 'number' ? connection.rtt : null }; } function getDeviceClass(width) { var viewportWidth = Number(width || 0); if (viewportWidth > 0 && viewportWidth < 768) return 'mobile'; if (viewportWidth > 0 && viewportWidth < 1180) return 'tablet'; return 'desktop'; } function isEnUsPathname(pathname) { return pathname === '/en-us' || pathname.indexOf('/en-us/') === 0; } function getPathnameWithoutLocale(pathname) { var pathnameOnly = (pathname || '/').split('?')[0].split('#')[0] || '/'; if (isEnUsPathname(pathnameOnly)) { return pathnameOnly.slice('/en-us'.length) || '/'; } return pathnameOnly; } var baselinePathname = window.location && window.location.pathname ? window.location.pathname : '/'; var baselineLocale = isEnUsPathname(baselinePathname) ? 'en-US' : 'zh-CN'; document.documentElement.lang = baselineLocale === 'en-US' ? 'en' : 'zh-CN'; var baselineDeviceClass = getDeviceClass(window.innerWidth); var baselineMetadata = { route: baselinePathname, pathname: baselinePathname, locale: baselineLocale, device: baselineDeviceClass, deviceClass: baselineDeviceClass, viewport: { width: window.innerWidth || 0, height: window.innerHeight || 0 }, dpr: window.devicePixelRatio || 1, devicePixelRatio: window.devicePixelRatio || 1, connection: getConnectionInfo(), tags: { route: baselinePathname, locale: baselineLocale, device: baselineDeviceClass } }; var baseline = perfStore.baseline = perfStore.baseline || {}; baseline.metadata = baselineMetadata; baseline.tags = { route: baselinePathname, locale: baselineLocale, device: baselineDeviceClass }; baseline.entries = baseline.entries || []; baseline.metrics = baseline.metrics || { fcpMs: null, lcpMs: null, cls: 0, inpMs: null, tbtMs: 0 }; baseline.unsupportedObservers = baseline.unsupportedObservers || []; baseline.observers = baseline.observers || {}; baseline.hydrationSource = 'client-init/client-store-write'; function recordBaselineEntry(metric, value, detail) { var entry = Object.assign({ bucket: 'browser-baseline', metric: metric, value: value, route: baseline.tags.route, locale: baseline.tags.locale, device: baseline.tags.device, observedAtMs: roundMs(performance.now()) }, detail || {}); baseline.entries.push(entry); return entry; } function markBaselineObserverUnsupported(entryType, error) { var reason = error ? (error.message || String(error)) : 'PerformanceObserver unavailable'; baseline.unsupportedObservers.push({ type: entryType, reason: reason, route: baseline.tags.route, locale: baseline.tags.locale, device: baseline.tags.device }); } function observeBaselineEntryType(entryType, callback, options) { if (!('PerformanceObserver' in window)) { markBaselineObserverUnsupported(entryType, 'PerformanceObserver unavailable'); return null; } try { if (PerformanceObserver.supportedEntryTypes && PerformanceObserver.supportedEntryTypes.indexOf(entryType) === -1) { markBaselineObserverUnsupported(entryType, 'PerformanceObserver ' + entryType + ' unsupported'); return null; } var observer = new PerformanceObserver(function(list) { var entries = list && typeof list.getEntries === 'function' ? list.getEntries() : []; for (var i = 0; i < entries.length; i++) { callback(entries[i]); } }); try { if (options && typeof options.durationThreshold === 'number') { observer.observe({ type: entryType, buffered: true, durationThreshold: options.durationThreshold }); } else { observer.observe({ type: entryType, buffered: true }); } } catch (e) { try { observer.observe({ entryTypes: [entryType] }); } catch (fallbackError) { markBaselineObserverUnsupported(entryType, fallbackError); return null; } } baseline.observers[entryType] = true; return observer; } catch (e) { markBaselineObserverUnsupported(entryType, e); return null; } } function getBaselineRows() { var rows = []; if (baseline.metrics.fcpMs !== null) { rows.push(Object.assign({ metric: 'FCP', valueMs: baseline.metrics.fcpMs }, baseline.tags)); } if (baseline.metrics.lcpMs !== null) { rows.push(Object.assign({ metric: 'LCP', valueMs: baseline.metrics.lcpMs }, baseline.tags)); } rows.push(Object.assign({ metric: 'CLS', value: roundMetric(baseline.metrics.cls, 4) }, baseline.tags)); if (baseline.metrics.inpMs !== null) { rows.push(Object.assign({ metric: 'INP', valueMs: baseline.metrics.inpMs }, baseline.tags)); } rows.push(Object.assign({ metric: 'TBT', valueMs: baseline.metrics.tbtMs }, baseline.tags)); for (var i = 0; i < baseline.unsupportedObservers.length; i++) { rows.push(Object.assign({ metric: 'unsupported', observerType: baseline.unsupportedObservers[i].type, reason: baseline.unsupportedObservers[i].reason }, baseline.tags)); } return rows; } function printBaseline(reason) { baseline.lastPrintReason = reason; baseline.lastPrintedAtMs = roundMs(performance.now()); var rows = getBaselineRows(); var title = '[OpenPagePerf] 首屏基线 (' + reason + ', ' + rows.length + ' rows)'; if (typeof console.groupCollapsed === 'function') { console.groupCollapsed(title); } else { console.log(title); } console.log('metadata', baseline.metadata); if (typeof console.table === 'function') { console.table(rows); } else { console.log(rows); } if (typeof console.groupEnd === 'function') { console.groupEnd(); } return rows; } function scheduleBaselinePrint(reason) { setTimeout(function() { printBaseline(reason); }, 0); } observeBaselineEntryType('paint', function(entry) { if (entry && entry.name === 'first-contentful-paint') { baseline.metrics.fcpMs = roundMs(entry.startTime); recordBaselineEntry('FCP', baseline.metrics.fcpMs, { name: entry.name, startMs: baseline.metrics.fcpMs, valueMs: baseline.metrics.fcpMs }); } }); observeBaselineEntryType('largest-contentful-paint', function(entry) { if (!entry) return; var lcpMs = roundMs(entry.startTime || entry.renderTime || entry.loadTime); baseline.metrics.lcpMs = lcpMs; baseline.lcpEntry = { startMs: lcpMs, size: entry.size || 0, url: entry.url || '', id: entry.id || '', elementTagName: entry.element && entry.element.tagName ? entry.element.tagName.toLowerCase() : '' }; recordBaselineEntry('LCP', lcpMs, Object.assign({ valueMs: lcpMs }, baseline.lcpEntry)); }); observeBaselineEntryType('layout-shift', function(entry) { if (!entry || entry.hadRecentInput) return; var shiftValue = Number(entry.value || 0); baseline.metrics.cls = roundMetric(Number(baseline.metrics.cls || 0) + shiftValue, 4); recordBaselineEntry('CLS', baseline.metrics.cls, { value: roundMetric(shiftValue, 4), cumulativeValue: baseline.metrics.cls, startMs: roundMs(entry.startTime) }); }); observeBaselineEntryType('event', function(entry) { if (!entry) return; var eventDuration = Number(entry.duration || 0); if (eventDuration <= 0 || eventDuration < Number(baseline.metrics.inpMs || 0)) return; baseline.metrics.inpMs = roundMs(eventDuration); baseline.inpEntry = { name: entry.name || 'event', startMs: roundMs(entry.startTime), durationMs: baseline.metrics.inpMs, interactionId: entry.interactionId || 0 }; recordBaselineEntry('INP', baseline.metrics.inpMs, baseline.inpEntry); }, { durationThreshold: 40 }); observeBaselineEntryType('longtask', function(entry) { if (!entry) return; var duration = Number(entry.duration || 0); var blockingMs = Math.max(0, duration - 50); if (blockingMs <= 0) return; baseline.metrics.tbtMs = roundMs(Number(baseline.metrics.tbtMs || 0) + blockingMs); recordBaselineEntry('TBT', baseline.metrics.tbtMs, { valueMs: baseline.metrics.tbtMs, blockingMs: roundMs(blockingMs), longTaskDurationMs: roundMs(duration), startMs: roundMs(entry.startTime) }); }); function addPerf(label, startMs, endMs, detail, important) { var entry = Object.assign({ bucket: 'browser-early', label: label, durationMs: roundMs(Math.max(0, Number(endMs) - Number(startMs))), startMs: roundMs(startMs), endMs: roundMs(endMs) }, detail || {}); if (important) { entry.important = true; } perfStore.entries.push(entry); return entry; } function toPrintable(entries) { return entries .filter(function(entry) { return entry.important || Number(entry.durationMs || 0) >= perfStore.thresholdMs; }) .map(function(entry) { var clone = {}; Object.keys(entry).forEach(function(key) { if (key !== 'important' && key !== '__important') { clone[key] = entry[key]; } }); return clone; }); } function logPerf(groupLabel, entries) { var sourceEntries = entries || perfStore.entries; var rows = toPrintable(sourceEntries); if (rows.length === 0) return rows; console.groupCollapsed('[OpenPagePerf] ' + groupLabel + ' (' + rows.length + '/' + sourceEntries.length + ', >= ' + perfStore.thresholdMs + 'ms)'); console.table(rows); console.groupEnd(); return rows; } perfStore.add = addPerf; perfStore.log = logPerf; function trimTrailingSlash(pathname) { return pathname && pathname.length > 1 && pathname.charAt(pathname.length - 1) === '/' ? pathname.slice(0, -1) : pathname; } function isSubAppPathMatch(pathname, basename) { if (!pathname || !basename) return false; var normalizedPath = trimTrailingSlash(pathname); var normalizedBasename = trimTrailingSlash(basename); return normalizedPath === normalizedBasename || normalizedPath.indexOf(normalizedBasename + '/') === 0; } function getExperienceSubAppName(pathname, experienceSubAppNames) { if (!pathname || !experienceSubAppNames || !experienceSubAppNames.length) return null; for (var i = 0; i < experienceSubAppNames.length; i++) { var name = experienceSubAppNames[i]; var basename = '/experience-' + name; if (pathname === basename || pathname.indexOf(basename + '/') === 0) { return name; } } return null; } function getCurrentUnderlyingSubAppName(pathname, enabledSubApps, experienceSubAppNames) { var normalizedPathname = getPathnameWithoutLocale(pathname); var experienceSubAppName = getExperienceSubAppName(normalizedPathname, experienceSubAppNames); if (experienceSubAppName) { for (var i = 0; i < enabledSubApps.length; i++) { if (enabledSubApps[i] && enabledSubApps[i].enabled && enabledSubApps[i].name === experienceSubAppName) { return experienceSubAppName; } } } for (var j = 0; j < enabledSubApps.length; j++) { var subApp = enabledSubApps[j]; if (subApp && subApp.enabled && isSubAppPathMatch(normalizedPathname, subApp.basename)) { return subApp.name; } } return null; } function readJsonScript(id, fallbackValue) { var script = document.getElementById(id); if (!script || !script.textContent) return fallbackValue; try { return JSON.parse(script.textContent); } catch (e) { console.error('[Layout] Failed to parse ' + id + ':', e); return fallbackValue; } } function injectCurrentSubAppPrefetch(enabledSubApps) { var prefetchStart = performance.now(); var prefetchHrefMap = readJsonScript('__SUB_APP_PREFETCH_HREF_MAP__', {}); var experienceSubAppNames = readJsonScript('__EXPERIENCE_CENTER_SUBAPP_NAMES__', []); var activeSubAppName = getCurrentUnderlyingSubAppName(window.location.pathname, enabledSubApps, experienceSubAppNames); var href = activeSubAppName ? prefetchHrefMap[activeSubAppName] : ''; var injected = false; var reason = href ? 'active-sub-app' : 'no-active-sub-app'; if (href && document.head && !document.querySelector('link[data-main-app-subapp-prefetch="' + activeSubAppName + '"]')) { var link = document.createElement('link'); link.rel = 'prefetch'; link.href = href; link.as = 'document'; link.setAttribute('data-main-app-subapp-prefetch', activeSubAppName); document.head.appendChild(link); injected = true; } addPerf('browser current sub-app prefetch injection', prefetchStart, performance.now(), { activeSubAppName: activeSubAppName, href: href || null, injected: injected, prefetchLimit: 1, reason: reason }, true); } function logNavigationTiming() { var navigationEntry = performance.getEntriesByType && performance.getEntriesByType('navigation')[0]; if (!navigationEntry) return; var rows = [ addPerf('browser navigation redirect', navigationEntry.redirectStart, navigationEntry.redirectEnd, {}, false), addPerf('browser navigation dns', navigationEntry.domainLookupStart, navigationEntry.domainLookupEnd, {}, false), addPerf('browser navigation tcp', navigationEntry.connectStart, navigationEntry.connectEnd, {}, false), addPerf('browser navigation request to first byte', navigationEntry.requestStart, navigationEntry.responseStart, {}, true), addPerf('browser navigation response download', navigationEntry.responseStart, navigationEntry.responseEnd, {}, true), addPerf('browser navigation domContentLoaded', navigationEntry.startTime, navigationEntry.domContentLoadedEventEnd, {}, true), addPerf('browser navigation load event', navigationEntry.startTime, navigationEntry.loadEventEnd, {}, true) ]; logPerf('浏览器 Navigation Timing', rows); } if (document.readyState === 'complete') { setTimeout(logNavigationTiming, 0); } else { window.addEventListener('load', function() { setTimeout(logNavigationTiming, 0); }, { once: true }); } window.addEventListener('load', function() { scheduleBaselinePrint('load'); }, { once: true }); window.addEventListener('pagehide', function() { printBaseline('pagehide'); }, { once: true }); document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'hidden') { printBaseline('visibilitychange'); } }); // 初始化子应用国际化消息全局变量 // 用于存储所有子应用注册的国际化文案信息 if (typeof window !== 'undefined' && !window.__SUB_APP_INTL_MESSAGES__) { window.__SUB_APP_INTL_MESSAGES__ = {}; } // 从 script 标签中读取 enabledSubApps 并存储到全局变量 try { var enabledSubAppsParseStart = performance.now(); const enabledSubAppsScript = document.getElementById('__ENABLED_SUB_APPS__'); if (enabledSubAppsScript && enabledSubAppsScript.textContent) { const enabledSubApps = JSON.parse(enabledSubAppsScript.textContent); // 将数据存储到全局变量，供客户端组件使用 window.__ENABLED_SUB_APPS__ = enabledSubApps; addPerf('browser parse enabledSubApps injection', enabledSubAppsParseStart, performance.now(), { subAppCount: enabledSubApps.length }, true); injectCurrentSubAppPrefetch(enabledSubApps); console.log('[Layout] 已注入 enabledSubApps 到全局变量:', enabledSubApps); } } catch (e) { console.error('[Layout] Failed to parse enabledSubApps:', e); } // check if antd CSS-in-JS styles are injected function checkAntdStyles() { const styles = Array.from(document.querySelectorAll('style')); return styles.some(style => { const text = style.textContent || ''; return text.includes('ant-') || text.includes('antd'); }); } // check if Tailwind utilities are effective (avoid FOUC) function checkTailwindStyles() { try { const el = document.createElement('div'); el.className = 'hidden'; el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const display = window.getComputedStyle(el).display; document.body.removeChild(el); return display === 'none'; } catch (e) { return false; } } // Mark style readiness for measurement only; SSR body stays visible before this class is set. function waitForStyles() { var stylesWaitStart = performance.now(); var attempts = 0; var fallbackMs = 100; // 降低样式探测超时时间，尽早结束早期的阻塞等待 var settled = false; function runCheck() { if (settled) return; attempts++; var hasBody = Boolean(document.body); var hasMainApp = Boolean(document.querySelector('.main-app')); var hasAppShell = hasMainApp || Boolean(document.body && document.body.children.length > 0); var hasAntdStyles = checkAntdStyles(); var hasTailwindStyles = hasBody && checkTailwindStyles(); var alreadyStylesLoaded = document.documentElement.classList.contains('styles-loaded'); var elapsedMs = performance.now() - stylesWaitStart; var reachedFallback = elapsedMs >= fallbackMs; var hasStyleReadySignal = hasBody && hasAppShell && hasTailwindStyles; if (alreadyStylesLoaded || hasStyleReadySignal || reachedFallback) { settled = true; if (observer) { try { observer.disconnect(); } catch(e) {} } clearTimeout(fallbackTimer); requestAnimationFrame(function() { requestAnimationFrame(function() { addPerf('browser styles-loaded gate', stylesWaitStart, performance.now(), { attempts: attempts, fallbackMs: fallbackMs, alreadyStylesLoaded: alreadyStylesLoaded, hasBody: hasBody, hasMainApp: hasMainApp, hasAppShell: hasAppShell, hasAntdStyles: Boolean(hasAntdStyles), hasTailwindStyles: Boolean(hasTailwindStyles), reachedFallback: reachedFallback, readyReason: alreadyStylesLoaded ? 'already-loaded' : (reachedFallback ? 'fallback' : 'style-signal') }, true); document.documentElement.classList.add('styles-loaded'); logPerf('浏览器早期链路', perfStore.entries.filter(function(entry) { return entry.bucket === 'browser-early'; })); }); }); } } // MutationObserver：仅在 head/body 有新 style 元素插入时触发检测 // 替代原有的 50ms setInterval 轮询，降低 CPU 消耗 var observer = null; try { observer = new MutationObserver(runCheck); observer.observe(document.documentElement, { childList: true, subtree: true }); } catch(e) { observer = null; } // setTimeout fallback：确保在 fallbackMs 后一定触发，不依赖 MutationObserver var fallbackTimer = setTimeout(runCheck, fallbackMs); // 立即执行一次，处理样式已就绪的情况（如 SSR 内联样式） runCheck(); } addPerf('browser inline performance script setup', earlyScriptStart, performance.now(), {}, false); // wait for DOM to load and then check if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', waitForStyles); } else { setTimeout(waitForStyles, 0); } })();