一、介绍
骨架屏在之前是个很热门的概念，现在大部分APP都有骨架屏的应用，即使我们不知道骨架屏是什么，但是一定见识过它的效果。
如上图，骨架屏就是在页面内容加载完成前，以简单的纯色块表现出页面的大致结构。其本意与以前广泛使用的等待页面加载的进度条、菊花图等手段一致，都是为了优化用户体验。不同之处在于，骨架屏的出现似乎更多的是为了SPA的首屏渲染，这里也介绍一下两种页面渲染方式区别。
二、服务端渲染与客户端渲染
1.服务端渲染
服务端渲染方式下，浏览器发送请求，服务器接收请求后对HTML进行渲染，并将渲染完成的页面返回给浏览器，浏览器在接收到渲染完成的HTML页面后将其显示出来，但此时页面还不能进行交互，之后再从服务器下载JS文件以完成对整个页面的加载，用户能够更快地看到网页内容。
2.客户端渲染
客户端渲染则把所有的任务都交由浏览器完成。浏览器对服务器发送请求得到该网页的所有静态资源并下载，通过浏览器的渲染引擎和JS引擎处理静态资源，渲染出呈现完整内容与功能的页面。将服务器压力分担给客户端的同时，也使得用户需等待js文件加载，导致页面呈现可视内容的时间推迟。
由于SPA由JS驱动，也必然存在客户端渲染的弊端。之前看过对SPA进行服务端渲染的实现，大致原理为在服务端使用puppteer打开目标网页，提前对其进行渲染，再将页面返回给客户端，具体实现可以自行去了解。
三、骨架屏实现方式
1.实现方式介绍
1）手写HTML、CSS。最简单粗暴的方法，也是最初使用骨架屏的方式，对于复杂且常更新的页面来说不太适用，但也不是完全一无是处。vue-content-loader这一插件适用于vue项目中，省去了写样式的步骤，其实现了矩形与圆形两种形状的组件，只需在引用组件时传入座标及尺寸，且含有facebook、ins等等多种风格的骨架样式。代码示例如下：
2）让UI设计对应页面的骨架屏图片，虽然也是有被在生产中采用的方式，但个人感觉在现在这种方式比较鸡肋，不过也有其适用场景。
3）自动化工具。没有深入研究，最终也没成功实现，但也介绍一下两个自动化实现骨架屏的插件。
vue-skeleton-webpack-plugin，使用之前介绍过的服务端渲染的方式，在html-webpack-plugin-before-html-processing事件回调中注入渲染结果。
page-skeleton-webpack-plugin，同样通过 puppeteer 在服务端打开页面，页面加载渲染完成后，在保留页面布局样式的前提下，通过对页面中元素进行删减或增添，隐藏图片和文字，对已有元素通过层叠样式进行覆盖，使得其展示为灰色块。提取出修改后的 HTML 和 CSS 样式。
2.vue、mpvue中的实践
在vue中实现骨架屏除服务端渲染外，其实现思路为在入口的index.html中<div id="app"></div>块中写入骨架屏，在页面渲染完成后则会将该块中的内容替换为渲染完成的结果。
由于vue、mpvue、原生小程序的骨架屏实现不是所有方式都完全通用，在vue实践中使用了vue-content-loader单独写了一个骨架屏组件，再通过vue-skeleton-webpack-plugin插入，实现效果如下：
在mpvue中的实现使用了现成的实现方式，仓库地址：https://github.com/jayZOU/skeleton。其本质上也是手写的组件，通过wx:if或v-if控制组件的显示与否，只适用于等待请求数据的过程，并不能完全解决首屏渲染的问题。实现效果如下：
四、总结
以上均为学习实践过程中总结他人文章后的个人见解，水平有限，有问题之处欢迎指出，也望本文对骨架屏学习者有所帮助。