一次大促活动总结

[hoperyy]

前言

这次负责阿里巴巴国际站一次大促活动的前端开发工作，项目按时上线，在过程中还是有很多值得总结的地方。

页面地址（大促页面有时效性，可能到2015年8月份后页面就下线了）

以下是本次项目的总结。

总结

前期准备

评估工时（关键词：具体、buffer）

评估工时，首先要了解项目概况，将任务量尽量细化、拆分，划分的越具体，工时评估的越准确。另外也要留出buffer，以备意外情况和其他需求占用。

人员沟通（关键词：全面了解）

不能埋头只做自己的事情，也要了解这个项目涉及的合作方都是谁，角色是什么。这样有利于合作，并有助于提高个人影响力。

风险评估（关键词：意识、预判）

以前做小项目时，其实很少会涉及风险评估，一般都能按时上线，对风险评估的意识就没什么要求了。但一旦遇到大一点的项目，风险评估就显得尤其重要。

对于风险，要能够：预判、及时处理、杜绝后患

精一行，通十行

除了对本职工作做好评估之外，扩展一下思路，对视觉、交互、活动方案、项目安排等有自己的见解并提出，对项目、个人成长都是很有好处的，而且别人对自己的印象分也会提高哦~

项目中

开发节奏（关键词：先紧后松）

项目开发，节奏应该是先紧后松的。否则，本来预留的时间是宽裕的，却是先松后紧的节奏的话，到上线前就傻眼了，往往会有很多意外发生。

性能优化

大促页面，由于访问量大，因此对前端页面性能、后台接口性能都有较高的要求。在写页面的时候，把能优化的地方都优化了，提高页面性能。

以下是我在页面中提高性能的一些做法：

• DOM 懒加载

  此次活动页面有两百多个类目，而用户访问页面后是一个个点击类目查看产品的，因此在页面渲染阶段，没有必要渲染全部类目，在用户点击主类目的时候再加载子类目也不迟。当然要注意懒加载DOM的时候避免引起页面重绘，可以将新增DOM节点置于隐藏节点内，然后展示。

• 图片懒加载

  这个就不说了

• 缓存作用域链内容到局部变量

  当然是为了缩短变量查找的工作量。

• 尽量少读写DOM

  以前写页面时候，涉及的类目信息都是以DOM节点的自定义属性存储，这样每次读写这些信息，不可避免的要读写DOM，而DOM在不同浏览器内的实现不同，JS引擎访问DOM树还是有较大的性能消耗的。因此这次大促页面将DOM元素的配置信息尽量放在了JS对象里，减少对DOM的读写。

• 缓存频繁访问的对象属性

  这个不说了

• 避免厄余函数开销

  函数执行也是开销，减少过多的函数嵌套，在函数定义处的代码尽量少的情况下，避免过分封装函数，能减少函数执行引起的性能开销。

容错处理（关键词：防患于未然）

此次页面的数据几乎都是从后台读取的，对接口稳定性要求很高。开发的时候也没有考虑到接口挂掉的情况，但是在上线一小时后，数据接口挂了，虽然很快恢复，难免吓出一身汗。

以后写代码的时候，对容错还是要做些处理的，比如预留一份静态页面备用。

上线前（关键词：通知）

别着急上线，先通知各个相关方review，最好邮件等方式。

上线后

观察

持续观察一段时间线上状态，及时修复bug

扩展（关键词：关注业务结果）

在这个阶段，关注点可以扩展开来，多一些对非技术层面的思考。比如活动的效果、统计情况等。