浅谈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 相关文章推荐
用JQuery调用Session的实现代码
Oct 29 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
javascript编写简易计算器
May 06 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
一些mootools的学习资源
2010/02/07 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Python脚本实时处理log文件的方法
2016/11/21 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python re的findall和finditer的区别详解
2020/11/15 Python
python openssl模块安装及用法
2020/12/06 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
《满井游记》教学反思
2014/02/26 职场文书
学习党章的体会
2014/11/07 职场文书
会议开幕词
2015/01/28 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
秋菊打官司观后感
2015/06/03 职场文书
四大名著读书笔记
2015/06/25 职场文书
新郎结婚感言
2015/07/31 职场文书
小学体育课教学反思
2016/02/16 职场文书
优秀员工演讲稿
2019/06/21 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL