WEB开发编程网1. FCP优化
在 Google 提出的以用户为中心的四个页面性能衡量指标中，FP/FCP可能是开发者们最熟悉的了：- 加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置
Access-Control-Max-Age减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等； - 延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；
- 减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；
- 浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；
- 优化用户等待体验：白屏使用加载进度条、菊花图、骨架屏代替等；
2. 骨架屏
骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现，可以看到在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。3. 生成骨架屏的方法
生成骨架屏的方式主要有：- 手写HTML、CSS的方式为目标页定制骨架屏 做法可以参考<Vue页面骨架屏注入实践>，主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件，用来把我们写的
.vue文件处理为HTML，插入到页面模板的挂载点中，完成骨架屏的注入。这种方式不甚文明，如果页面样式改变了，还得改一遍骨架屏，增加了维护成本。 骨架屏的样式实现参考 CodePen - 使用图片作为骨架屏； 简单暴力，让UI同学花点功夫吧哈哈；小米商城的移动端页面采用的就是这个方法，它是使用了一个Base64的图片来作为骨架屏。
- 自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似，不过是自动生成骨架屏，可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ，它根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中，不过要注意的是这个插件目前只支持history方式的路由，不支持hash方式，且目前只支持首页的骨架屏，并没有组件级的局部骨架屏实现，作者说以后会有计划实现(issue9)。
head 标签中。这个插件可以给单页面的不同路由设置不同的骨架屏，也可以给多页面设置，同时为了开发时调试方便，会将骨架屏作为路由写入router中，可谓是相当体贴了。
vue-skeleton-webpack-plugin的具体使用参考 vue-style-codebase，主要关注build目录的几个文件，线上Demo 在Chrome的DevTools中把network的网速调为Gast 3G / Slow 3G就能看到效果了~
网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~
参考：作者：SHERlocked93 链接：https://juejin.im/post/5b79a2786fb9a01a18267362 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
