IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

淘宝2011彩票首页开发实践

Taobao UED Team 2011-05-15 14:31:48 累计浏览 4,426 次
本机暂存

    彩票新版首页已经悄无声息的上线一个月时间,目前只在老版首页中挂了一个链接入口,没有覆盖之前的版本,这种新旧版并行的措施,一方面为了给用户提供足够的缓冲,另外一方面则是收集用户的反馈意见来完善我们的产品,使之更加贴近用户。

    此次彩票首页的改版,采用语义化的html5标签来布局页面,针对不支持html5的IE系列浏览器(IE8及其以下版本),依然采用js方法激活自定义标签即可。在用户禁用js脚本的情况下,基于彩票业务对脚本的特殊依赖性,并没有采用过渡到html4标签的做法,而是给用户提供一个提示启动js脚本的界面。

    另外,淘宝CDNcombo非常适合合并高粒度的颗粒化脚本文件,这会带来更充分的模块化,而不用担心会产生过多的http请求,从而影响页面性能。非但如此,功能模块的颗粒化更适合多人合作,这样可以很大程度上提高开发效率,加上yui3特有的强制沙箱,并不用担心冲突的产生。除此之外,这样的开发模式,可以减小产品的维护成本,根据页面上出现的bug,可以很快定位到某个特定的模块文件,而调试小文件往往比调试一个大文件要方便快捷的多,这就是所谓的易维护性。

    说到性能,我们脑海中会即可浮现出一系列优化策略,如异步加载、延时渲染、减少http、请求等等。这些传统的优化策略我们依然适用,事实上模块化的开发模式可以让异步加载做的更彻底,当交互事件发生时,除了向服务器请求相应的html文档片段外,还可以在此之后,加载js模块,这无非进一步减少了页面加载时http请求的收发数据量,对提高页面性能是大有裨益的。

    针对异步加载和延时渲染,二者都可以减少初始状态下dom节点数,减轻浏览器渲染压力。区别在于异步加载是前后端交互,在缓解前端压力的同时还可以分割后端的处理时间,减轻服务器的压力,不足之处体现在,当前端发生交互事件时,等待时间稍长;而延时渲染则是纯前端交互,交互效率较高,缺点在于页面加载时,后端要把所有查询的数据全部push到前端,如此一来,就增加了服务器负担。如何在不同的应用场景下选择合适的技术实现方案呢?这就需要和后端工程师密切配合,如区块中数据在后端需要做大量关联查询时(相对耗时较多),就应该选择异步加载而不是延时渲染。所以,没有最好的技术,只有更佳的应用场景。

    较之老版首页,新首页扔掉了cubee(当年yui3.0.0还很稚嫩,缺少很多高级功能,为了弥补YUI3早期版本的缺陷,对yui3.0.0作了大量修改,这也是cubee诞生的初衷,yui3.3.0已经将这些缺失功能弥补完整),应用最新的yui3.3.0,合理的注册事件available,减少对domready的依赖,更加及时的展现页面交互。

    新老首页的加载速度统计如下(数据来源于哈勃监控):

    原图已失效

    原图已失效

    我想这样的数据要比yslowpagespeed更有说服力,这才是我们想要看到的结果,关于其它细节,大家点击这里下载ppt。最后,特别鸣谢夏之同学。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 配合jquery实现异步加载页面元素 (累计阅读 6,390)
  2. iOS 保持界面流畅的技巧 (累计阅读 3,677)
  3. Javascript 装载和执行 (累计阅读 3,528)
  4. Script 元素的异步加载属性 (累计阅读 3,473)
  5. 像php一样奔跑的js代码 (累计阅读 2,466)
  6. 用In.js颗粒化管理、加载你的Javascript模块 (累计阅读 2,445)
  7. 对Android中的多图片异步加载的重新思考 (累计阅读 2,276)