Vue项目骨架屏注入实践

相比于早些年先后端代码紧密耦合、后端工程师还得写前端代码的时代，现在已发展到先后端分离，这种开发方式大大提高了先后端项目的可维护性与开发效率，让先后端工程师关注于本身的主业。然而在带来便利的同时，也带来了一些弊端，好比首屏渲染时间(FCP)由于首屏须要请求更多内容，比原来多了更多HTTP的往返时间(RTT)，这形成了白屏，若是白屏时间过长，用户体验会大打折扣，若是用户网速差，则FCP会更长。

由此引伸出一系列的优化方法，骨架屏也所以被提出。

感兴趣的同窗能够加文末的微信群，一块儿讨论吧～

1. FCP优化

在 Google 提出的以用户为中心的四个页面性能衡量指标中，FP/FCP多是开发者们最熟悉的了：

为了优化首屏渲染时间这个指标，减小白屏时间，前端仔们想了不少办法：

• 加速或减小HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减小预检请求，页面内跳转其余域名或请求其余域名的资源时使用浏览器prefetch预解析等；
• 延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
• 减小请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减小cookies大小，SSR直接输出渲染后的HTML等；
• 浏览器渲染原理：优化关键渲染路径，尽量减小阻塞渲染的JS、CSS；
• 优化用户等待体验：白屏使用加载进度条、菊花图、骨架屏代替等；

这里要介绍的就是优化用户等待体验的骨架屏，它能够被视为是原来加载菊花图的一种升级版，结合传统的首屏优化方法对应用进行优化能够达到不错的效果。

2. 骨架屏

骨架屏能够理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。能够看一下下面Facebook的骨架屏实现，能够看到在页面彻底渲染完成以前，用户会看到一个样式简单，描绘了当前页面的大体框架的骨架屏页面，而后骨架屏中各个占位部分被实际资源彻底替换，这个过程当中用户会以为内容正在逐渐加载即将呈现，下降了用户的焦躁情绪，使得加载过程主观上变得流畅。

能够看一下下面的示例图，第一个为骨架屏，第二个为菊花图，第三个为无优化，能够看到相比于传统的菊花图会在感官上以为内容出现的流畅而不突兀，体验更加优良。

现在这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被普遍的使用。在论坛和社区也都有很多文章讨论骨架屏的实现和使用场景等。

3. 生成骨架屏的方法

生成骨架屏的方式主要有：

1. 手写HTML、CSS的方式为目标页定制骨架屏 作法能够参考<Vue页面骨架屏注入实践>，主要思路就是使用 vue-server-renderer 这个原本用于服务端渲染的插件，用来把咱们写的.vue文件处理为HTML，插入到页面模板的挂载点中，完成骨架屏的注入。这种方式不甚文明，若是页面样式改变了，还得改一遍骨架屏，增长了维护成本。 骨架屏的样式实现参考 CodePen
2. 使用图片做为骨架屏； 简单暴力，让UI同窗花点功夫吧哈哈；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来做为骨架屏。
3. 自动生成并自动插入静态骨架屏 这种方法跟第一种方法相似，不过是自动生成骨架屏，能够关注下饿了么开源的插件 page-skeleton-webpack-plugin ，它根据项目中不一样的路由页面生成相应的骨架屏页面，并将骨架屏页面经过 webpack 打包到对应的静态路由页面中，不过要注意的是这个插件目前只支持history方式的路由，不支持hash方式，且目前只支持首页的骨架屏，并无组件级的局部骨架屏实现，做者说之后会有计划实现(issue9)。

另外还有个插件 vue-skeleton-webpack-plugin，它将插入骨架屏的方式由手动改成自动，原理在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片断插入 HTML 页面模版的挂载点中，将样式内联到 head 标签中。这个插件能够给单页面的不一样路由设置不一样的骨架屏，也能够给多页面设置，同时为了开发时调试方便，会将骨架屏做为路由写入router中，可谓是至关体贴了。

vue-skeleton-webpack-plugin的具体使用参考 vue-style-codebase，主要关注build目录的几个文件，线上Demo 在Chrome的DevTools中把network的网速调为Gast 3G / Slow 3G就能看到效果了~

---

网上的帖子大多深浅不一，甚至有些先后矛盾，在下的文章都是学习过程当中的总结，若是发现错误，欢迎留言指出~

参考：

1. 认识Skeleton Screen【屏幕加载骨架】
2. 为vue项目添加骨架屏
3. 下降首屏时间，“直出”是个什么概念?
4. Vue页面骨架屏
5. 小程序构建骨架屏的探索
6. 饿了么的 PWA 升级实践
7. 一个vue实现多页面骨架屏vue-skeleton-webpack-plugin插件的使用

PS：欢迎你们关注个人公众号【前端下午茶】，一块儿加油吧~

另外能够加入「前端下午茶交流群」微信群，长按识别下面二维码便可加我好友，备注加群，我拉你入群～