2011 Lottery Home Page Development Practice

The new version of the lottery home has been quietly online for one months, at present, only in the old version of the first hanging a chain access, no coverage of the previous version, the new version of the parallel measures, on the one hand, in order to provide users with adequate buffer, on the other hand, is to collect feedback from users to improve our products, make it more close to the user.

The first edition of the Lottery homepage, the use of semantic HTML5 tag to layout the page, for not supporting the HTML5 IE series browser (IE8 and the following version), still use the JS method to activate the custom label. When the user disables the JS script, based on the special dependence of the lottery business on the script, it does not adopt the transition to the HTML4 label, but provides the user with a prompt to start the JS script interface.

In addition, Taobao CDN Combo is ideal for merging fine-grained granular script files, which can lead to fuller modularity without fear of generating excessive HTTP requests, which can affect page performance. As far as this is concerned, the granulation of functional modules is more suitable for the cooperation of many people, so it can greatly improve the efficiency of development, plus YUI3 special mandatory sandbox, and do not worry about the emergence of conflict. In addition, such a development model, can reduce the maintenance costs of the product, according to the page appears on the bug, you can quickly locate a specific module file, and debugging small files are often more convenient than debugging a large file, which is the so-called easy maintenance.

When it comes to performance, a series of optimization strategies, such as asynchronous loading, latency rendering, HTTP reduction, requests, and so on, can emerge in our minds. These traditional optimization strategies are still applicable, in fact, the modular development model can make asynchronous loading more thorough, when the interactive event occurs, in addition to the server to request the corresponding HTML document fragment, but also after this, loading JS module, This is to further reduce the page load when the HTTP request to send and receive data, to improve the performance of the page is helpful.

For asynchronous loading and delay rendering, both can reduce the number of DOM nodes in the initial state and reduce the rendering pressure of the browser. The difference is that asynchronous loading is a back-and-forth interaction, in alleviating the front pressure can also be divided back-end processing time, reduce the pressure on the server, the lack of the body now, the current side of the interaction event, the waiting time is slightly longer, while the delay rendering is pure front-end interaction, interactive efficiency is high, the disadvantage is that the page load, The backend has to push all the query data to the front end, which adds to the server burden. How to choose the appropriate technology to implement the project under different application scenarios? This requires a close collaboration with the back-end engineers, such as the data in the block in the back-end need to do a large number of associated queries (relatively time-consuming), you should choose asynchronous loading rather than delay rendering. So, there is no best technology, only a better application scenario.

Compared to the old version of the home page, New home threw away the Cubee (yui3.0.0 is also very immature, the lack of many advanced functions, in order to make up for the shortcomings of the YUI3 earlier version of the yui3.0.0 made a lot of changes, this is the original intention of the Cubee, yui3.3.0 has been these missing functions to make up the complete), the latest yui3.3.0, reasonable Registration event available, reduce the reliance on domready, and more timely presentation of page interaction.

The new and old home page loading speed statistics are as follows (data from the Hubble monitoring):

I think this kind of data is more persuasive than YSlow, pagespeed, this is what we want to see the results, for other details, we click here to download ppt. Finally, special thanks to summer's classmates.