大略优化(loading优化)：
我们可以在用户刚进入时，将全体页面隐蔽，同时加载loading动画。在拿到后端数据之后再展示页面关闭loading动画。加一个loading动画可以让用户觉得韶光变快。以Vue代码为例：
利用骨架屏进行优化：
骨架屏可以理解为是当数据还未加载进来前，页面的一个空缺版本，一个大略的关键渲染路径。可以看一下下面Facebook的骨架屏实现，可以看到在页面完备渲染完成之前，用户会看到一个样式大略，描述了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完备更换，这个过程中用户会以为内容正在逐渐加载即将呈现，降落了用户的焦躁感情，使得加载过程主不雅观上变得流畅。
可以看一下下面的示例图，第一个为骨架屏，第二个为菊花图，第三个为无优化，可以看到比较于传统的菊花图（第一种loading优化）会在感官上以为内容涌现的流畅而不突兀，体验更加优秀。
如今这项技能已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的利用。在论坛和社区也都有不少文章谈论骨架屏的实现和利用场景等。
天生骨架屏的方法
天生骨架屏的办法紧张有：
手写HTML、CSS的办法为目标页定制骨架屏 做法可以参考，紧张思路便是利用 vue-server-renderer 这个本来用于做事端渲染的插件，用来把我们写的 .vue文件处理为 HTML，插入到页面模板的挂载点中，完成骨架屏的注入。这种办法不甚文明，如果页面样式改变了，还得改一遍骨架屏，增加了掩护本钱。利用图片作为骨架屏；大略暴力，让UI同学花点功夫吧哈哈；小米商城的移动端页面采取的便是这个方法，它是利用了一个Base64的图片来作为骨架屏。自动天生并自动插入静态骨架屏 这种方法跟第一种方法类似，不过是自动天生骨架屏，可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ，它根据项目中不同的路由页面天生相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中，不过要把稳的是这个插件目前只支持history办法的路由，不支持hash办法，且目前只支持首页的骨架屏，并没有组件级的局部骨架屏实现，作者说往后会有操持实现。其余还有个插件 vue-skeleton-webpack-plugin，它将插入骨架屏的办法由手动改为自动，事理在构建时利用 Vue 预渲染功能，将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中，将样式内联到 head标签中。这个插件可以给单页面的不同路由设置不同的骨架屏，也可以给多页面设置，同时为了开拓时调试方便，会将骨架屏作为路由写入router中，可谓是相称谅解了。
PS：如果在进行网页开拓的话，不建议利用图片来代替骨架屏，由于要从网络加载图片，极有可能得不偿失落，不过掌握好图片大小，该当影响不大。一样平常在进行稠浊app开拓的时候才有可能用到骨架图。由于app图片资源可以打入APP本地，加载本地图片很快。
加载优化紧张是从减少代码体积，图片大小，后端接口相应韶光入手：
减少http要求，只管即便减少向做事器的要求数量；利用缓存：所有的资源都要的做事器端设置缓存，缓存统统可以缓存的资源；压缩HTML、CSS、JS，减少资源大小可加快页面加载速率；无壅塞：css文件在头部引入，js在也页面尾部，防止页面壅塞；按需加载，预加载；压缩图片，利用字体代替图片，利用雪碧图；
