2011新版首页总结-技术篇 2011-09-19 谢传贵
2011新版首页总结-技术篇2011-09-19谢传贵
TOPIC
• 前期准备• HTML5+CSS3
• 页面JS引擎升级+栅格化+模块化
• 页面分流-BuckTest
• 页面监控及性能优化• 其他
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,突破既有思
• ...
谢谢