前言
PWA （Progressive Web App）是一种新型的 web 应用程序，它具有快速、可靠、安全和离线可用的特性。在使用 PWA 过程中，我们发现有一个问题：在等待应用程序加载内容的过程中，用户体验不尽如人意，导致了应用程序体验的下降。因此我们需要考虑优化 PWA 的加载速度和用户体验，一种解决方案是使用骨架图。
骨架图（Skeleton Screen 或 Skeleton Page）是指在页面加载内容之前，展示给用户的占位图形，它可以提高用户的等待体验，保持用户的流畅感，降低用户的焦虑度。本文将分享 PWA 优化经验总结中的骨架图方案，以及如何实现和优化骨架图。
骨架图方案
骨架图可以是静态的图片或者动态的加载动画，也可以是静态和动态的组合。下面介绍一些常用的骨架图方案。
线性加载方案
线性加载方案是指在页面顶部到底部，按照页面的内容和结构，逐步加载内容。这种骨架图方案看起来像一条直线，给用户一种逐渐加载的感觉。
代码示例：
<div class="header"></div> <div class="content"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="footer"></div>
-- -------------------- ---- ------- ------- - ------ ----- ------- ----- ----------------- ----- - ---- - ------ ----- ------- ----- -------------- ----- ----------------- ----- - ------- - ------ ----- ------- ----- ----------------- ----- -
网格加载方案
网格加载方案是指在页面上，按照网格或矩阵的形式，加载内容。这种骨架图方案看起来像一个表格或九宫格，给用户一种整齐紧凑的感觉。
代码示例：
-- -------------------- ---- ------- ---- ------------- ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ------
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------- ----- - ---- - ------ ----- ------- ----- ----------------- ----- -
渐进加载方案
渐进加载方案是指在页面上，按照内容的优先级和重要程度，先加载主要内容，再加载次要内容，最后加载背景和辅助内容。这种骨架图方案看起来像一个渐进式的过程，给用户一种渐进式展现的感觉。
代码示例：
-- -------------------- ---- ------- ---- --------------------- ---- ---------------- ---- ---------- ----------------- ---- ---------- ----------------- ---- ------------------ ---- ------------------ ---- ---------- ------------------ ------ ---- ---------------------
-- -------------------- ---- ------- ------- - ------ ----- ------- ----- ----------------- ----- - ---- - ------ ----- ------- ----- -------------- ----- ----------------- ----- - ---------- - ------- ----- - ----------- - ------- ------ - ------- - ------ ----- ------- ----- ----------------- ----- -
实现和优化骨架图
实现和优化骨架图需要注意以下几点：
- 确定骨架图方案，尽量符合页面的内容和结构，符合用户的阅读习惯。
- 骨架图需要在代码中实现，可以使用 HTML、CSS 和 JavaScript。具体实现中，需要注意代码的可读性、可维护性和可扩展性。
- 骨架图需要在页面加载内容之前展示，可以使用替代内容、占位符或者隐藏和显示的方式。具体实现中，需要注意代码的性能和可靠性。
- 优化骨架图需要进行性能测试和用户评估，了解用户的反馈和需求，优化代码的性能和用户体验。
结论
骨架图是一种优化 PWA 加载速度和用户体验的方案，它可以提高用户的等待体验，保持用户的流畅感，降低用户的焦虑度。我们可以使用线性加载方案、网格加载方案、渐进加载方案等多种方案实现骨架图，同时需要注意实现和优化骨架图的细节和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2b971f6b2d6eab3dfcafb