为什么要使用骨架屏
在针对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