这是2019年写的第一篇文章，想了很久才确定了这个主题。对于程序员来说，如何提升用户体验，是一个一直存在的问题，今天主要跟大家探讨一下提升用户体验的方法-骨架屏，骨架屏的技术其实并不新鲜，很多程序员都接触过，接下来我们就来细说一下什么是骨架屏，以及如何实现。
1、什么是骨架屏？
骨架，用作支持某物（如文学作品或有机体的一部分）的结构、基础或轮廓的支架。这是骨架的定义，骨架屏实际上是指页面的一个整体结构，在页面内容未加载之前，我们先展示页面的整体结构，这些结构由图形占位符组成，当页面加载完成之后，再把这些占位符替换掉。以下是饿了么H5页面的骨架屏展示。
2、如何实现骨架屏？
这里不会去罗列代码，主要提供一下实现思路。对于vue项目来说，我们知道html文件中只有一个div#app元素，其余都是通过vue创建，所以在js未加载之前，页面处于空白状态，如果我们在div#app中加入页面整体结构占位符，这样在js未加载完成之前，页面显示的是这些占位符（骨架屏），这样对于用户来说，能看到页面正在努力加载的过程，这样很好的提升了用户体验，下面我们来说一下两种实现方式。
（1）自己动手一步一步实现骨架屏
主要过程
1、创建Skeleton.vue，该文件即为骨架屏的代码，用于后续注入到div#app中。
2、创建skeleton.entry.js入口文件，用于webpack打包
3、配置webpack，新建webpack.skeleton.conf.js文件，此时需要用到vue-server-renderer插件，该插件用于服务端渲染，我们用于打包出node环境运行的js，在利用vue-server-renderer来把占位符注入div#app中
4、新建node skeleton.js，该js就是利用vue-server-renderer，之前打包好的骨架屏注入到html中，包括css和html
具体代码实现请参照：https://segmentfault.com/a/1190000014832185（2）利用vue-skeleton-webpack-plugin插件
该方式其实和第一种方式很相似，具体使用可以参考：https://lavas.baidu.com/guide/v2/webpack/vue-skeleton-webpack-plugin
（3）利用page-skeleton-webpack-plugin插件
该插件可以自动生成骨架屏。原理说明：利用puppeteer在服务端操控headless Chrome打开需要生成骨架屏的页面，页面渲染完以后,对页面中的一些元素进行删减、添加、覆盖。这样就能在不改变页面布局的同时，隐藏掉需要动态加载的内容。