Taobao 2011 New Home Development Practice

New Year Bell just over, Taobao new version of the whole "heart" online, the design of the bold layout from 960px to 1000px, the page more transparent, the new home more extensive practice of HTML5 and CSS3, fully compatible with the IPad, and in the accessibility of more positive attempts. For me, the development was a wonderful experience and gave me a new understanding of accessibility, HTML5, and performance optimization.

In fact, HTML5 is not so far away, and now has a lot of HTML5 template for PC terminals, if you do not consider the case of IE6/7/8 disable script, you can use the HTML5 tag completely. So for those who ie6/7/8 disable scripting, we refer to Facebook's practice of directing users to the "/?_fb_noscript=1" page with a noscript logo, replacing HTML5 tags with html4 tags, This is much lighter than writing a lot of hack to maintain compatibility.

If you are careful enough, you will find that the new home page does not fully follow the "grid", because a very pure document, the layers of wrap used to implement raster effects are inherently devoid of semantics, HTML5 brings more semantically labeled tags, which are so incompatible with the lack of semantic grid implementations that they get rid of grids and containers with absolute positioning , do not write so many hack, not fastest ~

In addition, on performance optimization, we did rely too much on YSlow, Pagespeed score, in fact, these rules are really blocking our WPO, not that these indicators are not scientific, but they limit our thinking and vision, not to mention, they are missing on the "load/ Rendering time "This most important factor in the assessment, when users see and available pages (especially the first screen), is the real performance improvement, therefore, the development of first Rendering (initial rendering) of the target to do some refactoring, rewrite almost all the logic Layer JS code (Domready before, even Render out of the UI before, JS is already running), when JS efficiency is higher, CPU loss is less, the browser will be more hardware resources to render the Dom itself, first Rendering naturally will be more early, subsequent rendering will speed up. can refer to the new and old Taobao home page CPU energy consumption, and its impact on the first Rendering (Green Line).

2010 (old) Home load CPU loss

2011 (New) Home load CPU loss:

Of course, delayed loading, delay rendering technology is still applicable here, the last time Taobao home page revision Yun Yu students made a detailed summary, here will not repeat. For more information, you can download PPT here.

Sincerely, thanks to the sea, Jade, Wang song, Jade Li, black Three, and finally to special thank you for the Jade-li children's shoes, with your pen, this home will be so shiny.