首屏加载时间对收益的影响

image.png

什么是 App Shell

application shell 应用程序壳，通常使用用户所需的最小资源来实现，相对不变的内容。
使用 App Shell + Service Worker 的技术可以减少在页面加载时的白屏时间，优先加载部分内容，给用户更好的用户体验。

image.png

什么是 Skeleton

页面基本骨架，基本上等于 loading 页面。

image.png

App Shell 模型和 Skeleton

  • 两者一起使用
  • 常用于 SPA
  • 目的：减少白屏时间，提升用户体验。
  • App Shell 常驻页面，Skeleton 只在加载新页面时出现。
  • App Shell 一般不会改变，Skeleton 一般会随页面改变。