栋寒

2011淘宝彩票首页开发实践

栋寒 www.cnblogs.com/zhenn2011-5-10

http://caipiao.taobao.com/lottery/index_v3.htm

合理安排内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

合理安排内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

栋寒float:left float:right

典型的两列结构

Dom解析顺序

自上而下

在一段时间内用户所看到的页面

等待渲染…

无法改变用户的带宽环境

What we can do?

优化策略：

• 破坏规整的dom结构• 使用定位来实现UI设计• 优化显示次序

损坏的html：焦点图右侧

彩种导航

焦点图

数字彩快速投注开奖公告

（左上）广告

排行榜工具列表

（左下）广告彩票攻略

足篮彩快速投注推荐合买

彩票资讯

132

1024*768浏览器首屏参考线

4

1440*900浏览器首屏参考线

5

7

8

9

6

至上而下的逐次展现方式

假装很快

So：

合理安排内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

功能颗粒化

Why do like this

• 更加适合团队开发

• 易维护性

• 便于做按需加载

e.g.

点击触发异步请求

Async()

载入html文档

加载js逻辑文件

插入html代码

加载js模块并执行回调

Full code

弊端：太多的http请求？

Combo利器

基于yui3的实现

合并use进一步减少请求数

合理内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

Fast by default

用户最关注的速度

• 资源文件加载所耗时间

• 浏览器渲染时间

• 资源文件加载所耗时间• 浏览器渲染时间

• 通过combo合并js、css请求

• 延时加载图片、非展示不加载

• 地球人都知道的css sprite技术

减少http请求数

延时加载图片

延时加载的图片对象

• 减小html文档的大小

• 异步加载js模块

• minify css、js

• 保证质量前提下，压缩图片

• Gzip(deflate)，服务器配置

压缩http请求收发数据量

• 资源文件加载所耗时间

• 浏览器渲染时间

• 避免冗余的html标签

• 适时做延时渲染和异步加载

• 让用户的浏览器视口决定页面

首次加载时的dom节点数

精简dom节点数

异步加载 VS 延时渲染

前后端交互：缓解前端渲染压力并分隔后端的处理时间，缺点在于前端发生交互事件时，等待时间稍长

纯前端交互：交互效率较高，等待时间短，缺点在于页面首次加载时，要把后端查询的数据全部push到前端，增加服务器负担

• 数据访问

• 算法和流程控制

• dom操作

• ......

Js执行效率

了解更多请参考此书

Ref：http://ishare.iask.sina.com.cn/f/8344965.html

电子版下载

较之老版首页

• 扔掉cubee(yui3.0.0的遗留物)

• 应用yui3.3.0，减小对domready的依赖

• 合理的注册事件Avialable而非

DomReady，更及时的展现页面交互

yslow

Pagespeed

我们不过分依赖于yslow、pagespeed

我们更愿意相信

真实的数据

哈勃数据监控

老版

新版

合理内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

IE8及其以下版本hack

禁用脚本？

禁用脚本？

适度引导用户

合理内容的展现次序

模块化开发

速度、性能

延续html5革命事业

其他细节

旺旺web api（仅支持IE内核，利用ActiveXObject插件）

Just click

文件地址：http://a.tbcdn.cn/apps/lottery/indexv3/js/webtribe.js

清理隐藏的定时器

减轻浏览器压力