2011新版首页总结-技术篇2011-09-19谢传贵

TOPIC

• 前期准备• HTML5+CSS3

• 页面JS引擎升级+栅格化+模块化

• 页面分流-BuckTest

• 页面监控及性能优化• 其他

http://www.1688.com/

Team

我们的团队

做事方法

前期准备

HTML5+CSS3

从HTML4到HTML5

IE9

Chrome 4+

Safari 4+

Opera 10+

Firefox 3.6+

我们首页的浏览器分布

<footer>

<header>

<article>

<nav>

<section>

<section>

<section>

<section>

grid-6 grid-6grid-12

CSS3

• 使用的不多

• 圆角以及简单的动画

• rel:http://fd.aliued.cn/fdevlib/#home

总结

• 语意化,强化标准,紧跟互联网潮流

• 渐进增强,为高级浏览器用户提供更丰富的功能

• 强化web页面表现性能

• 为后续提供强大的功能打下基础

昂首挺胸,迈进HTML5时代!

页面JS引擎升级+栅格化+模块化

FDEV-3 FDEV-4

框架转移

<=102439.68%

>102460.32%

中文站首页分辨率分布

模块 = HTML片段

JS CSS+ +

结构的定义

•模块命名以 � “mod-” � 开头；

•元件 � “cell-”为统一定义，自己不得添加；

•每个模块必须有class为“content”的section，

header则非必须；

•内容结构复杂的，适当使用“region-”和“obj-”;

•id以“hp-”开头（页面风格的统一）；

rel: http://op.fangdeng.org/pitaya/http://op.fangdeng.org/pages/html5.tag.usage.html

CSS

• 文件按mod分，一个mod一个单独的css；

• 基于fdev4-float，pitaya4；

• 禁止使用无意义的标签实现样式上的展示；

rel: http://op.fangdeng.org/pitaya/

JS

• 文件按mod分，一个mod一个单独的js；

• 基于fdev4，HexJS；

• 懒加载；

• 大前提，首页是静态的；

总结

• JS框架更新换代,促成新框架在全站推广

• 标准化

• 模块化加强了代码可维护性,可扩展性以及提升渲染性能

页面分流-BuckTest

中文站首页

cookie

BT

版本A

版本B

版本D

版本C

总结

• 小量用户测试,降低切换风险

• 多版本测试,收集用户行为数据,优化页面,提升用户体验

• 在这条路上我们走了一小步,为下一次积累较丰富的经验

页面监控及性能优化

360监控

监控

pageClick

哈勃

页面显微镜

GoogleAnalytics

基调

DW

页面显微镜

总结

• 收集到丰富用户性能数据,客户端数据等,为后续数据分析提供强大的支持

• 宏观到微观的分析,比较快速定位用户行为

• 为后续性能优化提供支持,方向以及目标

页面性能优化

• 页面分屏加载• 广告触发加载• 用户登录状态提前展示• 背景图片提前加载

其他

• whatsnew动画重用,扩展其他新用户引导页面

• 无障碍访问尝试

• noscript

• 预加载JS,突破既有思

• ...

谢谢