05年诞生。作为客户端扩展,非web访问应用。特点是:高度自定义、丰富的装扮。这一年博客开始流行,作为沉淀用户情感和经历的地方。全部团队成员二十多人,包括开发、前端、测试、运营、PM等。
小作坊埋下的历史包袱:1、部分代码网上下载; 2、不考虑性能; 3、不考虑兼容性; 4、代码无可扩展性; 5、无规范、无监控、无运营; 6、全民AJAX
06“闭关”。主要做推广包装。前端成员扩展到3个人。做的几件事有:1、“反编译”前端代码。(大概是做后期维护吧。)小问题付出很多时间。2、和用户较劲。(自定义脚本带来的危害,用户攻击,XSS安全漏洞,比如篡改用户数据、病毒植入、发虚假广告,为保护用户隐私、减少漏洞工作。)
07“破茧”。至此为止,重构了一半前端代码,外观类似博客。做的事有:1、完成功能点;2、reflow性能,问题DIV单个太沉重。3、前端与后端的博弈,后端直接渲染最快,若用AJAX前端需要接受数据,解析HTML所产生的开销。
08“里程碑”。QQZone图标改变了,由卡通变成熟。1、2内不改变底层架构。2、No loading,去loading。目标3s内打开web app。期间与产品博弈,比如去掉了利用loading做的广告,用户体验和商业的平衡,结合商业目的。
QZone前端架构。 按需加载、接口透明。按需添加,不增加页面负担。
QZone MainFrame Server框架机。1、不用拉用户数据,但要保证性能。2、JS、CSS版本控制。3、CDN纠纷控制(用户网络位置,请求头)。4、加载过慢监测。5、服务差异化,进入不同的版本(完整版-->精简版,中间大概有4个版本,每个版本渐进减少区块)。6、SEO。7、服务开关控制(使用场景:异常监测、容灾、开关闭游戏)。
柔性服务 1、速度监测。2、小诊所。3、只读服务。4、Default服务(异常时控制)。5、最坏的服务员状态(弹出框,帮用户清cache)
伴随09年社区游戏开始发展。
前端架构:统一前端底层库、解决兼容、QZone Front-end Library(不开源)、解决开发效率问题。从繁琐的工作中解放出来。
QZone Front-end Library设计的几个“不”原则:1、不提供接口结晶;2、不污染原生接口;3、不随意缩短命名;4、不随意超越编码规范的范围。
优化不止yahoo的35条。想优化?先了解用户,从用户行为上分析出我们的任务。
EX:一个页面的过程: 加载 --> 显示内容 --> 用户操作。
QZone页面模块的加载顺序: 1、内容;2、导航;3、风格皮肤;4、挂件装扮;5、工具条;6、消息通道。
内容是最重要的,内容由于导航加载(编写html时 content的div写在navigation的div之前)。风格皮肤带来的视觉变化,对页面展示很重要。挂件装扮是用户购买的,出于商业目的放在工具条之前。最后是消息通道,即使不展示也不影响页面的整个应用。
QQ农场的加载,重用户操作优于内容。比如出现农场的地面,不出现植物动物,用户就可以立即点击地面操作。
按需加载,减少不必要的请求,减少不必要的开销。。。。
EX:预加载相册的策略。√ × × × √。√表示用户希望看到的照片,×表示用户希望跳过的照片。但是按照相片顺序无法跳过×。×就成为浪费掉的流量。增加图片缓存成功率。
权衡:视觉、交互、游戏逻辑 VS 流量、速度、¥¥¥
业务流量曲线。x轴时间0点到24点,y轴流量。曲线上方就是浪费掉的money。目标要增加低峰的利用率,减少高低峰差异,曲线要平缓。
PREFETCH 1、如何预测;2、峰值时间差如何。提供策略服务器(是否高峰、是否免费流量、是否活跃用户、是否进行抽样)
无障碍。残疾人应用。盲人主要利用Tab键、读屏软件。前端标签支持title alt accesskey tabindex focusable readable。需要舍弃一些视觉效果。或者
单独为盲人建立一个通道。在页头加。top隐藏在页面之外,普通人看不见,盲人进入页面第一次用tab键读取的救治tabindex为1的title。
单元测试。黑盒转白盒。建立了QZone UnitTest测试流程。指标任务覆盖率需要在30%以上。
不畏惧IE6。IE9 Navigation Time,利用HTML5监测网络,直接监测用户端的情况。HTTP Watch只能监测到本机的情况。