浅谈Vue项目骨架屏注入实践


Posted in Javascript onAugust 05, 2019

相比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业。然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长。

由此引申出一系列的优化方法,骨架屏也因此被提出。

1. FCP优化

在 Google 提出的以用户为中心的四个页面性能衡量指标中,FP/FCP可能是开发者们最熟悉的了:

浅谈Vue项目骨架屏注入实践

为了优化首屏渲染时间这个指标,减少白屏时间,前端仔们想了很多办法:

加速或减少HTTP请求损耗 :使用CDN加载公用库,使用强缓存和协商缓存,使用域名收敛,小图片使用Base64代替,使用Get请求代替Post请求,设置 Access-Control-Max-Age 减少预检请求,页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等;

延迟加载 :非重要的库、非首屏图片延迟加载,SPA的组件懒加载等;

减少请求内容的体积 :开启服务器Gzip压缩,JS、CSS文件压缩合并,减少cookies大小,SSR直接输出渲染后的HTML等;

浏览器渲染原理 :优化关键渲染路径,尽可能减少阻塞渲染的JS、CSS;

 优化用户等待体验 :白屏使用加载进度条、菊花图、骨架屏代替等;

这里要介绍的就是优化用户等待体验的骨架屏,它可以被视为是原来加载菊花图的一种升级版,结合传统的首屏优化方法对应用进行优化可以达到不错的效果。

2. 骨架屏

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

浅谈Vue项目骨架屏注入实践

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

浅谈Vue项目骨架屏注入实践

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

3. 生成骨架屏的方法

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

手写HTML、CSS的方式为目标页定制骨架屏 做法可以参考 <Vue页面骨架屏注入实践> ,主要思路就是使用vue-server-renderer 这个本来用于服务端渲染的插件,用来把我们写的 .vue 文件处理为 HTML ,插入到页面模板的挂载点中,完成骨架屏的注入。这种方式不甚文明,如果页面样式改变了,还得改一遍骨架屏,增加了维护成本。 骨架屏的样式实现参考CodePen

使用图片作为骨架屏; 简单暴力,让UI同学花点功夫吧哈哈;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。

自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似,不过是自动生成骨架屏,可以关注下饿了么开源的插件page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持history方式的路由,不支持hash方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现 (issue9) 。

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

vue-skeleton-webpack-plugin 的具体使用参考vue-style-codebase ,主要关注build目录的几个文件,线上Demo 在Chrome的DevTools中把network的网速调为 Gast 3G / Slow 3G 就能看到效果了~

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js打开新窗口方法整理
Feb 17 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
layui文件上传实现代码
May 20 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 #Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
Nuxt.js实战和配置详解
Aug 05 #Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 #Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 #Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 #Javascript
You might like
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python的高阶函数用法实例分析
2019/04/11 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
和解协议书
2014/04/16 职场文书
校园标语大全
2014/06/19 职场文书
离婚协议书的范本
2015/01/27 职场文书
刘公岛导游词
2015/02/05 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL