时光荏苒岁月如梭,青春一点点地从指缝中流走,蓦然回首,才惊觉进入机票(jipiao.jd.com)这个大家庭已经有一年了。从最初的战战兢兢,怀疑自己是否有能力接下这重任,到如今能坦然面对各种需求。诚然,进步是显而易见的(让我嘚瑟一会儿…)。

列表页查询速度优化

接手机票的第一个需求就是列表页查询速度优化,当时是中间临时接手的,所以并没有参与优化方案的制定,只是做了实施这一步,当然,很佩服方案制定人员,因为这不仅为机票速度的提升提供了很好的解决方案,也给我带来了不小的挑战。

下面来说说这厉害的方案。

方案的确定

先说说机票的背景,京东机票的数据是由很多个商家提供,但是商家之间返回数据的速度参差不齐,快的2s,慢的十多秒也是有的。因此,开发同事需要等所有商家的数据返回以后再进行比价等逻辑,筛选出前台展示的数据,再进行渲染。相信大家明白了,这会导致响应时间会非常慢,用户会长时间地处于等待中,结果就是,耗尽了耐心,拂袖而去。

(大家可以通过下图感受一下,不要怀疑自己的眼睛,请耐心等待。。。)

3

 

当下的第一要务就是要提高响应速度,让等待属于过去式。经过后端开发的评估,响应时间无法真的缩短,因为商家的返回速度是不可控的,因此,这个重担落到了前端,既然不能真的缩短时间,那我们就假装缩短了吧。是的,假装。

用户对于响应时间的评判无非是什么时候能看到页面上有内容展示,那么我们就尽快地展示出内容就行啦!

方案的实现

方案就是这样的:前端分多次请求后端数据,后端在得到第一次请求以后就去获取商家数据,然后尽快地返回已获得的数据给前端,前端将拿到的数据立即展示出来。这样迭代多次,在无碍于用户操作的同时,逐步地完成了全部数据的展示。

下面是这个过程的流程图:

tree

主干形成,我们又描绘了一些枝叶,为此增加了可爱的loading动画,小飞机飞过,在各种操作的时候都加上了缓动效果等等,让用户操作起来自然流畅一气呵成。

4

在此过程中,作为首次接手交互场景较复杂,涉及众多业务逻辑的单页面应用,其中付出了不少汗水和努力,收获颇丰。

迭代

接下来的一年里,又进行了多次需求迭代,体验也越来越好,不过在迭代过程中也遇到了一些问题:

首先,在新增需求的时候会涉及到前后端双方上线,但是这两方上线之间肯定有时间差,因此需要做好兼容处理,既要保证先上线的一方不影响线上环境,还要做到另一方上线后新的功能得以实现。相信作为前端开发,这个问题大家都会遇到。

其次,机票作为一个大型的项目,虽然单从列表页来看只有一个页面,但是后台会划分为很多个项目需求对其进行开发。这会造成一个问题:多个需求同时并行,在前端这边修改的是同一个文件,那么这对做好各需求之间的隔离和兼容就有很高的要求,我也总结了以下几个方法:

  • 新增的模块,CSS中使用新的命名来区分,JS中对其操作要首先判断此模块是否存在
  • 修改现有模块,如果对一个模块的细节做了很多调整,那么在这个模块的最外层加上区分的选择器,样式和JS都写在这个作为区分的选择器上
  • 如果有些改动无法用上面两种方法解决,那么就需要上线一版新的文件,由开发修改引用路径,这种方式是简单的,但是不到万不得已还是不要用,因为这会引起其他问题(同时进行的几个项目,有些需要修改路径,有些不需要,在后端开发合并代码的时候也会有迷惑)
  • 还有一点就是要注意,一些特殊的逻辑可能会引起后续修改时不断地改动或新增,因此一定要注意这些细节不能错过

首页性能优化

首页的优化始于团队内部对于首屏时间的优化安排。

由于历史原因,机票业务并未采用前后端分离方式开发,因此页面的交互JS都是由后台开发编写,相比于前端,后端更注重的是功能的实现,因此,会对性能有些影响。

来看看优化前的一些数据:

全部资源有81个请求,共2446.52kb,本地测速是1.82秒。

all

因为未做任何懒加载,所以首屏时间和全部资源加载时间基本一致,1.82秒作为公司的网络测速,普通用户体验到的可能远远不及这个。

资源占比图

all2

由上面的图可以看出,图片和JS占比将近99%,因此优化主要从这两部分入手:

优化方式:

JS部分

  1. 将旧版的组件全部替换
  2. 重构JS代码,去除冗余部分
  3. 延迟加载搜索框逻辑(将搜索框逻辑抽出为单独的文件,在用户鼠标滑过搜索框区域的时候再加载并初始化)

CSS部分

  1. 去除旧版文件及冗余代码
  2. 优化合并压缩CSS文件,搜索组件CSS用户触发后加载

图片部分

  1. 合并零散的icon为一张图标
  2. 协助运营优化广告图片大小

优化后的结果:

全部资源有53个请求,共1731.98kb (总加载时间取决于用户的操作,在此没有参考意义)。

after

首屏数据:

after2

通过优化后的首屏时间可以看出,效果还是比较显著的。

重构(首页及填单页)

由于首页并未做彻底的改版,因此优化JS主要是对已有代码进行了重构和整理。填单页对优惠券部分的JS进行了重构优化,因此也总结了一些重构的步骤:

  • 作为用户熟悉页面各个地方的功能和效果
  • 通过阅读现有代码来了解整体的业务逻辑和设计,尤其注意在页面上直观看不到的一些功能
  • 梳理功能与逻辑,确保自己理解透彻,必要时可以画出UML示意图
  • 分解并重组代码,在这过程中要注意每做一步改动,在页面上进行一次测试,保证每次改动不会影响原有逻辑

重构是一门很深的学问,能用到很多方法追求极致,我这里做的比较浅,只是初步的尝试了一下重构的方法。但对后续填单页的部分重构也起到了基础作用。

版本升级

那么你会问,做了一年的机票,就只做了列表页和首页吗?当然不是!机票在这一年中做了很多工作,填单页的优化,新增了「在线退票」和「在线值机」的功能,订单详情页的改版,下单报错页优化添加了推荐功能和进行中的在线改期等等,形成了一个完整的机票生态,从查询到下单到后期的退改等,为用户打造了一站式的服务,增加了用户粘性。

随着这不断加入的业务,代码文件也越来越多,随着而来的问题就是所有页面的文件都堆叠在一个目录下,查询和管理都变得不太容易,因此,对目录结构进行了一次升级,每个业务对应一个单独目录,这样就能一目了然。下图以JS文件夹为例,标示了如何以业务划分目录。

b1

1222

before                                                                               after

通过上面的目录对比,大家应该会发现:想在左边的旧的目录结构中找出某一个业务的代码比较费劲,右边就不一样了,能通过目录名称很快缩小查找范围,查找和维护方便了很多。

我和机票的一周年就回顾到这里,希望下一个一周年有更大的突破。

喜欢(15) 评论(0) 分享

Leave a Reply

© 2014 JDC. All Rights Reserved.