• 一次大促活动总结(2015-07-16)


    前言

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

    页面地址(大促页面有时效性,可能到2015年8月份后页面就下线了)

    以下是本次项目的总结。

    总结

    前期准备

    评估工时(关键词:具体、buffer

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

    人员沟通(关键词:全面了解

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

    风险评估(关键词:意识、预判

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

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

    精一行,通十行

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

    项目中

    开发节奏(关键词:先紧后松

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

    性能优化

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

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

    • DOM 懒加载

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

    • 图片懒加载

      这个就不说了

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

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

    • 尽量少读写DOM

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

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

      这个不说了

    • 避免厄余函数开销

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

    容错处理(关键词:防患于未然

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

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

    上线前(关键词:通知

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

    上线后

    观察

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

    扩展(关键词:关注业务结果

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

  • 相关阅读:
    创建型模式
    react-React深入-一等公民-props-onChange
    [react] React 新手必须知道的 N 件事
    [react] 细数 React 的原罪
    创业一年,苟且偷生
    好书推荐-《人类简史》.md—/Users/zjh/Documents/我的文章/好书推荐-《人类简史》
    社会科学-主题阅读.md—/Users/zjh/Documents/我的文章
    好书推荐-《国富论》-15-09.md—/Users/zjh/Documents
    readme.md—/Users/zjh/Documents/我的文章/[PHP]swoole_server几个进程的分工
    [PHP]Yii2框架的坑.md—/Users/zjh/Documents/我的文章/[PHP]Yii2框架的坑
  • 原文地址:https://www.cnblogs.com/yiyang/p/4656872.html
Copyright © 2020-2023  润新知