浅谈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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
js获取和设置属性的方法
Feb 20 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
Vue.js学习示例分享
Feb 05 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
原生js 实现表单验证功能
Feb 08 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP初学入门
2006/11/19 PHP
php横向重复区域显示二法
2008/09/25 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
PHP运行模式汇总
2016/11/06 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python定时任务sched模块用法示例
2018/07/16 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python3人脸识别的两种方法
2019/04/25 Python
Python3如何判断三角形的类型
2020/04/12 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
公司授权委托书范文
2014/08/02 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers