前言
这次负责阿里巴巴国际站一次大促活动的前端开发工作,项目按时上线,在过程中还是有很多值得总结的地方。
页面地址(大促页面有时效性,可能到2015年8月份后页面就下线了)
以下是本次项目的总结。
总结
前期准备
评估工时(关键词:具体、buffer)
评估工时,首先要了解项目概况,将任务量尽量细化、拆分,划分的越具体,工时评估的越准确。另外也要留出buffer
,以备意外情况和其他需求占用。
人员沟通(关键词:全面了解)
不能埋头只做自己的事情,也要了解这个项目涉及的合作方都是谁,角色是什么。这样有利于合作,并有助于提高个人影响力。
风险评估(关键词:意识、预判)
以前做小项目时,其实很少会涉及风险评估,一般都能按时上线,对风险评估的意识就没什么要求了。但一旦遇到大一点的项目,风险评估就显得尤其重要。
对于风险,要能够:预判、及时处理、杜绝后患
精一行,通十行
除了对本职工作做好评估之外,扩展一下思路,对视觉、交互、活动方案、项目安排等有自己的见解并提出,对项目、个人成长都是很有好处的,而且别人对自己的印象分也会提高哦~
项目中
开发节奏(关键词:先紧后松)
项目开发,节奏应该是先紧后松的。否则,本来预留的时间是宽裕的,却是先松后紧的节奏的话,到上线前就傻眼了,往往会有很多意外发生。
性能优化
大促页面,由于访问量大,因此对前端页面性能、后台接口性能都有较高的要求。在写页面的时候,把能优化的地方都优化了,提高页面性能。
以下是我在页面中提高性能的一些做法:
-
DOM 懒加载
此次活动页面有两百多个类目,而用户访问页面后是一个个点击类目查看产品的,因此在页面渲染阶段,没有必要渲染全部类目,在用户点击主类目的时候再加载子类目也不迟。当然要注意懒加载DOM的时候避免引起页面重绘,可以将新增DOM节点置于隐藏节点内,然后展示。
-
图片懒加载
这个就不说了
-
缓存作用域链内容到局部变量
当然是为了缩短变量查找的工作量。
-
尽量少读写DOM
以前写页面时候,涉及的类目信息都是以DOM节点的自定义属性存储,这样每次读写这些信息,不可避免的要读写DOM,而DOM在不同浏览器内的实现不同,JS引擎访问DOM树还是有较大的性能消耗的。因此这次大促页面将DOM元素的配置信息尽量放在了JS对象里,减少对DOM的读写。
-
缓存频繁访问的对象属性
这个不说了
-
避免厄余函数开销
函数执行也是开销,减少过多的函数嵌套,在函数定义处的代码尽量少的情况下,避免过分封装函数,能减少函数执行引起的性能开销。
容错处理(关键词:防患于未然)
此次页面的数据几乎都是从后台读取的,对接口稳定性要求很高。开发的时候也没有考虑到接口挂掉的情况,但是在上线一小时后,数据接口挂了,虽然很快恢复,难免吓出一身汗。
以后写代码的时候,对容错还是要做些处理的,比如预留一份静态页面备用。
上线前(关键词:通知)
别着急上线,先通知各个相关方review
,最好邮件等方式。
上线后
观察
持续观察一段时间线上状态,及时修复bug
扩展(关键词:关注业务结果)
在这个阶段,关注点可以扩展开来,多一些对非技术层面的思考。比如活动的效果、统计情况等。