diff --git a/package.json b/package.json
index 2513aa6..7736dc1 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "hls.js": "^1.6.15",
     "leancloud-realtime": "5.0.0-rc.8",
     "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.4",
     "uuid": "^13.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c13d370..4404d93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+      pinia-plugin-persistedstate:
+        specifier: ^4.7.1
+        version: 4.7.1(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)))
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -2801,6 +2804,7 @@ packages:
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@7.2.3:
@@ -3777,6 +3781,20 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pinia-plugin-persistedstate@4.7.1:
+    resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      '@pinia/nuxt': '>=0.10.0'
+      pinia: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
   pinia@3.0.4:
     resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
     peerDependencies:
@@ -8742,6 +8760,12 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pinia-plugin-persistedstate@4.7.1(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))):
+    dependencies:
+      defu: 6.1.4
+    optionalDependencies:
+      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+
   pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.9
diff --git a/src/App.vue b/src/App.vue
index 736d096..99015a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import Toast from 'primevue/toast';
-import { defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
 import TopToolbar from './components/header/TopToolbar.vue';
 import LiveStage from './components/layout/LiveStage.vue';
 import ScheduleArea from './components/layout/ScheduleArea.vue';
 import CurrentMatchPanel from './components/panels/CurrentMatchPanel.vue';
 import { bindDanmuRoomReset } from './composables/danmuLifecycle';
-import { scheduleDeferredMount } from './composables/deferredMount';
 import { requestNotificationPermissionOnLaunch } from './composables/notificationPermissionOnLaunch';
 import { useScheduleNotifyPolling } from './composables/scheduleNotifyClient';
 import { useDanmuStore } from './stores/danmu';
 import { useRmDataStore } from './stores/rmData';
 import { useScheduleNotifyStore } from './stores/scheduleNotify';
 import { useUiStore } from './stores/ui';
+import { markPerformance } from './utils/observability';
 import type { DanmuMessage } from './types/api';
 import type { TeamSelectPayload } from './types/teamSelect';
 
@@ -27,6 +27,7 @@ const scheduleNotifyStore = useScheduleNotifyStore();
 useScheduleNotifyPolling();
 
 const { selectedZoneChatRoomId } = storeToRefs(dataStore);
+const { runningMatchForSelectedZone, streamLoading, liveGameInfo } = storeToRefs(dataStore);
 
 const dataDialogVisible = ref(false);
 const dataDialogTeam = ref<string | null>(null);
@@ -39,12 +40,20 @@ function onDanmuReceived(msg: DanmuMessage) {
 }
 
 function onDanmuReset() {
-  danmuStore.clearMessages();
+  // Keep cached danmu visible during reconnect; fresh history/realtime messages will update it.
 }
 
 bindDanmuRoomReset(selectedZoneChatRoomId, danmuStore.clearMessages);
 
-const enableSecondaryPanels = ref(false);
+const enableSecondaryPanels = ref(true);
+
+const showMatchHero = computed(() => {
+  if (runningMatchForSelectedZone.value) {
+    return true;
+  }
+
+  return streamLoading.value || !liveGameInfo.value;
+});
 
 function onOpenTeamData(payload: string | TeamSelectPayload) {
   const teamName = typeof payload === 'string' ? payload : payload.teamName;
@@ -60,22 +69,16 @@ function onOpenTeamData(payload: string | TeamSelectPayload) {
   dataDialogVisible.value = true;
 }
 
-let stopDeferredMount: (() => void) | null = null;
-
 onMounted(() => {
+  markPerformance('rm-app-on-mounted');
   requestNotificationPermissionOnLaunch();
   void scheduleNotifyStore.syncPrefsToIdb();
   uiStore.initializeUi();
   dataStore.startPolling();
-  stopDeferredMount = scheduleDeferredMount(() => {
-    enableSecondaryPanels.value = true;
-  });
+  markPerformance('rm-data-start-dispatched');
 });
 
 onBeforeUnmount(() => {
-  if (stopDeferredMount) {
-    stopDeferredMount();
-  }
   uiStore.teardownUi();
   dataStore.stopPolling();
 });
@@ -86,7 +89,7 @@ onBeforeUnmount(() => {
     <Toast position="top-right" />
     <TopToolbar />
 
-    <section class="match-hero">
+    <section v-if="showMatchHero" class="match-hero" :class="{ reserving: !runningMatchForSelectedZone }">
       <CurrentMatchPanel :key="dataStore.selectedZoneId ?? 'zone-empty'" @team-select="onOpenTeamData" />
     </section>
 
@@ -107,7 +110,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .app-shell {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
   padding: 1rem;
   box-sizing: border-box;
@@ -118,9 +121,23 @@ onBeforeUnmount(() => {
   margin-bottom: 1rem;
 }
 
+.match-hero.reserving {
+  min-height: 7.5rem;
+}
+
 @media (max-width: 768px) {
   .app-shell {
     padding: 0.65rem;
   }
+
+  .match-hero.reserving {
+    min-height: 6rem;
+  }
+}
+</style>
+
+<style>
+html {
+  scrollbar-gutter: stable both-edges;
 }
 </style>
diff --git a/src/components/common/ScheduleItem.vue b/src/components/common/ScheduleItem.vue
index f9ede6a..3e92ade 100644
--- a/src/components/common/ScheduleItem.vue
+++ b/src/components/common/ScheduleItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import type { MatchView } from '@/utils/matchView';
-import { DeferredContent } from 'primevue';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Tag from 'primevue/tag';
@@ -110,9 +109,8 @@ const slug = computed(() => {
 </script>
 
 <template>
-  <DeferredContent>
-    <Card class="schedule-item" :class="{ compact: props.compact }">
-      <template #content>
+  <Card class="schedule-item" :class="{ compact: props.compact }">
+    <template #content>
         <header class="item-header">
           <span class="event-title">{{ item.eventTitle || '赛事' }}</span>
           <div class="header-center">
@@ -208,9 +206,8 @@ const slug = computed(() => {
           :video-url="item.replayVideo.url"
           :cover-url="item.replayVideo.coverUrl"
         />
-      </template>
-    </Card>
-  </DeferredContent>
+    </template>
+  </Card>
 </template>
 
 <style scoped>
diff --git a/src/components/common/TeamLogo.vue b/src/components/common/TeamLogo.vue
index 160c5ae..63091d3 100644
--- a/src/components/common/TeamLogo.vue
+++ b/src/components/common/TeamLogo.vue
@@ -20,6 +20,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const logoUrl = computed(() => (props.logo ? buildImageUrl(props.logo) : ''));
 
+const placeholderText = computed(() => {
+  const value = String(props.teamName ?? '').trim();
+  if (!value) {
+    return '';
+  }
+
+  return [...value].slice(0, 2).join('');
+});
+
 const wrapperStyle = computed(() => {
   if (props.customSize) {
     return {
@@ -42,14 +51,16 @@ const wrapperStyle = computed(() => {
 
 <template>
   <div
-    v-if="logoUrl"
     class="team-logo-wrapper"
-    :class="{ rounded: rounded, square: !rounded }"
+    :class="{ rounded: rounded, square: !rounded, placeholder: !logoUrl }"
     :style="{
       ...wrapperStyle,
     }"
+    :aria-label="teamName"
+    role="img"
   >
-    <img :src="logoUrl" :alt="teamName" class="team-logo-img" />
+    <img v-if="logoUrl" :src="logoUrl" :alt="teamName" class="team-logo-img" decoding="async" />
+    <span v-else class="team-logo-placeholder">{{ placeholderText }}</span>
   </div>
 </template>
 
@@ -61,6 +72,10 @@ const wrapperStyle = computed(() => {
   background-color: white;
   flex-shrink: 0;
   overflow: hidden;
+  color: var(--text-color-secondary);
+  font-weight: 700;
+  font-size: 0.72em;
+  line-height: 1;
 }
 
 .team-logo-wrapper.rounded {
@@ -76,4 +91,20 @@ const wrapperStyle = computed(() => {
   height: 100%;
   object-fit: cover;
 }
+
+.team-logo-wrapper.placeholder {
+  background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.08));
+  border: 1px solid rgba(148, 163, 184, 0.28);
+}
+
+.team-logo-placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  user-select: none;
+}
 </style>
diff --git a/src/components/header/TopToolbar.vue b/src/components/header/TopToolbar.vue
index 6137fbd..9baa430 100644
--- a/src/components/header/TopToolbar.vue
+++ b/src/components/header/TopToolbar.vue
@@ -207,10 +207,16 @@ const settingsVisible = ref(false);
   margin-bottom: 1rem;
 }
 
+.top-toolbar :deep(.p-toolbar) {
+  min-height: 3.2rem;
+  row-gap: 0.45rem;
+}
+
 .toolbar-brand {
   display: flex;
   align-items: center;
   gap: 0.65rem;
+  min-width: 0;
 }
 
 .brand-logo {
@@ -239,23 +245,29 @@ const settingsVisible = ref(false);
   font-size: 0.78rem;
 }
 
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+.zone-select {
+  min-width: 9rem;
+}
+
+.zone-select-button-wrap {
+  width: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
-.toolbar-actions > * {
-  flex-shrink: 0;
+.zone-select-button-wrap :deep(.p-selectbutton) {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.28rem;
 }
 
-.zone-select {
-  min-width: 9rem;
+.zone-select-button-wrap :deep(.p-togglebutton) {
+  flex: 0 0 auto;
 }
 
-.zone-select-button-wrap {
-  flex: 1;
+.zone-select-button-wrap :deep(.p-togglebutton .p-button-label) {
   min-width: 0;
 }
 
@@ -304,14 +316,6 @@ const settingsVisible = ref(false);
   padding: 0.25rem;
 }
 
-.settings-entry-logo {
-  display: block;
-  width: 1.35rem;
-  height: 1.35rem;
-  object-fit: contain;
-  opacity: 0.92;
-}
-
 @media (width <= 768px) {
   .toolbar-brand-meta h1 {
     font-size: 0.92rem;
@@ -321,10 +325,6 @@ const settingsVisible = ref(false);
     display: none;
   }
 
-  .toolbar-actions {
-    gap: 0.35rem;
-  }
-
   .zone-select {
     min-width: 0;
     flex: 1;
diff --git a/src/components/layout/LiveStage.vue b/src/components/layout/LiveStage.vue
index 06a3289..6cfeab7 100644
--- a/src/components/layout/LiveStage.vue
+++ b/src/components/layout/LiveStage.vue
@@ -6,6 +6,7 @@ import { Fieldset } from 'primevue';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 import { computed, defineAsyncComponent } from 'vue';
+import LivePlayer from '../live/LivePlayer.vue';
 import type { DanmuMessage } from '../../types/api';
 
 const dataStore = useRmDataStore();
@@ -14,6 +15,7 @@ const uiStore = useUiStore();
 const {
   effectiveStreamUrl,
   streamLoading,
+  liveGameInfo,
   effectiveStreamErrorMessage,
   playerQualityOptions,
   selectedQualityRes,
@@ -29,12 +31,12 @@ const emit = defineEmits<{
   danmuReset: [];
 }>();
 
-const LivePlayer = defineAsyncComponent(() => import('../live/LivePlayer.vue'));
 const DanmuPanel = defineAsyncComponent(() => import('../danmu/DanmuPanel.vue'));
 const MatchFirepowerBar = defineAsyncComponent(() => import('../panels/MatchFirepowerBar.vue'));
 const MatchReactionStrip = defineAsyncComponent(() => import('../panels/MatchReactionStrip.vue'));
 
 const hasCurrentMatch = computed(() => Boolean(runningMatchForSelectedZone.value));
+const showMatchDependentPlaceholder = computed(() => streamLoading.value || !liveGameInfo.value);
 
 function onRetry() {
   void dataStore.retryLiveStream();
@@ -54,7 +56,8 @@ function onDanmuReset() {
     <Splitter v-if="!isMobile && danmuEnabledAtLoad" layout="horizontal" :style="{ height: '100%' }">
       <SplitterPanel :size="75" :minSize="50">
         <div class="live-column">
-          <MatchFirepowerBar v-if="hasCurrentMatch && pkEnabled" />
+          <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
+          <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
           <LivePlayer
             :stream-url="effectiveStreamUrl"
             :loading="streamLoading"
@@ -66,9 +69,12 @@ function onDanmuReset() {
             @danmu="onDanmu"
             @danmu-reset="onDanmuReset"
           />
-          <div v-if="hasCurrentMatch && reactionEnabled">
-            <MatchReactionStrip />
-          </div>
+          <MatchReactionStrip v-if="reactionEnabled && hasCurrentMatch" />
+          <div
+            v-else-if="reactionEnabled && showMatchDependentPlaceholder"
+            class="reaction-slot"
+            aria-hidden="true"
+          />
         </div>
       </SplitterPanel>
 
@@ -78,7 +84,8 @@ function onDanmuReset() {
     </Splitter>
 
     <div v-else class="live-column">
-      <MatchFirepowerBar v-if="hasCurrentMatch && pkEnabled" />
+      <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
+      <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
       <LivePlayer
         :stream-url="effectiveStreamUrl"
         :loading="streamLoading"
@@ -90,9 +97,8 @@ function onDanmuReset() {
         @danmu="onDanmu"
         @danmu-reset="onDanmuReset"
       />
-      <div v-if="hasCurrentMatch && reactionEnabled" class="mt-2">
-        <MatchReactionStrip />
-      </div>
+      <MatchReactionStrip v-if="reactionEnabled && hasCurrentMatch" class="mt-2" />
+      <div v-else-if="reactionEnabled && showMatchDependentPlaceholder" class="reaction-slot mt-2" aria-hidden="true" />
 
       <Fieldset v-if="danmuEnabledAtLoad && isMobile" legend="弹幕列表" toggleable class="mobile-danmu-panel">
         <div class="mobile-danmu-wrap">
@@ -115,6 +121,14 @@ function onDanmuReset() {
   min-width: 0;
 }
 
+.firepower-slot {
+  min-height: 2.9rem;
+}
+
+.reaction-slot {
+  min-height: 3.4rem;
+}
+
 .mobile-danmu-panel {
   margin-top: 0.75rem;
 }
diff --git a/src/components/layout/ScheduleArea.vue b/src/components/layout/ScheduleArea.vue
index 4138c45..7c88bca 100644
--- a/src/components/layout/ScheduleArea.vue
+++ b/src/components/layout/ScheduleArea.vue
@@ -2,16 +2,11 @@
 import { useRmDataStore } from '@/stores/rmData';
 import { useUiStore } from '@/stores/ui';
 import { storeToRefs } from 'pinia';
-import Skeleton from 'primevue/skeleton';
-import { defineAsyncComponent } from 'vue';
+import SchedulePanel from '../panels/SchedulePanel.vue';
 
 import type { TeamSelectPayload } from '@/types/teamSelect';
 
-interface Props {
-  enabled: boolean;
-}
-
-defineProps<Props>();
+defineProps<{ enabled: boolean }>();
 
 const emit = defineEmits<{
   teamSelect: [payload: TeamSelectPayload];
@@ -23,8 +18,6 @@ const { isMobile } = storeToRefs(uiStore);
 const dataStore = useRmDataStore();
 const { selectedZoneId, teamGroupMap } = storeToRefs(dataStore);
 
-const SchedulePanel = defineAsyncComponent(() => import('../panels/SchedulePanel.vue'));
-
 function onTeamSelect(payload: TeamSelectPayload) {
   emit('teamSelect', payload);
 }
@@ -32,7 +25,7 @@ function onTeamSelect(payload: TeamSelectPayload) {
 
 <template>
   <section id="rm-schedule-panel" class="lower-grid">
-    <div v-if="enabled" class="schedule-cell">
+    <div class="schedule-cell">
       <SchedulePanel
         :selected-zone-id="selectedZoneId"
         :team-group-map="teamGroupMap"
@@ -40,10 +33,6 @@ function onTeamSelect(payload: TeamSelectPayload) {
         @team-select="onTeamSelect"
       />
     </div>
-
-    <div v-else class="schedule-placeholder">
-      <Skeleton width="100%" height="18rem" borderRadius="12px" />
-    </div>
   </section>
 </template>
 
@@ -58,8 +47,4 @@ function onTeamSelect(payload: TeamSelectPayload) {
 .schedule-cell {
   min-width: 0;
 }
-
-.schedule-placeholder {
-  min-width: 0;
-}
 </style>
diff --git a/src/components/live/LivePlayer.vue b/src/components/live/LivePlayer.vue
index d227991..ebd830b 100644
--- a/src/components/live/LivePlayer.vue
+++ b/src/components/live/LivePlayer.vue
@@ -6,10 +6,6 @@ import { useRmDataStore } from '@/stores/rmData';
 import { useUiStore } from '@/stores/ui';
 import { isIFrame, useUserInfoStore } from '@/stores/userInfo';
 import { formatStructuredName, resolveDisplaySchool } from '@/utils/danmuView';
-import Artplayer, { Option } from 'artplayer';
-import artplayerPluginChromecast from 'artplayer-plugin-chromecast';
-import artplayerPluginDanmuku, { type Danmu } from 'artplayer-plugin-danmuku';
-import Hls from 'hls.js/dist/hls.js';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
 import Message from 'primevue/message';
@@ -18,6 +14,10 @@ import { useToast } from 'primevue/usetoast';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { DanmuAttributes, DanmuMessage } from '../../types/api';
 import DanmuFilterDialog from '../dialogs/DanmuFilterDialog.vue';
+import { markPerformance } from '../../utils/observability';
+import type Artplayer from 'artplayer';
+import type { Option } from 'artplayer';
+import type { Danmu } from 'artplayer-plugin-danmuku';
 
 interface QualityOption {
   label: string;
@@ -50,14 +50,22 @@ const emit = defineEmits<{
 const container = ref<HTMLDivElement | null>(null);
 let player: Artplayer | null = null;
 let playerReady = false;
+const isStreamSwitching = ref(false);
 /** Hls instance for current stream; must be torn down before each new customType load and on player destroy. */
-let liveHls: InstanceType<typeof Hls> | null = null;
+let liveHls: { destroy: () => void } | null = null;
+let hlsMediaRecoveryCount = 0;
+let hlsLastMediaRecoveryAt = 0;
+let currentAppliedStreamUrl: string | null = null;
+let streamSwitchToken = 0;
+let latestRequestedStreamUrl: string | null = null;
 let danmukuPlugin: any = null;
 const pendingDanmuQueue: DanmuMessage[] = [];
 const danmuService = ref<DanmuService | null>(null);
 let currentRoomId: string | null = null;
+let pendingRoomId: string | null = null;
 let roomSwitchToken = 0;
 let connectingService: DanmuService | null = null;
+let playerMountToken = 0;
 
 const danmuFilterStore = useDanmuFilterStore();
 const matchEngagementStore = useMatchEngagementStore();
@@ -206,6 +214,8 @@ function destroyAttachedHls() {
     liveHls.destroy();
     liveHls = null;
   }
+  hlsMediaRecoveryCount = 0;
+  hlsLastMediaRecoveryAt = 0;
 }
 
 async function exitPipIfNeeded() {
@@ -243,16 +253,54 @@ async function destroyDanmu() {
 }
 
 function destroyPlayer() {
+  playerMountToken += 1;
+  streamSwitchToken += 1;
+  isStreamSwitching.value = false;
   destroyAttachedHls();
   if (player) {
     player.destroy(false);
     player = null;
   }
+  currentAppliedStreamUrl = null;
   danmukuPlugin = null;
   playerReady = false;
   pendingDanmuQueue.length = 0;
 }
 
+function waitForVideoPlayable(video: HTMLVideoElement | null, timeoutMs = 2200): Promise<void> {
+  if (!video) {
+    return Promise.resolve();
+  }
+
+  if (video.readyState >= 3 && !video.paused) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const cleanup = () => {
+      video.removeEventListener('canplay', onReady);
+      video.removeEventListener('playing', onReady);
+      video.removeEventListener('loadeddata', onReady);
+    };
+    const finish = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanup();
+      resolve();
+    };
+    const onReady = () => finish();
+
+    video.addEventListener('canplay', onReady, { once: true });
+    video.addEventListener('playing', onReady, { once: true });
+    video.addEventListener('loadeddata', onReady, { once: true });
+
+    setTimeout(() => finish(), timeoutMs);
+  });
+}
+
 function pushDanmuToPlayer(msg: DanmuMessage) {
   if (!player || !msg.text) {
     return;
@@ -301,6 +349,29 @@ function createDebugDanmu(text?: string): DanmuMessage {
   };
 }
 
+function syncDanmuConnection() {
+  if (!danmuEnabledAtLoad) {
+    currentRoomId = null;
+    pendingRoomId = null;
+    roomSwitchToken += 1;
+    void destroyDanmu();
+    return;
+  }
+
+  if (!playerReady) {
+    return;
+  }
+
+  if (!pendingRoomId) {
+    currentRoomId = null;
+    roomSwitchToken += 1;
+    void destroyDanmu();
+    return;
+  }
+
+  void initDanmu(pendingRoomId);
+}
+
 function exposeDanmuDebugApi() {
   if (typeof window === 'undefined') {
     return;
@@ -446,11 +517,29 @@ async function mountPlayer(url: string) {
   }
 
   destroyPlayer();
+  const mountToken = ++playerMountToken;
+  markPerformance('rm-player-mount-start');
+
+  const [artplayerModule, hlsModule, danmukuModule, chromecastModule] = await Promise.all([
+    import('artplayer'),
+    import('hls.js/dist/hls.js'),
+    danmuEnabledAtLoad ? import('artplayer-plugin-danmuku') : Promise.resolve(null),
+    uiStore.isMobile ? Promise.resolve(null) : import('artplayer-plugin-chromecast'),
+  ]);
+
+  if (mountToken !== playerMountToken || !container.value) {
+    return;
+  }
+
+  const ArtplayerCtor = artplayerModule.default;
+  const HlsCtor = hlsModule.default;
+  const artplayerPluginDanmuku = danmukuModule?.default;
+  const artplayerPluginChromecast = chromecastModule?.default;
 
   const qualityItems = buildQualityItems();
 
   const plugins: any[] = [];
-  if (danmuEnabledAtLoad) {
+  if (danmuEnabledAtLoad && artplayerPluginDanmuku) {
     plugins.push(
       artplayerPluginDanmuku({
         danmuku: [],
@@ -468,7 +557,7 @@ async function mountPlayer(url: string) {
   }
 
   // PC端启用 Chromecast
-  if (!uiStore.isMobile) {
+  if (!uiStore.isMobile && artplayerPluginChromecast) {
     plugins.push(artplayerPluginChromecast({}));
   }
 
@@ -519,18 +608,93 @@ async function mountPlayer(url: string) {
     customType: {
       m3u8(video: HTMLVideoElement, m3u8Url: string) {
         destroyAttachedHls();
-        if (Hls.isSupported()) {
-          const hls = new Hls({
-            lowLatencyMode: true,
+        if (HlsCtor.isSupported()) {
+          const hlsErrorEvent = (HlsCtor as any).Events?.ERROR ?? 'hlsError';
+          const hlsNetworkErrorType = (HlsCtor as any).ErrorTypes?.NETWORK_ERROR ?? 'networkError';
+          const hlsMediaErrorType = (HlsCtor as any).ErrorTypes?.MEDIA_ERROR ?? 'mediaError';
+          const hlsBufferStalledDetail = (HlsCtor as any).ErrorDetails?.BUFFER_STALLED_ERROR ?? 'bufferStalledError';
+
+          const hls = new HlsCtor({
+            // Favor stability over ultra-low latency to avoid frequent stalls on mobile networks.
+            lowLatencyMode: false,
             liveDurationInfinity: true,
-            liveSyncMode: 'edge',
-            backBufferLength: 8,
-            maxBufferLength: 10,
-            maxMaxBufferLength: 30,
+            liveSyncMode: 'buffered',
+            backBufferLength: 20,
+            maxBufferLength: 20,
+            maxMaxBufferLength: 40,
+            maxBufferHole: 0.8,
             liveSyncDurationCount: 3,
-            maxLiveSyncPlaybackRate: 1.0,
-            liveSyncOnStallIncrease: 0.25,
+            maxLiveSyncPlaybackRate: 1.2,
+            liveSyncOnStallIncrease: 1,
+            nudgeOffset: 0.12,
+            nudgeMaxRetry: 8,
+            enableWorker: true,
+            startFragPrefetch: true,
+            testBandwidth: false,
+            manifestLoadingMaxRetry: 4,
+            manifestLoadingRetryDelay: 500,
+            manifestLoadingMaxRetryTimeout: 4000,
+            levelLoadingMaxRetry: 5,
+            levelLoadingRetryDelay: 700,
+            levelLoadingMaxRetryTimeout: 6000,
+            fragLoadingMaxRetry: 6,
+            fragLoadingRetryDelay: 800,
+            fragLoadingMaxRetryTimeout: 10000,
+            startLevel: -1,
+          });
+
+          hls.on(hlsErrorEvent, (_event: unknown, data: any) => {
+            if (!data) {
+              return;
+            }
+
+            if (data.fatal) {
+              if (data.type === hlsNetworkErrorType) {
+                console.warn('[LivePlayer] HLS fatal network error, restart loading', data);
+                hls.startLoad();
+                return;
+              }
+
+              if (data.type === hlsMediaErrorType) {
+                const now = Date.now();
+                if (now - hlsLastMediaRecoveryAt > 15000) {
+                  hlsMediaRecoveryCount = 0;
+                }
+                hlsLastMediaRecoveryAt = now;
+                hlsMediaRecoveryCount += 1;
+
+                if (hlsMediaRecoveryCount <= 2) {
+                  console.warn('[LivePlayer] HLS fatal media error, recover media', data);
+                  hls.recoverMediaError();
+                  return;
+                }
+
+                if (hlsMediaRecoveryCount === 3 && typeof hls.swapAudioCodec === 'function') {
+                  console.warn('[LivePlayer] HLS media error persists, swap audio codec + recover', data);
+                  hls.swapAudioCodec();
+                  hls.recoverMediaError();
+                  return;
+                }
+
+                console.warn('[LivePlayer] HLS media error recovery exhausted, remount stream', data);
+                emit('retry');
+                return;
+              }
+
+              console.warn('[LivePlayer] HLS unrecoverable fatal error, remount stream', data);
+              emit('retry');
+              return;
+            }
+
+            if (data.details === hlsBufferStalledDetail) {
+              try {
+                void video.play();
+              } catch {
+                // ignore auto-play rejection; user can continue manually
+              }
+            }
           });
+
           liveHls = hls;
           hls.loadSource(m3u8Url);
           hls.attachMedia(video);
@@ -541,14 +705,21 @@ async function mountPlayer(url: string) {
     },
   };
 
-  player = new Artplayer(playerOptions);
+  player = new ArtplayerCtor(playerOptions);
+  currentAppliedStreamUrl = url;
   danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
 
   // Some browsers still require an explicit play attempt after source mount.
   player.on('ready', () => {
+    if (mountToken !== playerMountToken) {
+      return;
+    }
+
     playerReady = true;
+    markPerformance('rm-player-ready');
     danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
     updateQualityControl();
+    syncDanmuConnection();
     flushPendingDanmu();
     try {
       player?.play();
@@ -572,23 +743,65 @@ async function applyStreamUrl(url: string) {
     return;
   }
 
+  latestRequestedStreamUrl = url;
+  const requestToken = ++streamSwitchToken;
+
+  markPerformance('rm-player-url-applied');
+
+  if (url === currentAppliedStreamUrl && player && playerReady) {
+    if (requestToken === streamSwitchToken) {
+      isStreamSwitching.value = false;
+    }
+    return;
+  }
+
   if (player && playerReady) {
+    isStreamSwitching.value = true;
     try {
       await exitPipIfNeeded();
+      if (requestToken !== streamSwitchToken) {
+        return;
+      }
       await player.switchUrl(url);
+      if (requestToken !== streamSwitchToken) {
+        const pending = latestRequestedStreamUrl;
+        if (pending && pending !== url) {
+          void applyStreamUrl(pending);
+        }
+        return;
+      }
+      currentAppliedStreamUrl = url;
+      const video = container.value?.querySelector('video') ?? null;
+      await waitForVideoPlayable(video);
+      if (requestToken !== streamSwitchToken) {
+        const pending = latestRequestedStreamUrl;
+        if (pending && pending !== url) {
+          void applyStreamUrl(pending);
+        }
+        return;
+      }
       updateQualityControl();
       return;
     } catch (error) {
       console.warn('[LivePlayer] switchUrl failed, remounting player', error);
+    } finally {
+      if (requestToken === streamSwitchToken) {
+        isStreamSwitching.value = false;
+      }
     }
   }
 
+  isStreamSwitching.value = true;
   await mountPlayer(url);
+  if (requestToken === streamSwitchToken) {
+    isStreamSwitching.value = false;
+  }
 }
 
 watch(
   () => props.chatRoomId,
   (roomId) => {
+    pendingRoomId = roomId ?? null;
     if (!danmuEnabledAtLoad) {
       currentRoomId = null;
       roomSwitchToken += 1;
@@ -596,13 +809,7 @@ watch(
       return;
     }
     pendingDanmuQueue.length = 0;
-    if (roomId) {
-      void initDanmu(roomId);
-    } else {
-      currentRoomId = null;
-      roomSwitchToken += 1;
-      void destroyDanmu();
-    }
+    syncDanmuConnection();
   },
   { immediate: true },
 );
@@ -678,6 +885,11 @@ onBeforeUnmount(async () => {
       <Message severity="warn" :closable="false"> 暂未获取到直播流地址 </Message>
     </div>
 
+    <div v-if="isStreamSwitching && !loading && !errorMessage" class="overlay center overlay-soft" aria-live="polite">
+      <ProgressSpinner style="width: 2rem; height: 2rem" strokeWidth="6" />
+      <span class="switching-tip">切换清晰度中...</span>
+    </div>
+
     <div ref="container" class="player-container" />
 
     <DanmuFilterDialog v-if="danmuEnabledAtLoad" v-model:visible="filterDialogVisible" />
@@ -718,6 +930,16 @@ onBeforeUnmount(async () => {
   text-align: center;
 }
 
+.overlay-soft {
+  z-index: 3;
+  background: linear-gradient(180deg, rgba(9, 16, 33, 0.08), rgba(9, 16, 33, 0.35));
+}
+
+.switching-tip {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.92);
+}
+
 .retry-btn {
   margin-top: 0.35rem;
 }
diff --git a/src/components/panels/CurrentMatchPanel.vue b/src/components/panels/CurrentMatchPanel.vue
index bf77e72..e4900a7 100644
--- a/src/components/panels/CurrentMatchPanel.vue
+++ b/src/components/panels/CurrentMatchPanel.vue
@@ -5,6 +5,7 @@ import { useUiStore } from '@/stores/ui';
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import { storeToRefs } from 'pinia';
 import Card from 'primevue/card';
+import Skeleton from 'primevue/skeleton';
 import { computed, watch } from 'vue';
 import ScheduleItem from '../common/ScheduleItem.vue';
 import MatchSupportButton from './MatchSupportButton.vue';
@@ -17,7 +18,7 @@ const uiStore = useUiStore();
 const dataStore = useRmDataStore();
 const matchEngagement = useMatchEngagementStore();
 
-const { runningMatchForSelectedZone } = storeToRefs(dataStore);
+const { runningMatchForSelectedZone, streamLoading, liveGameInfo } = storeToRefs(dataStore);
 const { pkEnabled } = storeToRefs(uiStore);
 
 const runningLiving = computed(() => {
@@ -29,6 +30,14 @@ const runningLiving = computed(() => {
   return ['STARTED', 'PLAYING'].includes(u);
 });
 
+const showMatchSkeleton = computed(() => {
+  if (runningMatchForSelectedZone.value) {
+    return false;
+  }
+
+  return streamLoading.value || !liveGameInfo.value;
+});
+
 watch(
   runningMatchForSelectedZone,
   (m) => {
@@ -75,4 +84,42 @@ function onSelectTeam(payload: TeamSelectPayload) {
       </template>
     </ScheduleItem>
   </div>
+
+  <Card v-else-if="showMatchSkeleton" class="match-placeholder-card">
+    <template #content>
+      <div class="match-placeholder">
+        <Skeleton width="100%" height="1.35rem" borderRadius="8px" />
+        <div class="placeholder-row">
+          <Skeleton width="32%" height="3.2rem" borderRadius="10px" />
+          <Skeleton width="10%" height="2.4rem" borderRadius="8px" />
+          <Skeleton width="32%" height="3.2rem" borderRadius="10px" />
+        </div>
+      </div>
+    </template>
+  </Card>
 </template>
+
+<style scoped>
+.match-placeholder-card {
+  min-height: 7.2rem;
+}
+
+.match-placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.placeholder-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+}
+
+@media (max-width: 768px) {
+  .match-placeholder-card {
+    min-height: 6rem;
+  }
+}
+</style>
diff --git a/src/components/panels/MatchReactionStrip.vue b/src/components/panels/MatchReactionStrip.vue
index 24e00e0..6eae6d4 100644
--- a/src/components/panels/MatchReactionStrip.vue
+++ b/src/components/panels/MatchReactionStrip.vue
@@ -55,15 +55,15 @@ function showReactionBurst(id: string, url: string) {
   burstHideTimer = setTimeout(() => {
     burstVisible.value = false;
     burstHideTimer = null;
-  }, 420);
+  }, 840);
   burstClearTimer = setTimeout(() => {
     burst.value = null;
     burstClearTimer = null;
-  }, 620);
+  }, 1200);
   burstUnlockTimer = setTimeout(() => {
     isBurstAnimating.value = false;
     burstUnlockTimer = null;
-  }, 620);
+  }, 1200);
 }
 
 function onReactionClick(item: ReactionItem) {
@@ -136,7 +136,7 @@ function chipContentClass(count: number) {
     enter-active-class="transition duration-300 ease-out"
     enter-from-class="translate-y-6 scale-50 rotate-[-12deg] opacity-0"
     enter-to-class="-translate-y-1 scale-110 rotate-3 opacity-100"
-    leave-active-class="transition duration-200 ease-in"
+    leave-active-class="transition duration-500 ease-in"
     leave-from-class="-translate-y-3 scale-100 opacity-100"
     leave-to-class="-translate-y-8 scale-90 opacity-0"
   >
diff --git a/src/components/panels/MatchSupportButton.vue b/src/components/panels/MatchSupportButton.vue
index e3fac60..4c15db1 100644
--- a/src/components/panels/MatchSupportButton.vue
+++ b/src/components/panels/MatchSupportButton.vue
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="anchorRef" class="relative flex shrink-0 items-center" @click.stop>
+  <div ref="anchorRef" class="relative flex shrink-0 items-center select-none" @click.stop @contextmenu.prevent>
     <Button
       rounded
       text
@@ -170,7 +170,14 @@ onBeforeUnmount(() => {
       @keydown.enter.stop.prevent="sendSupportOnce"
       @keydown.space.stop.prevent="sendSupportOnce"
     >
-      <img :src="oak" :alt="supportLabel" class="h-5 w-5 object-contain sm:h-6 sm:w-6" />
+      <img
+        :src="oak"
+        :alt="supportLabel"
+        class="support-icon h-5 w-5 object-contain sm:h-6 sm:w-6"
+        draggable="false"
+        @dragstart.prevent
+        @contextmenu.prevent
+      />
     </Button>
   </div>
 
@@ -206,6 +213,12 @@ onBeforeUnmount(() => {
   filter: drop-shadow(0 4px 8px rgb(15 23 42 / 0.28));
 }
 
+.support-icon {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 @keyframes floating-like-rise {
   0% {
     opacity: 0;
diff --git a/src/components/panels/ScheduleList.vue b/src/components/panels/ScheduleList.vue
index a4196d1..796b417 100644
--- a/src/components/panels/ScheduleList.vue
+++ b/src/components/panels/ScheduleList.vue
@@ -2,7 +2,7 @@
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import { groupScheduleRowsByDate, type MatchView } from '@/utils/matchView';
 import Divider from 'primevue/divider';
-import { computed } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import ScheduleItem from '../common/ScheduleItem.vue';
 
 interface Props {
@@ -10,17 +10,165 @@ interface Props {
   teamGroupMap?: Record<string, { group: string; rank: string }>;
   compact?: boolean;
   dateOrder?: 'asc' | 'desc';
+  incremental?: boolean;
+  chunkSize?: number;
+  active?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   dateOrder: 'asc',
+  incremental: true,
+  chunkSize: 10,
+  active: true,
 });
 
 const emit = defineEmits<{
   teamSelect: [payload: TeamSelectPayload];
 }>();
 
-const dateGroups = computed(() => groupScheduleRowsByDate(props.rows, props.dateOrder));
+const visibleCount = ref(0);
+const loadSentinel = ref<HTMLDivElement | null>(null);
+let observer: IntersectionObserver | null = null;
+let fallbackScheduled = false;
+let appendScheduled = false;
+let lastAppendAt = 0;
+
+const APPEND_COOLDOWN_MS = 100;
+
+const renderedRows = computed(() => {
+  if (!props.incremental) {
+    return props.rows;
+  }
+
+  return props.rows.slice(0, visibleCount.value);
+});
+
+const hasMoreRows = computed(() => props.incremental && visibleCount.value < props.rows.length);
+
+const dateGroups = computed(() => groupScheduleRowsByDate(renderedRows.value, props.dateOrder));
+
+function normalizeChunkSize(): number {
+  const parsed = Number(props.chunkSize ?? 10);
+  if (!Number.isFinite(parsed)) {
+    return 10;
+  }
+  return Math.max(10, Math.floor(parsed));
+}
+
+function resetVisibleCount() {
+  if (!props.incremental) {
+    visibleCount.value = props.rows.length;
+    return;
+  }
+
+  visibleCount.value = Math.min(props.rows.length, normalizeChunkSize());
+}
+
+function loadMoreRows() {
+  if (!hasMoreRows.value || appendScheduled) {
+    return;
+  }
+
+  const now = performance.now();
+  if (now - lastAppendAt < APPEND_COOLDOWN_MS) {
+    return;
+  }
+
+  appendScheduled = true;
+  lastAppendAt = now;
+  const nextCount = Math.min(props.rows.length, visibleCount.value + normalizeChunkSize());
+  visibleCount.value = nextCount;
+  void nextTick(() => {
+    appendScheduled = false;
+    scheduleViewportCheck();
+  });
+}
+
+function stopObserver() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+}
+
+function setupObserver() {
+  stopObserver();
+  if (!props.active || !hasMoreRows.value || !loadSentinel.value || typeof IntersectionObserver === 'undefined') {
+    return;
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) {
+        return;
+      }
+      loadMoreRows();
+    },
+    {
+      root: null,
+      rootMargin: '640px 0px',
+      threshold: 0,
+    },
+  );
+
+  observer.observe(loadSentinel.value);
+}
+
+function checkViewportAndLoadMore() {
+  if (!props.active || !hasMoreRows.value || !loadSentinel.value || typeof window === 'undefined') {
+    return;
+  }
+
+  const rect = loadSentinel.value.getBoundingClientRect();
+  if (rect.top <= window.innerHeight + 640) {
+    loadMoreRows();
+  }
+}
+
+function scheduleViewportCheck() {
+  if (fallbackScheduled || typeof window === 'undefined') {
+    return;
+  }
+
+  fallbackScheduled = true;
+  window.requestAnimationFrame(() => {
+    fallbackScheduled = false;
+    checkViewportAndLoadMore();
+  });
+}
+
+watch(
+  () => props.rows,
+  () => {
+    resetVisibleCount();
+    setupObserver();
+    scheduleViewportCheck();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => [props.incremental, props.chunkSize, props.active] as const,
+  () => {
+    resetVisibleCount();
+    setupObserver();
+    scheduleViewportCheck();
+  },
+);
+
+watch(hasMoreRows, () => {
+  setupObserver();
+  scheduleViewportCheck();
+});
+
+onMounted(() => {
+  setupObserver();
+  scheduleViewportCheck();
+});
+
+onBeforeUnmount(() => {
+  stopObserver();
+});
 
 function onTeamSelect(payload: TeamSelectPayload) {
   emit('teamSelect', payload);
@@ -50,6 +198,10 @@ function onTeamSelect(payload: TeamSelectPayload) {
         @team-select="onTeamSelect"
       />
     </section>
+
+    <div v-if="hasMoreRows" ref="loadSentinel" class="list-tail" aria-hidden="true">
+      <small>正在加载更多赛程...</small>
+    </div>
   </div>
 </template>
 
@@ -72,6 +224,15 @@ function onTeamSelect(payload: TeamSelectPayload) {
   min-width: 0;
 }
 
+.list-tail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.8rem;
+  padding: 0.35rem 0 0.55rem;
+  color: var(--text-color-secondary);
+}
+
 .date-sticky {
   position: sticky;
   top: var(--schedule-date-sticky-top, 0);
diff --git a/src/components/panels/SchedulePanel.vue b/src/components/panels/SchedulePanel.vue
index 27d6710..235494e 100644
--- a/src/components/panels/SchedulePanel.vue
+++ b/src/components/panels/SchedulePanel.vue
@@ -64,7 +64,7 @@ function applyFilters(source: typeof rows.value): typeof rows.value {
 
   if (selectedZone.value.length > 0) {
     const zoneSet = new Set(selectedZone.value);
-    filtered = filtered.filter((item) => zoneSet.has(item.zoneId));
+    filtered = filtered.filter((item) => zoneSet.has(item.zoneId ?? ''));
   }
 
   return filtered;
@@ -85,6 +85,8 @@ const resultRows = computed(() => {
   return filtered.slice().sort((a, b) => (b.startedAtTs ?? 0) - (a.startedAtTs ?? 0));
 });
 
+const listChunkSize = computed(() => 10);
+
 // Watch team options and reset selection if it becomes invalid
 watch(teamOptions, (options) => {
   const validValues = new Set(options.map((option) => option.value));
@@ -175,6 +177,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :rows="recentMatches"
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
+              :incremental="false"
+              :active="activeTab === 'recent'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
@@ -186,6 +190,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
               date-order="asc"
+              :chunk-size="listChunkSize"
+              :active="activeTab === 'schedule'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
@@ -197,6 +203,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
               date-order="desc"
+              :chunk-size="listChunkSize"
+              :active="activeTab === 'result'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
diff --git a/src/composables/danmuLifecycle.ts b/src/composables/danmuLifecycle.ts
index 735d5d6..50cdd34 100644
--- a/src/composables/danmuLifecycle.ts
+++ b/src/composables/danmuLifecycle.ts
@@ -11,7 +11,11 @@ export function bindDanmuRoomReset(chatRoomId: Ref<string | null>, clearMessages
           to: nextRoomId,
         });
       }
-      clearMessages();
+
+      // Keep cached history on the initial bind; only reset when switching between rooms.
+      if (prevRoomId && nextRoomId !== prevRoomId) {
+        clearMessages();
+      }
     },
   );
 }
diff --git a/src/danmu/im/im.worker.ts b/src/danmu/im/im.worker.ts
index aefa710..c37e93d 100644
--- a/src/danmu/im/im.worker.ts
+++ b/src/danmu/im/im.worker.ts
@@ -390,9 +390,9 @@ class ImRuntime {
     };
 
     const eventMessageName = typeof Event?.MESSAGE === 'string' && Event.MESSAGE.trim() ? Event.MESSAGE : 'message';
-    this.danmuClient.on(eventMessageName, this.danmuClientMessageHandler);
+    this.danmuClient?.on(eventMessageName, this.danmuClientMessageHandler);
     if (eventMessageName !== 'message') {
-      this.danmuClient.on('message', this.danmuClientMessageHandler);
+      this.danmuClient?.on('message', this.danmuClientMessageHandler);
     }
     return this.danmuClient as IMClient;
   }
diff --git a/src/iframe-inject.ts b/src/iframe-inject.ts
index 77fc942..2981194 100644
--- a/src/iframe-inject.ts
+++ b/src/iframe-inject.ts
@@ -38,11 +38,11 @@ if (existingIframe) {
 }
 
 const iframe = document.createElement('iframe') as HTMLIFrameElement;
-// iframe.src = 'https://rmlive.scutbot.cn';
-iframe.src = `http://localhost:5173`;
+iframe.src = 'https://rmlive.scutrobot.com';
+// iframe.src = `http://localhost:5173`;
 iframe.id = 'rm-live-iframe';
 iframe.allowFullscreen = true;
-iframe.allow = 'autoplay; fullscreen; picture-in-picture; notifications; permissions; periodic-sync';
+iframe.allow = 'autoplay; fullscreen; picture-in-picture; notifications; permissions; periodic-sync; vibrate';
 iframe.style.width = '100%';
 iframe.style.height = '100%';
 iframe.style.border = '0';
diff --git a/src/main.ts b/src/main.ts
index 75c04b8..c715cea 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,20 @@
 import Aura from '@primeuix/themes/aura';
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import 'primeicons/primeicons.css';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
-import { registerSW } from 'virtual:pwa-register';
 import { createApp } from 'vue';
 import App from './App.vue';
-
-const updateServiceWorker = registerSW({
-  immediate: true,
-  onNeedRefresh() {
-    void updateServiceWorker(true).then(() => {
-      window.location.reload();
-    });
-  },
-});
+import { markPerformance } from './utils/observability';
 
 import './styles/mobile-input.css';
 import './styles/primevue-theme.css';
 const app = createApp(App);
-app.use(createPinia());
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
 
 import './styles/danmu-tooltip.css';
 app.use(PrimeVue, {
@@ -35,4 +29,28 @@ app.use(PrimeVue, {
 app.use(ToastService);
 app.directive('tooltip', Tooltip);
 
+markPerformance('rm-app-mount-start');
 app.mount('#app');
+markPerformance('rm-app-mounted');
+
+function registerServiceWorkerWhenIdle() {
+  void import('virtual:pwa-register').then(({ registerSW }) => {
+    const updateServiceWorker = registerSW({
+      immediate: true,
+      onNeedRefresh() {
+        void updateServiceWorker(true).then(() => {
+          window.location.reload();
+        });
+      },
+    });
+  });
+}
+
+if (typeof window !== 'undefined') {
+  const idleScheduler = window.requestIdleCallback;
+  if (typeof idleScheduler === 'function') {
+    idleScheduler(registerServiceWorkerWhenIdle, { timeout: 3000 });
+  } else {
+    window.setTimeout(registerServiceWorkerWhenIdle, 0);
+  }
+}
diff --git a/src/stores/danmu.ts b/src/stores/danmu.ts
index ec5e21b..6fbadb9 100644
--- a/src/stores/danmu.ts
+++ b/src/stores/danmu.ts
@@ -85,4 +85,10 @@ export const useDanmuStore = defineStore('danmu', () => {
     resolveTooltipText,
     resolveTooltipMeta,
   };
+},
+{
+  persist: {
+    key: 'rmlive:danmu-history-cache',
+    pick: ['messages'],
+  },
 });
diff --git a/src/stores/rmData.ts b/src/stores/rmData.ts
index f03245d..46e3cbc 100644
--- a/src/stores/rmData.ts
+++ b/src/stores/rmData.ts
@@ -11,11 +11,14 @@ import type {
 } from '../types/api';
 import type { GroupSection, TeamGroupMeta } from '../utils/groupView';
 import type { MatchView } from '../utils/matchView';
-import { logInfo, logWarn } from '../utils/observability';
+import { logInfo, logWarn, markPerformance, measurePerformance } from '../utils/observability';
 import type { PlayerQualityOption } from '../utils/rmStreamView';
 import { normalizeZoneId, type ZoneOptionItem, type ZoneUiState } from '../utils/zoneView';
 import type {
+  RmDataBootstrapPayload,
   RmDataInitPayload,
+  RmDataPatchPayload,
+  RmDataSnapshotPatch,
   RmDataSnapshot,
   RmDataWorkerIncomingMessage,
   RmDataWorkerOutgoingMessage,
@@ -57,6 +60,7 @@ export const useRmDataStore = defineStore('rm-data', () => {
   let hasManualZoneSelection = false;
   let visibilityListenerAttached = false;
   let workerRestarting = false;
+  let latestSnapshotVersion = 0;
 
   function applySnapshot(snapshot: RmDataSnapshot) {
     liveGameInfo.value = snapshot.liveGameInfo;
@@ -86,6 +90,98 @@ export const useRmDataStore = defineStore('rm-data', () => {
     runningMatchForSelectedZone.value = snapshot.runningMatchForSelectedZone;
   }
 
+  function applySnapshotPatch(patch: RmDataSnapshotPatch) {
+    const keys = Object.keys(patch) as Array<keyof RmDataSnapshotPatch>;
+
+    for (const key of keys) {
+      const value = patch[key];
+      switch (key) {
+        case 'liveGameInfo':
+          liveGameInfo.value = (value as RmDataSnapshot['liveGameInfo']) ?? null;
+          break;
+        case 'currentAndNextMatches':
+          currentAndNextMatches.value = (value as RmDataSnapshot['currentAndNextMatches']) ?? null;
+          break;
+        case 'groupsOrder':
+          groupsOrder.value = (value as RmDataSnapshot['groupsOrder']) ?? null;
+          break;
+        case 'groupRankInfo':
+          groupRankInfo.value = (value as RmDataSnapshot['groupRankInfo']) ?? null;
+          break;
+        case 'robotData':
+          robotData.value = (value as RmDataSnapshot['robotData']) ?? null;
+          break;
+        case 'schedule':
+          schedule.value = (value as RmDataSnapshot['schedule']) ?? null;
+          break;
+        case 'selectedZoneId':
+          selectedZoneId.value = (value as RmDataSnapshot['selectedZoneId']) ?? null;
+          break;
+        case 'effectiveSelectedZoneId':
+          effectiveSelectedZoneId.value = (value as RmDataSnapshot['effectiveSelectedZoneId']) ?? null;
+          break;
+        case 'selectedQualityRes':
+          selectedQualityRes.value = (value as RmDataSnapshot['selectedQualityRes']) ?? null;
+          break;
+        case 'selectedZoneName':
+          selectedZoneName.value = (value as RmDataSnapshot['selectedZoneName']) ?? null;
+          break;
+        case 'selectedZoneUiState':
+          selectedZoneUiState.value = (value as RmDataSnapshot['selectedZoneUiState']) ?? null;
+          break;
+        case 'streamLoading':
+          streamLoading.value = Boolean(value);
+          break;
+        case 'streamErrorMessage':
+          streamErrorMessage.value = String(value ?? '');
+          break;
+        case 'zoneOptions':
+          zoneOptions.value = (value as RmDataSnapshot['zoneOptions']) ?? [];
+          break;
+        case 'effectiveStreamUrl':
+          effectiveStreamUrl.value = (value as RmDataSnapshot['effectiveStreamUrl']) ?? null;
+          break;
+        case 'effectiveStreamErrorMessage':
+          effectiveStreamErrorMessage.value = String(value ?? '');
+          break;
+        case 'groupSections':
+          groupSections.value = (value as RmDataSnapshot['groupSections']) ?? [];
+          break;
+        case 'teamGroupMap':
+          teamGroupMap.value = (value as RmDataSnapshot['teamGroupMap']) ?? {};
+          break;
+        case 'scheduleEventTitle':
+          scheduleEventTitle.value = String(value ?? '');
+          break;
+        case 'playerQualityOptions':
+          playerQualityOptions.value = (value as RmDataSnapshot['playerQualityOptions']) ?? [];
+          break;
+        case 'selectedZoneChatRoomId':
+          selectedZoneChatRoomId.value = (value as RmDataSnapshot['selectedZoneChatRoomId']) ?? null;
+          break;
+        case 'scheduleMatchRows':
+          scheduleMatchRows.value = (value as RmDataSnapshot['scheduleMatchRows']) ?? [];
+          break;
+        case 'runningMatchForSelectedZone':
+          runningMatchForSelectedZone.value = (value as RmDataSnapshot['runningMatchForSelectedZone']) ?? null;
+          break;
+      }
+    }
+  }
+
+  function applyBootstrapPayload(payload: RmDataBootstrapPayload) {
+    latestSnapshotVersion = payload.version;
+    applySnapshot(payload.snapshot);
+  }
+
+  function applyPatchPayload(payload: RmDataPatchPayload) {
+    if (payload.version <= latestSnapshotVersion) {
+      return;
+    }
+    latestSnapshotVersion = payload.version;
+    applySnapshotPatch(payload.patch);
+  }
+
   function buildInitPayload(): RmDataInitPayload {
     return {
       historySelectedZoneId: historySelectedZoneId.value,
@@ -142,7 +238,13 @@ export const useRmDataStore = defineStore('rm-data', () => {
       }
 
       if (data.type === 'BOOTSTRAP_STATE' || data.type === 'PATCH_STATE') {
-        applySnapshot(data.payload);
+        if (data.type === 'BOOTSTRAP_STATE') {
+          applyBootstrapPayload(data.payload);
+          markPerformance('rm-data-bootstrap-received');
+          measurePerformance('rm-startup-to-bootstrap', 'rm-app-mount-start', 'rm-data-bootstrap-received');
+        } else {
+          applyPatchPayload(data.payload);
+        }
         return;
       }
 
@@ -199,7 +301,9 @@ export const useRmDataStore = defineStore('rm-data', () => {
 
   function startWorker() {
     isStopping = false;
+    latestSnapshotVersion = 0;
     const currentWorker = spawnWorker();
+    markPerformance('rm-data-worker-init-dispatched');
     currentWorker.postMessage({ type: 'INIT', payload: buildInitPayload() });
     attachVisibilityListener();
     setVisibilityInWorker();
@@ -246,8 +350,14 @@ export const useRmDataStore = defineStore('rm-data', () => {
   function startPolling() {
     stopWorker();
     hasManualZoneSelection = false;
-    streamLoading.value = true;
-    streamErrorMessage.value = '';
+    const hasWarmCache =
+      Boolean(effectiveStreamUrl.value) ||
+      Boolean(runningMatchForSelectedZone.value) ||
+      scheduleMatchRows.value.length > 0;
+    streamLoading.value = !hasWarmCache;
+    if (!hasWarmCache) {
+      streamErrorMessage.value = '';
+    }
     startWorker();
   }
 
@@ -289,4 +399,26 @@ export const useRmDataStore = defineStore('rm-data', () => {
     stopPolling,
     retryLiveStream,
   };
+},
+{
+  persist: {
+    key: 'rmlive:rm-data-cache',
+    pick: [
+      'liveGameInfo',
+      'selectedZoneId',
+      'effectiveSelectedZoneId',
+      'selectedQualityRes',
+      'selectedZoneName',
+      'selectedZoneUiState',
+      'zoneOptions',
+      'effectiveStreamUrl',
+      'effectiveStreamErrorMessage',
+      'playerQualityOptions',
+      'selectedZoneChatRoomId',
+      'scheduleEventTitle',
+      'scheduleMatchRows',
+      'runningMatchForSelectedZone',
+      'teamGroupMap',
+    ],
+  },
 });
diff --git a/src/utils/observability.ts b/src/utils/observability.ts
index 1aa03ff..20bb920 100644
--- a/src/utils/observability.ts
+++ b/src/utils/observability.ts
@@ -49,3 +49,32 @@ export function logWarn(scope: string, message: string, meta?: LogMeta): void {
 
   console.warn(withPrefix(scope, message));
 }
+
+export function markPerformance(name: string): void {
+  if (typeof performance === 'undefined' || typeof performance.mark !== 'function') {
+    return;
+  }
+
+  try {
+    performance.mark(name);
+  } catch {
+    // ignore duplicate marks or unsupported contexts
+  }
+}
+
+export function measurePerformance(name: string, startMark: string, endMark?: string): void {
+  if (typeof performance === 'undefined' || typeof performance.measure !== 'function') {
+    return;
+  }
+
+  try {
+    if (endMark) {
+      performance.measure(name, startMark, endMark);
+      return;
+    }
+
+    performance.measure(name, startMark);
+  } catch {
+    // ignore missing marks or duplicate measures
+  }
+}
diff --git a/src/workers/rmData.worker.ts b/src/workers/rmData.worker.ts
index 393cc83..e5317ae 100644
--- a/src/workers/rmData.worker.ts
+++ b/src/workers/rmData.worker.ts
@@ -31,7 +31,13 @@ import {
 } from '../utils/rmStreamView';
 import { getNowEpochSeconds } from '../utils/timeNow';
 import { normalizeZoneId, resolveZoneUiState, toZoneOptionItem, type ZoneOptionItem } from '../utils/zoneView';
-import type { RmDataInitPayload, RmDataSnapshot, RmDataWorkerIncomingMessage } from './rmDataProtocol';
+import { markPerformance } from '../utils/observability';
+import type {
+  RmDataInitPayload,
+  RmDataSnapshot,
+  RmDataSnapshotPatch,
+  RmDataWorkerIncomingMessage,
+} from './rmDataProtocol';
 
 declare const self: DedicatedWorkerGlobalScope;
 
@@ -78,7 +84,92 @@ let stopped = false;
 let bootstrapToken = 0;
 let streamProbeToken = 0;
 let snapshotTimer: ReturnType<typeof setTimeout> | null = null;
-let pendingSnapshotKind: 'BOOTSTRAP_STATE' | 'PATCH_STATE' | null = null;
+let pendingBootstrapSnapshot = false;
+let pendingPatchKeys = new Set<keyof RmDataSnapshot>();
+let snapshotVersion = 0;
+let lastPostedSnapshot: RmDataSnapshot | null = null;
+
+const SNAPSHOT_KEYS: Array<keyof RmDataSnapshot> = [
+  'liveGameInfo',
+  'currentAndNextMatches',
+  'groupsOrder',
+  'groupRankInfo',
+  'robotData',
+  'schedule',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedQualityRes',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'streamLoading',
+  'streamErrorMessage',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'groupSections',
+  'teamGroupMap',
+  'scheduleEventTitle',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const STREAM_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'liveGameInfo',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedQualityRes',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'streamLoading',
+  'streamErrorMessage',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+  'groupSections',
+  'teamGroupMap',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const MATCH_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'currentAndNextMatches',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const GROUP_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = ['groupsOrder', 'groupSections', 'teamGroupMap'];
+
+const STREAM_STATUS_KEYS: Array<keyof RmDataSnapshot> = [
+  'streamLoading',
+  'streamErrorMessage',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'selectedZoneUiState',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+];
+
+const SCHEDULE_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'schedule',
+  'scheduleEventTitle',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'groupSections',
+  'teamGroupMap',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+];
 
 interface PollingLoop {
   start: () => void;
@@ -216,12 +307,57 @@ function buildSnapshot(): RmDataSnapshot {
   };
 }
 
-function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE') {
+function isSnapshotValueEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) {
+    return true;
+  }
+
+  if (a == null || b == null) {
+    return false;
+  }
+
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return false;
+  }
+
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+
+function buildSnapshotPatch(
+  nextSnapshot: RmDataSnapshot,
+  prevSnapshot: RmDataSnapshot,
+  keys: Array<keyof RmDataSnapshot>,
+): RmDataSnapshotPatch {
+  const patch: RmDataSnapshotPatch = {};
+  const patchTarget = patch as Record<string, unknown>;
+
+  for (const key of keys) {
+    if (isSnapshotValueEqual(nextSnapshot[key], prevSnapshot[key])) {
+      continue;
+    }
+
+    patchTarget[key] = nextSnapshot[key];
+  }
+
+  return patch;
+}
+
+function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE', keys: Array<keyof RmDataSnapshot> = SNAPSHOT_KEYS) {
   if (stopped) {
     return;
   }
 
-  pendingSnapshotKind = pendingSnapshotKind === 'BOOTSTRAP_STATE' ? 'BOOTSTRAP_STATE' : kind;
+  if (kind === 'BOOTSTRAP_STATE') {
+    pendingBootstrapSnapshot = true;
+  } else {
+    for (const key of keys) {
+      pendingPatchKeys.add(key);
+    }
+  }
 
   if (snapshotTimer) {
     clearTimeout(snapshotTimer);
@@ -229,9 +365,43 @@ function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE') {
 
   snapshotTimer = setTimeout(() => {
     snapshotTimer = null;
-    const snapshotKind = pendingSnapshotKind ?? 'PATCH_STATE';
-    pendingSnapshotKind = null;
-    self.postMessage({ type: snapshotKind, payload: buildSnapshot() });
+    const snapshot = buildSnapshot();
+
+    if (pendingBootstrapSnapshot || !lastPostedSnapshot) {
+      snapshotVersion += 1;
+      self.postMessage({
+        type: 'BOOTSTRAP_STATE',
+        payload: {
+          version: snapshotVersion,
+          snapshot,
+        },
+      });
+      pendingBootstrapSnapshot = false;
+      pendingPatchKeys.clear();
+      lastPostedSnapshot = snapshot;
+      return;
+    }
+
+    const keysToCompare = pendingPatchKeys.size ? [...pendingPatchKeys] : SNAPSHOT_KEYS;
+    const patch = buildSnapshotPatch(snapshot, lastPostedSnapshot, keysToCompare);
+    pendingPatchKeys.clear();
+
+    if (Object.keys(patch).length === 0) {
+      return;
+    }
+
+    snapshotVersion += 1;
+    self.postMessage({
+      type: 'PATCH_STATE',
+      payload: {
+        version: snapshotVersion,
+        patch,
+      },
+    });
+    lastPostedSnapshot = {
+      ...lastPostedSnapshot,
+      ...patch,
+    } as RmDataSnapshot;
   }, 32);
 }
 
@@ -369,7 +539,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
 
   if (options.showLoading) {
     state.streamLoading = true;
-    scheduleSnapshot('PATCH_STATE');
+    scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
   }
 
   if (!streamUrl) {
@@ -381,7 +551,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
     if (options.showLoading) {
       state.streamLoading = false;
     }
-    scheduleSnapshot('PATCH_STATE');
+    scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
     return;
   }
 
@@ -394,7 +564,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
   if (options.showLoading) {
     state.streamLoading = false;
   }
-  scheduleSnapshot('PATCH_STATE');
+  scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
 }
 
 function stopAll() {
@@ -404,30 +574,37 @@ function stopAll() {
     clearTimeout(snapshotTimer);
     snapshotTimer = null;
   }
-  pendingSnapshotKind = null;
+  pendingBootstrapSnapshot = false;
+  pendingPatchKeys.clear();
+  lastPostedSnapshot = null;
+  snapshotVersion = 0;
   pollingLoops.forEach((loop) => loop.stop());
   pollingLoops.clear();
 }
 
-async function runBootstrap(payload: RmDataInitPayload) {
+async function runBootstrap(_payload: RmDataInitPayload) {
   const token = ++bootstrapToken;
   const startedAt = Date.now();
 
-  const results = await Promise.allSettled([
+  const criticalResultsPromise = Promise.allSettled([
     withBootstrapTimeout(fetchLiveGameInfo(), startedAt),
     withBootstrapTimeout(fetchCurrentAndNextMatches(), startedAt),
     withBootstrapTimeout(fetchGroupsOrder(), startedAt),
+  ]);
+
+  const secondaryResultsPromise = Promise.allSettled([
     withBootstrapTimeout(fetchSchedule(), startedAt),
     withBootstrapTimeout(fetchRobotData(), startedAt),
     withBootstrapTimeout(fetchGroupRankInfo(), startedAt),
   ]);
 
+  const results = await criticalResultsPromise;
+
   if (stopped || token !== bootstrapToken) {
     return;
   }
 
-  const [liveGameInfoResult, currentAndNextResult, groupsOrderResult, scheduleResult, robotResult, groupRankResult] =
-    results;
+  const [liveGameInfoResult, currentAndNextResult, groupsOrderResult] = results;
 
   if (liveGameInfoResult.status === 'fulfilled') {
     state.liveGameInfo = liveGameInfoResult.value;
@@ -438,23 +615,11 @@ async function runBootstrap(payload: RmDataInitPayload) {
   if (groupsOrderResult.status === 'fulfilled') {
     state.groupsOrder = groupsOrderResult.value;
   }
-  if (scheduleResult.status === 'fulfilled') {
-    state.schedule = scheduleResult.value;
-  }
-  if (robotResult.status === 'fulfilled') {
-    state.robotData = robotResult.value;
-  }
-  if (groupRankResult.status === 'fulfilled') {
-    state.groupRankInfo = groupRankResult.value;
-  }
 
   const settledResults: Array<[string, PromiseSettledResult<unknown>]> = [
     ['liveGameInfo', liveGameInfoResult],
     ['currentAndNextMatches', currentAndNextResult],
     ['groupsOrder', groupsOrderResult],
-    ['schedule', scheduleResult],
-    ['robotData', robotResult],
-    ['groupRankInfo', groupRankResult],
   ];
 
   const rejectedSources = settledResults.filter(([, result]) => result.status === 'rejected').map(([name]) => name);
@@ -472,9 +637,46 @@ async function runBootstrap(payload: RmDataInitPayload) {
   }
 
   syncSelectionAfterDataChange();
+  state.streamLoading = false;
+  markPerformance('rm-data-bootstrap-critical-ready');
   scheduleSnapshot('BOOTSTRAP_STATE');
-  void probeSelectedStreamAvailability({ showLoading: true });
-  void payload;
+  void probeSelectedStreamAvailability({ showLoading: false });
+
+  void secondaryResultsPromise.then((secondaryResults) => {
+    if (stopped || token !== bootstrapToken) {
+      return;
+    }
+
+    const [scheduleResult, robotResult, groupRankResult] = secondaryResults;
+    if (scheduleResult.status === 'fulfilled') {
+      state.schedule = scheduleResult.value;
+    }
+    if (robotResult.status === 'fulfilled') {
+      state.robotData = robotResult.value;
+    }
+    if (groupRankResult.status === 'fulfilled') {
+      state.groupRankInfo = groupRankResult.value;
+    }
+
+    const secondarySettledResults: Array<[string, PromiseSettledResult<unknown>]> = [
+      ['schedule', scheduleResult],
+      ['robotData', robotResult],
+      ['groupRankInfo', groupRankResult],
+    ];
+    const secondaryRejectedSources = secondarySettledResults
+      .filter(([, result]) => result.status === 'rejected')
+      .map(([name]) => name);
+
+    if (secondaryRejectedSources.length > 0) {
+      postLog('warn', 'bootstrap', 'secondary bootstrap completed with rejected requests', {
+        rejectedSources: secondaryRejectedSources,
+      });
+    }
+
+    syncSelectionAfterDataChange();
+    markPerformance('rm-data-bootstrap-secondary-ready');
+    scheduleSnapshot('PATCH_STATE');
+  });
 }
 
 function startPollingLoops() {
@@ -495,7 +697,7 @@ function startPollingLoops() {
           if (selectedZone && resolveZoneUiState(selectedZone, getNowEpochSeconds()) === 'live') {
             const message = '直播流暂时不可用，请稍后重试';
             setStreamError(message);
-            scheduleSnapshot('PATCH_STATE');
+            scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
           }
           postLog('warn', 'stream', 'live_game_info polling failed', { error: toErrorSummary(error) });
         }
@@ -511,7 +713,7 @@ function startPollingLoops() {
       async () => {
         try {
           state.currentAndNextMatches = await fetchCurrentAndNextMatches();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', MATCH_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'currentAndNextMatches', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -527,7 +729,7 @@ function startPollingLoops() {
       async () => {
         try {
           state.groupsOrder = await fetchGroupsOrder();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', GROUP_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'groupsOrder', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -544,7 +746,7 @@ function startPollingLoops() {
         try {
           state.schedule = await fetchSchedule();
           syncSelectionAfterDataChange();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', SCHEDULE_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'schedule', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -571,6 +773,10 @@ function handleInit(payload: RmDataInitPayload) {
   state.streamLoading = true;
   state.streamErrorMessage = '';
   state.visible = true;
+  pendingBootstrapSnapshot = false;
+  pendingPatchKeys.clear();
+  lastPostedSnapshot = null;
+  snapshotVersion = 0;
   pollingLoops.forEach((loop) => loop.stop());
   pollingLoops.clear();
   void runBootstrap(payload).then(() => {
@@ -613,14 +819,16 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
     state.selectedZoneId =
       data.payload.zoneId != null && data.payload.zoneId !== '' ? normalizeZoneId(data.payload.zoneId) : null;
     syncSelectionAfterDataChange();
-    void probeSelectedStreamAvailability({ showLoading: true });
+    scheduleSnapshot('PATCH_STATE', STREAM_DOMAIN_KEYS);
+    void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }
 
   if (data.type === 'USER_SELECT_QUALITY') {
     state.selectedQualityRes =
       data.payload.qualityRes && data.payload.qualityRes.trim() ? data.payload.qualityRes : null;
-    void probeSelectedStreamAvailability({ showLoading: true });
+    scheduleSnapshot('PATCH_STATE', STREAM_DOMAIN_KEYS);
+    void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }
 
@@ -641,7 +849,7 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
       .finally(() => {
         if (state.streamLoading) {
           state.streamLoading = false;
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
         }
       });
   }
diff --git a/src/workers/rmDataProtocol.ts b/src/workers/rmDataProtocol.ts
index 1edcaa5..afb7705 100644
--- a/src/workers/rmDataProtocol.ts
+++ b/src/workers/rmDataProtocol.ts
@@ -44,6 +44,18 @@ export interface RmDataSnapshot {
   runningMatchForSelectedZone: MatchView | null;
 }
 
+export type RmDataSnapshotPatch = Partial<RmDataSnapshot>;
+
+export interface RmDataBootstrapPayload {
+  version: number;
+  snapshot: RmDataSnapshot;
+}
+
+export interface RmDataPatchPayload {
+  version: number;
+  patch: RmDataSnapshotPatch;
+}
+
 export type RmDataWorkerIncomingMessage =
   | { type: 'INIT'; payload: RmDataInitPayload }
   | { type: 'USER_SELECT_ZONE'; payload: { zoneId: string | null } }
@@ -53,8 +65,8 @@ export type RmDataWorkerIncomingMessage =
   | { type: 'STOP' };
 
 export type RmDataWorkerOutgoingMessage =
-  | { type: 'BOOTSTRAP_STATE'; payload: RmDataSnapshot }
-  | { type: 'PATCH_STATE'; payload: RmDataSnapshot }
+  | { type: 'BOOTSTRAP_STATE'; payload: RmDataBootstrapPayload }
+  | { type: 'PATCH_STATE'; payload: RmDataPatchPayload }
   | { type: 'STREAM_ERROR'; payload: { message: string } }
   | {
       type: 'LOG';