Downloaded 376 times
Uploaded byjay li
2011彩票首页开发实践
该文档讨论了淘宝彩票首页的开发实践，强调了合理的内容展现顺序、模块化开发和优化页面速度与性能的重要性。提出了优化策略，包括减少HTTP请求、采用异步加载以及精简DOM节点数。同时，提到使用YUI3和GSAP等工具以提高用户体验和页面渲染效率。
2011彩票首页开发实践
- 1. 2011淘宝彩票首页开发实践 栋寒栋寒 www.cnblogs.com/zhenn 2011-5-10
- 2.
- 3. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 4. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 5. 典型的两列结构 栋寒 float:left float:right
- 6. Dom解析顺序 自 上 而 下
- 7. 在一段时间内用户所看到的页面 等待渲染…
- 9. 无法改变用户的带宽环境 Whatwe can do?
- 10.
- 11. 损坏的html： 焦点图右侧 彩种导航 焦点图 数字彩快速投注 开奖公告 （左上）广告 排行榜 工具列表 （左下）广告 彩票攻略 足篮彩快速投注 推荐合买 彩票资讯
- 12. 2 3 1 4 5 1024*768浏览器首屏参考线 8 6 1440*900浏览器首屏参考线 7 9
- 13.
- 14. 合理安排内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 15.
- 16. Why do likethis
- 17. • 更加适合团队开发 • 易维护性 •便于做按需加载
- 18. e.g. 点击触发异步请求 Async() 载入html文档 加载js逻辑文件
- 19. Full code 插入html代码 加载js模块并执行回调
- 20.
- 21.
- 22.
- 23.
- 24. 合理内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 25.
- 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.
- 38. 较之老版首页 • 扔掉cubee(yui3.0.0的遗留物) • 应用yui3.3.0，减小对domready的依赖 • 合理的注册事件Avialable而非 DomReady，更及时的展现页面交互
- 40.
- 41.
- 42.
- 43.
- 44. 哈勃数据监控 老版 新版
- 45. 合理内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 46.
- 47.
- 48.
- 49. 合理内容的展现次序 模块化开发 速度、性能 延续html5革命事业 其他细节
- 50. 旺旺web api （仅支持IE内核，利用ActiveXObject插件） Just click
- 51.
- 52. 清理隐藏的定时器 减轻浏览器压力