天行健、君子以自强不息;地势坤、君子以厚德载物!

关于我

zhenn 前端工程师,淘宝 北京!这里仅仅记录我的技术生活以及成长历程,如果有兴趣和我交流,猛击以下链接即可。
follow zhenn in TC Microblog
follow zhenn in SinaTwitter

2011彩票首页开发实践

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

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

另外,自从淘宝combo上线后,我们就可以“肆无忌惮”的使用模块化开发,而不用担心会产生过多的http请求,从而影响页面性能。非但如此,功能模块的颗粒化,可以让我们分割功能需求给不同的开发人员,即更加适合团队开发,这样可以很大程度上提高开发效率,加上yui3特有的强制沙箱,并不用担心冲突的产生。除此之外,这样的开发模式,可以减小产品的维护成本,根据页面上出现的bug,可以很快定位到某个特定的模块文件,而调试小文件往往比调试一个大文件要方便快捷的多,这就是所谓的易维护性。

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

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

所以,个人觉得没有最好的技术,只有更佳的应用场景。

较之老版首页,新首页扔掉了cubbe(yui3.0.0遗留物),应用最新的yui3.3.0,合理的注册事件available,减少对domready的依赖,更加及时的展现页面交互。

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

我想这样的数据要比yslow、pagespeed更有说服力,这才是我们想要看到的结果,关于其它细节,大家点击这里下载ppt

最后,感谢夏之同学,有了你简洁有力的设计,才让新版彩票首页如此的精彩。

posted on 2011-05-11 17:19 zhenn 阅读(...) 评论(...) 编辑 收藏

公告

导航

统计

  • 随笔 - 35
  • 文章 - 1
  • 评论 - 30
  • 引用 - 0