• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2011彩票首页开发实践
 

2011彩票首页开发实践

on

  • 10,005 views

 

Statistics

Views

Total Views
10,005
Views on SlideShare
2,637
Embed Views
7,368

Actions

Likes
15
Downloads
368
Comments
2

22 Embeds 7,368

http://ued.taobao.com 6655
http://www.cnblogs.com 246
http://www.zhuaxia.com 139
http://xianguo.com 114
http://reader.youdao.com 47
http://www.longtengcn.com 45
http://zhuaxia.com 38
http://static.slideshare.net 23
http://cache.baidu.com 18
http://www.itfeed.cn 8
http://www.hbued.com 8
http://old.xianguo.com 5
http://sxblog.net 4
http://www.sudasuda.com 4
http://hbued.com 3
http://fe.baidu.com 2
http://localhost 2
http://www.sxblog.net 2
http://mailreader.163.com 2
url_unknown 1
http://o.xianguo.com 1
http://www.itfeed.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2011彩票首页开发实践 2011彩票首页开发实践 Presentation Transcript

    • 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 1440*900浏览器首屏参考线7 9
    • 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
    • 清理隐藏的定时器 减轻浏览器压力