1. 2011淘宝彩票首页开发实践
栋寒栋寒 www.cnblogs.com/zhenn
2011-5-10

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

3. 合理安排内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

4. 合理安排内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

5. 典型的两列结构
栋寒
float:left float:right

6. Dom解析顺序
自
上
而
下

7. 在一段时间内用户所看到的页面
等待渲染…

9. 无法改变用户的带宽环境
What we can do?

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

11. 损坏的html：
焦点图右侧
彩种导航
焦点图
数字彩快速投注
开奖公告
（左上）广告
排行榜
工具列表
（左下）广告
彩票攻略
足篮彩快速投注
推荐合买
彩票资讯

12. 2 3 1
4
5 1024*768浏览器首屏参考线
8
6 1440*900浏览器首屏参考线
7 9

13. So：
至上而下的逐次展现方式
假装很快

14. 合理安排内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

15. 功能颗粒化

16. Why do like this

17. • 更加适合团队开发
• 易维护性
• 便于做按需加载

18. e.g.
点击触发异步请求
Async()
载入html文档
加载js逻辑文件

19. Full code
插入html代码
加载js模块并执行回调

20. 弊端：太多的http请求？

21. Combo利器

22. 基于yui3的实现

23. 合并use进一步减少请求数

24. 合理内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

25. Fast by default

27. 用户最关注的速度
• 资源文件加载所耗时间
• 浏览器渲染时间

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

29. 减少http请求数
• 通过combo合并js、css请求
• 延时加载图片、非展示不加载
• 地球人都知道的css sprite技术

30. 延时加载图片
延时加载的图片对象

31. 压缩http请求收发数据量
• 减小html文档的大小
• 异步加载js模块
• minify css、js
• 保证质量前提下，压缩图片
• Gzip(deflate)，服务器配置

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

33. 精简dom节点数
• 避免冗余的html标签
• 适时做延时渲染和异步加载
• 让用户的浏览器视口决定页面
首次加载时的dom节点数

34. 前后端交互：缓解前端渲染压力并分
隔后端的处理时间，缺点在于前端发生交互事
件时，等待时间稍长
异步加载 VS 延时渲染
纯前端交互：交互效率较高，等待时间短，
缺点在于页面首次加载时，要把后端查询的数据全部
push到前端，增加服务器负担

35. Js执行效率
• 数据访问
• 算法和流程控制
• dom操作
• ......

36. 了解更多请参考此书

37. 电子版下载
Ref：http://ishare.iask.sina.com.cn/f/8344965.html

38. 较之老版首页
• 扔掉cubee(yui3.0.0的遗留物)
• 应用yui3.3.0，减小对domready的依赖
• 合理的注册事件Avialable而非
DomReady，更及时的展现页面交互

40. yslow

41. Pagespeed

42. 我们不过分依赖于
yslow、pagespeed

43. 我们更愿意相信
真实的数据

44. 哈勃数据监控
老版
新版

45. 合理内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

46. IE8及其以下版本hack

47. 禁用脚本？

48. 适度引导用户
禁用脚本？

49. 合理内容的展现次序
模块化开发
速度、性能
延续html5革命事业
其他细节

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

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

52. 清理隐藏的定时器
减轻浏览器压力