【前端】骨架屏

长期更新补充+实战。

---

简介

骨架屏（Skeleton Screen）是一种在页面加载过程中用于改善用户体验的设计模式。它通过在页面内容完全加载前，显示一个占位的界面来让用户感知页面正在加载，从而减少等待的焦虑感。

• 骨架屏的作用和优势：

1. 提升用户体验：
   在页面加载时，直接显示一个空白或是加载动画可能会让用户感到页面没有响应。而骨架屏通过预先渲染页面的结构（例如占位符、灰色块、模糊的布局等），让用户知道页面正在加载，从而减少了加载过程中的焦虑感。
2. 避免空白页面：
   直接显示空白页面或闪烁的加载效果可能让用户不清楚页面是否出现问题。骨架屏用一种“结构化”的方式替代空白页，让用户有一个视觉提示，了解页面加载进度。
3. 提升加载感知速度：
   用户通常会感知到骨架屏的加载速度比纯粹的白屏更快，即使后台的数据或内容加载还需要一点时间，骨架屏可以在视觉上让用户觉得页面更迅速地响应。
4. 适应各种内容加载情况：
   骨架屏可以根据内容的不同而灵活设计，适应文本、图片、视频等多种页面内容的加载。

• 骨架屏的常见使用场景：

1. 长时间加载的页面：
   如社交媒体动态、新闻类文章列表、电子商务网站的商品列表等，它们可能包含大量的图片、视频和复杂的数据，骨架屏可以帮助提升加载时的用户体验。
2. 单页应用（SPA）：
   在SPA应用中，用户在页面之间切换时，骨架屏可以在新页面内容加载前作为占位符，避免空白和白屏现象。

骨架屏的实现原理

骨架屏通常通过占位符来实现。这些占位符是页面元素的简化版本，通常是灰色的矩形框、圆形等，用来代表页面的结构或是将要加载的内容。一旦实际内容加载完成，骨架屏被实际内容替换。

• 常见的实现方式有：

1. CSS动画： 使用 CSS 动画来实现骨架屏的效果，例如“闪动”或“渐变”的效果。例如通过 @keyframes 实现加载动画。
2. JavaScript渲染： 在页面渲染过程中，先显示骨架屏，待内容加载完后，用 JavaScript 动态替换掉骨架屏。
3. Vue 或 React 等框架方式：在 SPA 应用中，可以通过框架的组件化机制，使用条件渲染来显示骨架屏。例如，可以根据数据是否加载完成来切换显示骨架屏或实际内容。
4. 第三方库：有许多第三方库专门提供骨架屏的实现，如 vue-content-loader 和 react-loading-skeleton，这些库提供了预设的骨架屏组件，简化了骨架屏的实现。

实战