#周分享#骨架屏[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...