前端骨架屏

2023-12-04 20:29:13

当然，加速网页展现最基本的方式之一，就是减少页面文件大小。尽量使用 GZIP 压缩、消除冗余的空白字符、尽量使用 CSS Sprites。尽管这样，很多时候受限于各种需求，想要降低 FP 的难度还是很大的。于是「骨架屏」出来了。

骨架屏是什么？

其实骨架屏并不是一个前沿技术，在服务器端，比如 java 的 helidon 框架、go 的 go-fiber、Node.js 的 express 框架都提供了类似的特性，在 HTML 渲染完毕之前，先返回一段占位符的内容，通常是一个 loading 动画，保证浏览器不会在用户面前发呆，用户看到的是一个进度条，同时浏览器也在后台悄悄地加载 HTML 并替换掉 loading 动画。

这种技术在某些场景下十分实用，比如电商网站的商品详情页，如果不使用这种技术，用户可能需要等待很长时间才能看到商品详情，如果再加上大图，加载的等待时间会更长，这是很影响用户体验的。

同时，考虑到大多数电商网站是基于 CMS 生成的，即通过类似 WordPress 这样的系统直接编辑 HTML，那么通常开发人员很难直接介入前端项目的开发，对前端项目进行改造。

这种情况下，骨架屏无疑是一个很好的解决方案，即只需要把需要很长时间才能加载出来的内容替换为 loading 动画，然后 CMS 系统就可以直接进行编辑，不需要任何前端开发介入。

骨架屏是如何工作的？

骨架屏的工作原理其实很简单，先把 HTML 文档中的所有需要很长时间才能加载的内容替换成 loading 动画，比如图片、视频等，等 HTML 文档加载完毕之后，再用真正的内容替换掉这些 loading 动画，这样用户在等待 HTML 文档加载的时候，就已经可以看到骨架屏了。

在 HTML 中实现骨架屏的方法有两种：

使用 CSS 属性 display: none 隐藏需要很长时间才能加载的内容，等 HTML 文档加载完毕之后，再把这些内容显示出来。
使用 CSS 属性 visibility: hidden 隐藏需要很长时间才能加载的内容，等 HTML 文档加载完毕之后，再把这些内容显示出来。

后一种方法通常在图片很小，或者直接使用颜色填充的情况下使用，因为这种方式不需要加载图片，但是 display: none 则会阻塞图片的加载。

如何使用骨架屏？

在 HTML 中使用骨架屏的方法很简单，只需要在需要很长时间才能加载的内容上添加 data-skeleton 属性即可，然后在 CSS 中定义 data-skeleton 属性的样式，比如：

<div data-skeleton>
  <img src="image.png" />
</div>

[data-skeleton] {
  display: none;
}

[data-skeleton]::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #efefef;
}