浅谈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 相关文章推荐
直接生成打开窗口代码,不必下载
May 14 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
js实现圆形菜单选择器
Dec 03 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中的时间显示
2007/01/18 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
js常用函数 不错
2006/09/08 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python文件的md5加密方法
2016/04/06 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
浅析python标准库中的glob
2020/03/13 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
兼职学生的自我评价
2013/11/24 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
有趣的广告词
2014/03/18 职场文书
环保口号大全
2014/06/12 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
优秀员工推荐材料
2014/12/20 职场文书
给老师的保证书怎么写
2015/05/09 职场文书