什么是骨架屏？
骨架屏是指在页面加载过程中，为了让用户在等待页面内容加载完成之前，看到一个类似页面结构的占位符，以便于用户对页面结构进行预览，达到更好的用户体验。在 PWA 中，骨架屏也是非常重要的一个展示方式。
为什么要使用骨架屏？
在移动设备上，因为网络质量不稳定，页面加载会比较慢，有时候需要等待几秒钟乃至十几秒钟，这段时间对于用户来说是非常难熬的，很容易让用户从你的应用中流失。而使用骨架屏则可以让用户在等待页面加载的过程中，看到一些类似页面结构的占位符，让用户感知到页面正在加载中，避免用户流失。另一方面，骨架屏还能够提高用户对 UI 设计的感知，让用户更快地熟悉应用程序的布局和结构。
如何实现骨架屏？
在 PWA 中，实现骨架屏需要借助 JavaScript 库。目前比较流行的 React, Vue 和 Angular 都有成熟的骨架屏库。
举个例子，在 React 中，我们可以使用 react-loading-skeleton 这个库来实现骨架屏。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------------------
-------- ------------- -
------ -
-----
--------- ------------ --
--------- ----------- --
------
--
-这段代码创建了一个包含两个骨架屏的组件，分别占据了 100px 和 50px 的高度。
使用骨架屏的过程中，我们需要注意以下几个点：
- 骨架屏的布局和页面真实内容的布局应尽量一致，以达到更好的展示效果。
- 骨架屏的高度、宽度、颜色等应该与真实内容尽量接近，以达到更好的展示效果。
- 骨架屏应该尽量简单，以便于页面加载更快。
总结
骨架屏在 PWA 中是非常重要的一种页面展示方式，它可以提高用户体验和对 UI 设计的感知。在实现骨架屏的过程中，我们需要注意一些细节，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648cd4ac48841e9894b24acb