vue首屏优化之骨架屏

为什么要使用骨架屏

在针对SPA应用进行首屏优化的时候，我们是尽可能地减少白屏时间，使首屏内容尽早的展现出来，可因为SPA应用的特性用JS绘制dom，在js未加载完成时dom不会被绘制出来，所以虽然白屏时间可以通过减少http请求，压缩请求体积等各种方法来缩短，但根本上是无法清除的。短暂的白屏会被用户不好的体验，常用的做法可以在内容未加载出来前添加一个loading的动画，今天介绍的骨架屏算是loading的一个进阶版。骨架屏是在页面完全渲染之前，用户会看到一个样式简单，绘制了页面大致框架，在感知到页面加载完成时，会替换到骨架屏占位的部分。在现在很多应用中都已经得到试用，如知乎，简书，饿了么等。

实现

这边以在vue项目中实现为例，我使用的是vue-skeleton-webpack-plugin插件,它将骨架屏也看成路由组件，在构建时使用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head 标签中。这样等前端渲染完成时，Vue将使用客户端混合，把挂载点中的骨架屏内容替换成真正的页面内容。

安装

npm install vue-skeleton-webpack-plugin