Taro构建的H5页面路由切换返回上一页存在白屏页面过渡

项目背景：Taro与Hybrid开发

项目使用Taro框架同时开发微信小程序和H5页面，其中H5页面被嵌入到App中作为Hybrid开发的一部分。

问题描述：白屏现象

在H5页面中使用了taro-router进行页面跳转，整体体验上大部分情况下是流畅的。但在某些情况下，比如用户通过侧滑返回上一页时，会出现白色页面短暂的过渡现象。这个白屏问题严重影响了用户体验，特别是在用户希望快速返回时，白屏给人一种卡顿、未加载完全的感觉。以下是我在视频中捕捉到的问题现象：

1. 用户在H5页面中侧滑返回时，页面先变为空白，然后再呈现上一页的内容。
2. 白屏时间虽然很短，但对于频繁操作的用户来说，这种不流畅感很明显。

可能的原因包括：

1. 页面状态未及时恢复：由于侧滑返回时，Taro可能未能在合适的时间点恢复之前页面的状态，导致页面需要重新渲染，从而产生白屏。

2. WebView渲染延迟：在一些设备上，嵌入的WebView对于页面的渲染有微小延迟，而这种延迟在页面状态切换时尤为明显。

3. 动画过渡问题：Taro在页面过渡时的动画未能与侧滑返回的动画同步，从而导致视觉上出现白屏效果。

解决方案

app.config.ts

 * h5 路由切换动画配置项
 * @see https://taro-docs.jd.com/docs/app-config#animation
 */
  animation: {
    duration: 500,
    delay: 0,
  },

app.ts 中引入全局样式

div.taro_page_shade,
div.taro_router
  > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(
    .taro_tabbar_page
  ):not(:last-child) {
  display: initial;
}

div.taro_router > .taro_page {
  transition-timing-function: cubic-bezier(0.26, 1, 0.48, 1);

  // 修复 h5 首页中使用 useLoad 导致出现路由动画的问题
  &:first-child {
    transition: none;
  }
}

其taro-router源码地址

解决后的效果图

其他优化方案可参考：

优化侧滑返回体验

为了解决这个问题，我尝试了一些方案，并找到了有效的优化方法：

1. 使用原生路由控制：

为了更好地处理侧滑返回的问题，可以尝试通过监听浏览器的popstate事件来手动控制页面的返回逻辑，而不是完全依赖taro-router。

可以结合Taro的生命周期函数，确保在页面卸载和返回时，页面状态能够及时恢复。例如：

window.addEventListener('popstate', () => {
  // 在这里添加逻辑，确保返回时页面状态保持一致
});

2. 添加页面缓存，减少重新渲染：

利用页面缓存技术（如keep-alive机制）保持返回页面的状态，避免页面在返回时重新加载和渲染。

可以借助Taro的componentDidHide和componentDidShow生命周期钩子来处理页面缓存，确保页面在隐藏后不会被销毁，从而提高返回时的渲染速度。

3. 优化过渡动画：

如果使用了自定义的过渡动画，可以调整动画的持续时间和缓动效果，尽量与系统侧滑的返回效果保持一致，减少视觉上不协调的感觉。

确保动画在页面返回时能够流畅过渡，而不是直接切换到空白页面。

4. 减少页面体积和资源请求：

尽量减小页面的体积，减少不必要的资源请求，以加快页面的渲染速度。

使用懒加载和资源压缩等手段，提高页面的加载和渲染性能，从而减少返回时的白屏现象。

5. 自定义路由堆栈管理：

可以尝试自己管理页面的路由堆栈，通过将各个页面状态存储在全局状态或缓存中，侧滑返回时根据当前的堆栈状态重新渲染页面，避免直接使用taro-router的默认行为。

6. 减少网络请求延迟：

页面跳转时，尽量减少不必要的异步操作。通过提前缓存部分静态资源以及页面的初始状态，减少页面在返回时对服务器或其他网络资源的依赖，保证页面在极短时间内恢复显示。

7. 使用Taro的预加载机制：

Taro提供了一些预加载页面数据的能力，利用componentWillPreload进行页面的预加载数据处理，可以让页面在用户触发返回前，已经做好准备，缩短白屏时间。