整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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就能看到效果了~

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

由此引申出一系列的优化方法,骨架屏也因此被提出,本文就以 Vue 项目中的骨架屏为例,探讨一下骨架屏的优缺点和注入方式。

感兴趣的同学可以加一下微信群,一起讨论吧~

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-server-renderer 这个本来用于服务端渲染的插件,用来把我们写的 .vue文件处理为 HTML,插入到页面模板的挂载点中,完成骨架屏的注入。这种方式不甚文明,如果页面样式改变了,还得改一遍骨架屏,增加了维护成本。
  2. 使用图片作为骨架屏;简单暴力,让UI同学花点功夫吧哈哈;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。
  3. 自动生成并自动插入静态骨架屏 这种方法跟第一种方法类似,不过是自动生成骨架屏,可以关注下饿了么开源的插件 page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持history方式的路由,不支持hash方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现。

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

vue-skeleton-webpack-plugin 的具体使用参考 vue-style-codebase,主要关注build目录的几个文件,实例跑起来之后在 Chrome 的 DevTools 中把 network 的网速调为 Gast3G/Slow3G 就能看到效果了~

信IDWEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

(页底留言开放,欢迎来吐槽)

● ● ●

前 言

晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨的快>>,针对这个问题进行分析分析.

俗话说的好:”没有调查,就没有发言权”,同样在市场浪潮中,同样如果没有实际调查,不要轻易发表言论,误导他人.

现在主要从下面几个方面给大家进行总结和分析呢?

目 录

  1. HTML5前端开发的薪资

  2. 市场的供求关系

  3. HTML5语言优势

HTML5前端开发的薪资

首先我们来看看2016年上半年前端端开发的薪资情况(参考了拉勾网,智联招聘,51job,前程无忧,Boss直聘上的数据)。

1.我们来看看北京的薪资情况

说明:北京前端开发平均工资:¥10576元/月

2.我们来看看广州的薪资情况

说明:广州前端开发平均工资:¥8124元/月

3.我们来看看上海的薪资情况

说明:上海前端开发平均工资:¥9270元/月

4.我们来看看深圳的薪资情况

说明:深圳前端开发平均工资:¥11464元/月

因此综上的统计供大家参考.在技术类里,HTML5技术能力的值钱程度很突出,名列前茅。这正代表了前端技术的当前行情。现在HTML5 有过1-2年工作经验的,跳槽工资的涨幅只高不低.

那么问题来了,导致这一现象的原因是什么呢?看下面分析……

具体分析点击“阅读原文”

☟☟☟