Vue项目骨架屏注入实践

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

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

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的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。

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

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

3. 生成骨架屏的方法

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

  1. 手写HTML、CSS的方式为目标页定制骨架屏 做法可以参考<Vue页面骨架屏注入实践>,主要思路就是使用 vue-server-renderer 这个本来用于服务端渲染的插件,用来把我们写的.vue文件处理为HTML,插入到页面模板的挂载点中,完成骨架屏的注入。这种方式不甚文明,如果页面样式改变了,还得改一遍骨架屏,增加了维护成本。 骨架屏的样式实现参考 CodePen
  2. 使用图片作为骨架屏; 简单暴力,让UI同学花点功夫吧哈哈;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。
  3. 自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似,不过是自动生成骨架屏,可以关注下饿了么开源的插件 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就能看到效果了~


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

参考:

  1. 认识Skeleton Screen【屏幕加载骨架】
  2. 为vue项目添加骨架屏
  3. 降低首屏时间,“直出”是个什么概念?
  4. Vue页面骨架屏
  5. 小程序构建骨架屏的探索
  6. 饿了么的 PWA 升级实践
  7. 一个vue实现多页面骨架屏vue-skeleton-webpack-plugin插件的使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

Redux基本用法,为周日的先行者课程准备着。

众所周知,React只是一个View层而已,它不是一个完整的前端解决方案。只是给出了页面组件化的解决思路,但组件之间如何沟通?代码之间的结构?它并没有给出更多的...

2007
来自专栏企鹅号快讯

Stimulus:让web应用在移动端达到原生体验

【IT168 资讯】很多开发者一年来通过Basecamp写了很多JavaScript,但是并没有用它来创建现代意义上的“JavaScript应用程序”。所有的应...

2878
来自专栏较真的前端

关于如何做一个“优秀网站”的清单——基础篇

1915
来自专栏知道一点点

sass入门学习篇(一)

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sa...

983
来自专栏星流全栈

微信小程序原理

6093
来自专栏三水清专栏

iOS 真机调试微信小程序

平时开发小程序可以在开发者工具中进行调试,开发者工具提供了类似 Chrome DevTools 的调试面板,对于前端开发者来说入门门槛比较低。

1.7K10
来自专栏Youngxj

全平台通用评论神器一键自动填写昵称、邮箱和网址

1923
来自专栏WindCoder

WordPress常用插件分享

8091
来自专栏沈唁志

【长期维护】WordPress 基于腾讯云对象存储 COS 远程附件支持插件

腾讯云对象存储(Cloud Object Storage,简称:COS)是腾讯云提供的面向非结构化数据,支持 HTTP/HTTPS 协议访问的分布式存储服务,它...

4145
来自专栏达摩兵的技术空间

touch-action导致安卓页面无法滚动

相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程中的一些探索经历。

7810

扫码关注云+社区

领取腾讯云代金券