QQ空间前端技术分享 ——记QQ空间前端成长的点滴

 

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。需要舍弃一些视觉效果。或者

单独为盲人建立一个通道。在页头加<a .... top="-99" tabIndex="1" title=“请进入盲人通道”>。top隐藏在页面之外，普通人看不见，盲人进入页面第一次用tab键读取的救治tabindex为1的title。

单元测试。黑盒转白盒。建立了QZone UnitTest测试流程。指标任务覆盖率需要在30%以上。

不畏惧IE6。IE9 Navigation Time，利用HTML5监测网络，直接监测用户端的情况。HTTP Watch只能监测到本机的情况。