perf: keep Slise banner mounted across navigation + gapless per-page …#687
Merged
liangping merged 1 commit intoJul 9, 2026
Merged
Conversation
…refresh PR ping-pub#686 fixed cold-load, but the banner still went blank during client-side page switches (measured on ping.pub: ~500ms median, up to ~2.5s on heavy pages). Cause: <AdBanner> lived inside <RouterView><Transition>, so it was destroyed/recreated on every navigation — Slise blanked the <ins> and only repainted once the destination page had mounted, so the delay tracked page weight. Fix: - Move <AdBanner> out of <RouterView> in DefaultLayout so it mounts once and persists across navigation (never unmounts -> never blanks). - In AdBanner, watch route.fullPath and refresh gaplessly: drop data-ad-loaded (keeping the old creative on screen) then call adsbyslisesync(); Slise swaps the new creative in only when ready, so there is no blank gap. Preserves a fresh creative/impression per page view. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Keep Slise banner mounted across navigation + gapless per-page refresh
Background
PR #686 fixed the cold-load delay (preconnect + preload of
embed.js, andsyncing on the script
loadevent instead of a one-shottypeofcheck). Afterthat merged you noted:
This PR fixes that remaining navigation delay.
What was wrong (measured on production ping.pub)
<AdBanner>lived inside<RouterView><Transition mode="out-in">, so it wasdestroyed and recreated on every client-side navigation. On each remount
Slise blanks the
<ins>and refetches a creative, so the banner went blank andonly repainted once the (often heavy) destination page finished mounting.
Timing
click → banner visibleacross 37 real navigations:The delay tracked page weight — the blank banner competed with the route
component for the main thread, so
/cosmos/uptimewas consistently ~2.5s blank.It was not a queue leak (
window.adsbyslisestays length 1) and not aCSS transition.
The fix
Persist the banner.
<AdBanner>is now a sibling above<RouterView>in
DefaultLayout.vue, so it mounts once and stays mounted acrossnavigations — never destroyed, so it never blanks.
Refresh gaplessly per navigation.
AdBannerwatchesroute.fullPath.On each navigation it removes
data-ad-loadedfrom its<ins>withoutclearing the existing creative, then calls
window.adsbyslisesync(). Sliserefetches and swaps the new creative in only when ready, so the previous
ad stays on screen the whole time — no blank gap.
(Re-calling
adsbyslisesync()on an<ins>that still hasdata-ad-loadeddoes nothing — Slise skips loaded slots — which is why the flag must be
dropped first. Verified against the live embed.)
Result
loads in the background.
Trade-off / rollback
Keeps a per-navigation ad refresh (every page view = fresh impression). If
that is not wanted, delete the
route.fullPathwatcher inAdBanner.vueandthe banner stays a single persistent ad — still gap-free, just no rotation.