#周分享#骨架屏[Skeleton Screen]

什么是骨架屏

骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面

是进度条和菊花圈的进化产物

作用

1.作为首屏渲染的优化

2.比其他的加载提示更人性化，能让用户更直接感知布局和内容

3.提升用户体验，增加用户存留率

组成

类似一个静态的html

文本块：仅包含文本节点（NodeType 为 Node.TEXT_NODE）的元素（NodeType 为 Node.ELEMENT_NODE），一个文本块可能是一个 p 元素也可能是 div 等。文本块将会被转化为灰色条纹。

图片块：图片块是很好区分的，任何 img 元素都将被视为图片块，图片块的颜色将被处理成配置的颜色，形状也被修改为配置的矩形或者圆型。

按钮块：任何 button 元素、 type 为 button 的 input 元素，role 为 button 的 a 元素，都将被视为按钮块。按钮块中的文本块不在处理。

svg 块：任何最外层是 svg 的元素都被视为 svg 块。

伪类元素块：任何伪类元素都将视为伪类元素块，如 ::before 或者 ::after。

如何制作骨架屏svg

1.vue组件
2.react组件
3.ng组件
4.自定义svg在线生成骨架屏

vue和react的组件中，除了可以自定义，也有一些现成的骨架屏svg，比如公司类型的Facebook Style，比如布局类型 List Style，功能类型的Code Style
如果适用自己的话可以直接引用组件就行

可行性和构建原理

1.vue/react/ng 这三大框架都有一个共同的特定，其都是 JS 驱动，在 JS 代码解析完成之前
直接展示的是

<div id="app"><!-- 内容为空 或者可以输入自己喜欢的东西，在js解析成功之前都会展示这里的内容，js展示完成会替换掉这里-->
</div>

所以骨架屏可以在js解析成功之前放在这里，以此类推

2.骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面.

如何引入到自己的项目

1.手工工场时代

手写css配合svg注入页面
一旦页面布局有所更改我们就需要跟着去更改，所以出现了下面这张图

2.蒸汽时代，借助插件

通过使用插件page-skeleton-webpack-plugin方式通过Puppeteer API 结合webpackage动态生成 骨架屏，生成原理看[大神的这边文章][6]该插件还不是很智能，目前只能支持首屏的骨架屏生成，还不支持局部的

3.下个时代

思索

1.通过设置某个div含有某个属性或者class定性为需要骨架占位符，渲染的时候作为一个常规骨架屏输出，然后又真实内容再做替换

参考

1.https://github.com/Jocs/jocs....
2.https://juejin.im/post/59ef52...
3.https://juejin.im/post/5b79a2...