比于早些年前后端代码紧密耦合、后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业。然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长。
1. FCP优化
在 Google 提出的以用户为中心的四个页面性能衡量指标中,FP/FCP可能是开发者们最熟悉的了
为了优化首屏渲染时间这个指标,减少白屏时间,前端仔们想了很多办法:
这里要介绍的就是优化用户等待体验的骨架屏,它可以被视为是原来加载菊花图的一种升级版,结合传统的首屏优化方法对应用进行优化可以达到不错的效果。
2. 骨架屏
骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。
可以看一下下面的示例图,第一个为骨架屏,第二个为菊花图,第三个为无优化,可以看到相比于传统的菊花图会在感官上觉得内容出现的流畅而不突兀,体验更加优良。
如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。
3. 生成骨架屏的方法
生成骨架屏的方式主要有:
另外还有个插件 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 项目中的骨架屏为例,探讨一下骨架屏的优缺点和注入方式。
感兴趣的同学可以加一下微信群,一起讨论吧~
在 Google 提出的以用户为中心的四个页面性能衡量指标中,FP/FCP可能是开发者们最熟悉的了:
为了优化首屏渲染时间这个指标,减少白屏时间,前端仔们想了很多办法:
这里要介绍的就是优化用户等待体验的骨架屏,它可以被视为是原来加载菊花图的一种升级版,结合传统的首屏优化方法对应用进行优化可以达到不错的效果。
骨架屏可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现,可以看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。
可以看一下下面的示例图,第一个为骨架屏,第二个为菊花图,第三个为无优化,可以看到相比于传统的菊花图会在感官上觉得内容出现的流畅而不突兀,体验更加优良。
如今这项技术已经在Facebook、Google、支付宝、饿了么、简书、新浪微博、知乎、美团、领英等公司的产品中被广泛的使用。在论坛和社区也都有不少文章讨论骨架屏的实现和使用场景等。
生成骨架屏的方式主要有:
另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入router中,可谓是相当体贴了。
vue-skeleton-webpack-plugin 的具体使用参考 vue-style-codebase,主要关注build目录的几个文件,实例跑起来之后在 Chrome 的 DevTools 中把 network 的网速调为 Gast3G/Slow3G 就能看到效果了~
信ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
(页底留言开放,欢迎来吐槽)
● ● ●
前 言
晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨的快>>,针对这个问题进行分析分析.
俗话说的好:”没有调查,就没有发言权”,同样在市场浪潮中,同样如果没有实际调查,不要轻易发表言论,误导他人.
现在主要从下面几个方面给大家进行总结和分析呢?
目 录
HTML5前端开发的薪资
市场的供求关系
HTML5语言优势
HTML5前端开发的薪资
首先我们来看看2016年上半年前端端开发的薪资情况(参考了拉勾网,智联招聘,51job,前程无忧,Boss直聘上的数据)。
1.我们来看看北京的薪资情况
说明:北京前端开发平均工资:¥10576元/月
2.我们来看看广州的薪资情况
说明:广州前端开发平均工资:¥8124元/月
3.我们来看看上海的薪资情况
说明:上海前端开发平均工资:¥9270元/月
4.我们来看看深圳的薪资情况
说明:深圳前端开发平均工资:¥11464元/月
因此综上的统计供大家参考.在技术类里,HTML5技术能力的值钱程度很突出,名列前茅。这正代表了前端技术的当前行情。现在HTML5 有过1-2年工作经验的,跳槽工资的涨幅只高不低.
那么问题来了,导致这一现象的原因是什么呢?看下面分析……
具体分析点击“阅读原文”
☟☟☟
*请认真填写需求信息,我们会在24小时内与您取得联系。