页面初始化时提升用户体验

我们前端页面的数据一般都是请求后端获取的，当后端接口数据还没有请求完成时，我们是拿不到后端数据的。此时页面初始化显示的效果可能如下图所示：

简单优化(loading优化)：

我们可以在用户刚进入时，将整个页面隐藏，同时加载loading动画。在拿到后端数据之后再展示页面关闭loading动画。加一个loading动画可以让用户感觉时间变快。以Vue代码为例：

使用骨架屏进行优化：

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

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

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

生成骨架屏的方法

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

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

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

PS：如果在进行网页开发的话，不建议使用图片来代替骨架屏，因为要从网络加载图片，极有可能得不偿失，不过控制好图片大小，应该影响不大。一般在进行混合app开发的时候才有可能用到骨架图。因为app图片资源可以打入APP本地，加载本地图片很快。

加载优化

主要是从减少代码体积，图片大小，后端接口响应时间入手：

1. 减少http请求，尽量减少向服务器的请求数量；
2. 利用缓存：所有的资源都要的服务器端设置缓存，缓存一切可以缓存的资源；
3. 压缩HTML、CSS、JS，减少资源大小可加快页面加载速度；
4. 无阻塞：css文件在头部引入，js在也页面尾部，防止页面阻塞；
5. 按需加载，预加载；
6. 压缩图片，使用字体代替图片，使用雪碧图；