如何在页面切换过渡前完成目标页面的全部或部分内容加载

你提到的执行逻辑完全可行，这是目前前端领域优化页面跳转体验的成熟方案，完全可以避免跳转后再等待资源加载的糟糕体验。

实现过程中注意以下核心要点：

• 点击跳转按钮后首先锁定当前操作状态，比如给跳转按钮加loading状态、禁止重复触发，暂时不要执行路由切换或者旧页面卸载操作
• 预加载阶段建议将两类任务并行执行，最大程度压缩等待时间：
  • 静态资源加载：如果是单页应用的异步路由，优先拉取目标页对应的JS、CSS分包资源；如果是多页应用，可以提前通过prefetch标记预拉取目标页的静态资源
  • 动态数据请求：直接调用目标页对应的业务接口方法完成数据库查询请求，不用等待静态资源加载完成再触发
• 所有预加载任务全部完成后再执行页面过渡流程：可以先执行旧页面的退场动画，动画结束后挂载已加载完成的目标页DOM，再执行新页面的入场动画，全程不会出现白屏或者空白加载占位的情况

你可以参考下面的极简实现伪代码：

// 跳转按钮点击事件处理
async function handlePageJump() {
  // 锁定操作状态
  jumpBtn.disabled = true
  jumpBtn.innerText = '加载中'

  // 并行执行静态资源加载和动态数据请求
  const [targetPageModule, targetPageData] = await Promise.all([
    import('../pages/targetPage/index.js'), // 加载目标页异步分包
    fetchTargetPageBizData(params) // 请求目标页业务数据
  ])

  // 加载完成后执行过渡逻辑
  await currentPageFadeOutAnim() // 旧页面退场动画
  // 传入预加载好的数据，挂载新页面
  renderTargetPage(targetPageModule, targetPageData)
  await targetPageFadeInAnim() // 新页面入场动画

  // 恢复操作状态
  jumpBtn.disabled = false
  jumpBtn.innerText = '跳转'
}

如果是多页应用场景，也可以将提前请求好的动态数据存在sessionStorage中，目标页加载完成后直接读取本地缓存的数据即可，无需再发起接口请求，同样可以大幅提升加载体验。

内容的提问来源于stack exchange，提问作者arcrub