浅谈Vue项目骨架筛网注射实践

相比早些年前端代码紧密耦合，后端工程师必须编写前端代码的时代，前端代码已经分离。这种开发方式大大提高了前端项目的可维护性和开发效率，让前端工程师关注到自己的主业。但是在带来便利的同时，也带来了一些弊端，比如首屏渲染时间(FCP)要求首屏内容多，HTTP往返时间(RTT)比原版多，导致出现白屏。如果白屏时间太长，用户体验会大大降低，如果用户网速差，FCP会更长。

为此，推导了一系列优化方法，并提出了骨架筛。

1.FCP优化

在谷歌提出的四个以用户为中心的页面性能指标中，FP/FCP可能是开发者最熟悉的：

为了优化首屏渲染时间，减少白屏时间，前端小朋友想了很多办法：

加速或减少HTTP请求丢失：使用CDN加载常用库，使用强缓存和协商缓存，使用域名汇聚，使用Base64代替小图片，使用Get请求代替Post请求，设置Access-Control-Max-Age减少预检查请求，跳转到其他域名或请求页面中其他域名的资源时使用浏览器预取预分析。

延迟加载：非重要库、非首屏图片延迟加载、SPA组件延迟加载等。

减少请求内容的体积：启动服务器Gzip压缩，压缩合并JS和CSS文件，减少cookies的大小，直接输出SSR渲染的HTML

浏览器渲染原理：优化关键渲染路径，尽量减少JS和CSS分块渲染；

优化用户等待体验：白屏使用加载进度条、菊花图、骨架屏等代替。

这里我们要介绍的是优化用户等待体验的骨架屏，可以看作是原加载菊花图的升级版。结合传统的首屏优化方法对应用进行优化可以取得很好的效果。

2.骨架屏幕

骨架屏幕可以理解为页面的空白版本和加载数据前的简单关键渲染路径。你可以看看下面脸书骨骼屏幕的实现。可以看到，在页面完全渲染之前，用户会看到一个样式简单、描绘当前页面大致框架的骨架屏幕页面，然后骨架屏幕中所有被占用的部分都会被实际资源完全替代。在这个过程中，用户会感觉到内容在逐渐被加载，很快就会呈现出来，减少了用户的焦虑，让加载过程主观上变得流畅。

大家可以看看下面的示例图，第一个是骨架屏，第二个是菊花图，第三个是非优化的。可以看出，与传统的菊花图相比，内容会显得流畅而不突兀，体验会更好。

现在这项技术已经广泛应用于脸书、谷歌、支付宝、饿了么、短书、新浪微博、知乎、美团、领英的产品中。在论坛和社区中，有很多文章讨论骨架屏的实现和使用场景。

3.生成骨架屏幕的方法

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

手写HTML和CSS为目标页面定制骨架屏的方法可以参考vue页面骨架屏注入实践。主要思想是使用vue-server-renderer，一个最初用于服务器端呈现的插件，来处理。我们编写成HTML的Vue文件，插入页面模板的挂载点，完成骨架屏幕注入。这种方法不文明。如果页面样式改变，骨架屏就要重新改变，增加了维护成本。骨架屏的样式实现参见CodePen

使用图片作为骨架屏幕；简单暴力，让UI同学花点时间哈哈；小米商城的手机页面采用了这种方法，使用了一张Base64图片作为骨架屏幕。

自动生成和自动插入静态骨架屏幕的方法与第一种方法类似，只是它自动生成骨架屏幕。可以关注开源插件页面-skeleton-webpack-plugin，它根据项目中不同的路由页面生成对应的骨架屏幕页面，通过webpack将骨架屏幕页面打包成对应的静态路由页面。但是需要注意的是，这个插件目前只支持历史模式下的路由，不支持hash模式，目前只支持首页的骨架屏，没有组件级的部分骨架屏实现，所以笔者表示以后会有计划的实现(issue9)。

另外还有一个插件Vue-skeleton-webpack-plugin，将骨架屏的插入方式由手动改为自动。原理是在构建时使用vue预渲染功能，将骨架屏幕组件渲染结果的HTML片段插入到HTML页面模板的挂载点，将内嵌样式插入到头标中。这个插件可以为单页或多页的不同路由设置不同的框架屏幕。同时为了开发时调试方便，会将骨架屏作为路由写入路由器，相当贴心。

vue-skeleton-webpack-plugin的具体用法是指vue-style-codebase，主要关注构建目录中的几个文件。在线演示可以在Chrome DevTools中调整网速到Gast 3G/Slow 3G看到效果~

网上的帖子大多深度不一，甚至有些不一致。以下文章是学习过程的总结。发现错误请留言指出~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。