2011彩票首页开发实践

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

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

另外，淘宝CDN的combo非常适合合并高粒度的颗粒化脚本文件，这会带来更充分的模块化，而不用担心会产生过多的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的依赖，更加及时的展现页面交互。

新老首页的加载速度统计如下（数据来源于哈勃监控）：

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