• Like
2011彩票首页开发实践
Upcoming SlideShare
Loading in...5
×

2011彩票首页开发实践

  • 9,931 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • cool
    Are you sure you want to
    Your message goes here
  • thanks
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,931
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
369
Comments
2
Likes
15

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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