2011淘宝彩票首页开发实践 栋寒栋寒   www.cnblogs.com/zhenn          2011-5-10
http://caipiao.taobao.com/lottery/index_v3.htm
合理安排内容的展现次序   模块化开发   速度、性能 延续html5革命事业   其他细节
合理安排内容的展现次序    模块化开发    速度、性能  延续html5革命事业    其他细节
典型的两列结构      栋寒float:left      float:right
Dom解析顺序    自      上        而          下
在一段时间内用户所看到的页面      等待渲染…
无法改变用户的带宽环境  What we can do?
优化策略:• 破坏规整的dom结构• 使用定位来实现UI设计• 优化显示次序
损坏的html:       焦点图右侧            彩种导航                    焦点图                    数字彩快速投注                              开奖公告  ...
2                  3               1                       45       1024*768浏览器首屏参考线                               8    6 ...
So:至上而下的逐次展现方式假装很快
合理安排内容的展现次序  模块化开发   速度、性能 延续html5革命事业   其他细节
功能颗粒化
Why do like this
• 更加适合团队开发• 易维护性• 便于做按需加载
e.g.       点击触发异步请求        Async()                  载入html文档       加载js逻辑文件
Full code            插入html代码            加载js模块并执行回调
弊端:太多的http请求?
Combo利器
基于yui3的实现
合并use进一步减少请求数
合理内容的展现次序  模块化开发 速度、性能延续html5革命事业  其他细节
Fast by default
用户最关注的速度• 资源文件加载所耗时间• 浏览器渲染时间
• 资源文件加载所耗时间• 浏览器渲染时间
减少http请求数• 通过combo合并js、css请求• 延时加载图片、非展示不加载• 地球人都知道的css sprite技术
延时加载图片    延时加载的图片对象
压缩http请求收发数据量• 减小html文档的大小• 异步加载js模块• minify css、js• 保证质量前提下,压缩图片• Gzip(deflate),服务器配置
• 资源文件加载所耗时间• 浏览器渲染时间
精简dom节点数• 避免冗余的html标签• 适时做延时渲染和异步加载• 让用户的浏览器视口决定页面 首次加载时的dom节点数
前后端交互:缓解前端渲染压力并分        隔后端的处理时间,缺点在于前端发生交互事        件时,等待时间稍长   异步加载 VS 延时渲染纯前端交互:交互效率较高,等待时间短,缺点在于页面首次加载时,要把后端查询的数据全部push...
Js执行效率• 数据访问• 算法和流程控制• dom操作• ......
了解更多请参考此书
电子版下载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
清理隐藏的定时器      减轻浏览器压力
2011彩票首页开发实践
2011彩票首页开发实践
2011彩票首页开发实践
2011彩票首页开发实践
Upcoming SlideShare
Loading in...5
×

2011彩票首页开发实践

9,989

Published on

Published in: Technology, Design
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,989
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
374
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

2011彩票首页开发实践

  1. 1. 2011淘宝彩票首页开发实践 栋寒栋寒 www.cnblogs.com/zhenn 2011-5-10
  2. 2. http://caipiao.taobao.com/lottery/index_v3.htm
  3. 3. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
  4. 4. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
  5. 5. 典型的两列结构 栋寒float:left float:right
  6. 6. Dom解析顺序 自 上 而 下
  7. 7. 在一段时间内用户所看到的页面 等待渲染…
  8. 8. 无法改变用户的带宽环境 What we can do?
  9. 9. 优化策略:• 破坏规整的dom结构• 使用定位来实现UI设计• 优化显示次序
  10. 10. 损坏的html: 焦点图右侧 彩种导航 焦点图 数字彩快速投注 开奖公告 (左上)广告 排行榜 工具列表 (左下)广告 彩票攻略 足篮彩快速投注 推荐合买 彩票资讯
  11. 11. 2 3 1 45 1024*768浏览器首屏参考线 8 6 1440*900浏览器首屏参考线7 9
  12. 12. So:至上而下的逐次展现方式假装很快
  13. 13. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
  14. 14. 功能颗粒化
  15. 15. Why do like this
  16. 16. • 更加适合团队开发• 易维护性• 便于做按需加载
  17. 17. e.g. 点击触发异步请求 Async() 载入html文档 加载js逻辑文件
  18. 18. Full code 插入html代码 加载js模块并执行回调
  19. 19. 弊端:太多的http请求?
  20. 20. Combo利器
  21. 21. 基于yui3的实现
  22. 22. 合并use进一步减少请求数
  23. 23. 合理内容的展现次序 模块化开发 速度、性能延续html5革命事业 其他细节
  24. 24. Fast by default
  25. 25. 用户最关注的速度• 资源文件加载所耗时间• 浏览器渲染时间
  26. 26. • 资源文件加载所耗时间• 浏览器渲染时间
  27. 27. 减少http请求数• 通过combo合并js、css请求• 延时加载图片、非展示不加载• 地球人都知道的css sprite技术
  28. 28. 延时加载图片 延时加载的图片对象
  29. 29. 压缩http请求收发数据量• 减小html文档的大小• 异步加载js模块• minify css、js• 保证质量前提下,压缩图片• Gzip(deflate),服务器配置
  30. 30. • 资源文件加载所耗时间• 浏览器渲染时间
  31. 31. 精简dom节点数• 避免冗余的html标签• 适时做延时渲染和异步加载• 让用户的浏览器视口决定页面 首次加载时的dom节点数
  32. 32. 前后端交互:缓解前端渲染压力并分 隔后端的处理时间,缺点在于前端发生交互事 件时,等待时间稍长 异步加载 VS 延时渲染纯前端交互:交互效率较高,等待时间短,缺点在于页面首次加载时,要把后端查询的数据全部push到前端,增加服务器负担
  33. 33. Js执行效率• 数据访问• 算法和流程控制• dom操作• ......
  34. 34. 了解更多请参考此书
  35. 35. 电子版下载Ref:http://ishare.iask.sina.com.cn/f/8344965.html
  36. 36. 较之老版首页• 扔掉cubee(yui3.0.0的遗留物)• 应用yui3.3.0,减小对domready的依赖• 合理的注册事件Avialable而非 DomReady,更及时的展现页面交互
  37. 37. yslow
  38. 38. Pagespeed
  39. 39. 我们不过分依赖于yslow、pagespeed
  40. 40. 我们更愿意相信 真实的数据
  41. 41. 哈勃数据监控老版 新版
  42. 42. 合理内容的展现次序 模块化开发 速度、性能延续html5革命事业 其他细节
  43. 43. IE8及其以下版本hack
  44. 44. 禁用脚本?
  45. 45. 适度引导用户禁用脚本?
  46. 46. 合理内容的展现次序 模块化开发 速度、性能延续html5革命事业 其他细节
  47. 47. 旺旺web api(仅支持IE内核,利用ActiveXObject插件) Just click
  48. 48. 文件地址:http://a.tbcdn.cn/apps/lottery/indexv3/js/webtribe.js
  49. 49. 清理隐藏的定时器 减轻浏览器压力
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×