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

                       4
5       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/in
dexv3/js/webtribe.js
清理隐藏的定时器



      减轻浏览器压力
2011彩票首页开发实践

2011彩票首页开发实践