前端骨架屏方案与实践

对于依赖接口渲染的页面，在拿到数据之前页面往往是空白的，为了提示用户当前正在加载中，往往会使用进度条、loading图标或骨架屏的方式。

对于前两种方案而言，实现比较简单；本文主要研究骨架屏的实现方案。

骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），不会造成网页长时间白屏或者闪烁，在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。Skeleton Screen 给用户一种资源是逐渐加载呈现出来的感觉，使得加载过程变得流畅。

1 利用图片切换实现

1.1 原理

使用一张占位骨架图（svg / lottie / gif）来代替 loading 效果，当数据加载完成后对替换掉骨架图。

1.2 具体实现

我们知道，浏览器加载资源的顺序是：

1. html、css、font这三种类型的资源优先级最高；
2. 然后是preload资源（通过  标签预加载）、script、xhr请求；
3. 接着是图片、语音、视频；
4. 最低的是 prefetch 预读取的资源。

因此需要使用 preload 提高图片加载优先级，让骨架图更早的显示，其次需要尽量减少图片的体积以加快加载速度，还有就是由于浏览器对同一域名的请求有并发限制，骨架屏的图片尽量放在单独的域名上，最后获取数据后隐藏图图片，显示真实 DOM 元素。

link元素rel属性的属性值preload能够让浏览器预先加载在和缓存对应的资源，as属性可以指定预加载内容的类型。可以被预加载如下：

• audio: 音频文件；
• document: 一个将要被嵌入到 或