关于大容量页面前端速度优化方案

        何为大容量页面，我的理解为页面html代码量超过500行，页面展示长度超过1屏的页面为大容量页面，同时，这些页面还可能充斥着各种js，广告代码，统计代码，前端优化得不好，对于机器不好的网友来说，打开这张页面就有一种想要关闭的感觉，对于网站来说，自然是一种损失，如何优化呢？ 


第一层优化： 依据y‘slow里面的规则，减少http请求，使用csssprite，合并js，减少dom数量，嵌套，增加缓存，过滤注释等，其他诸如后端的就不说了，这种网上已经有很多这样的说明了，就不多说了，不过这里会出现一个问题，就是大型网站的css，js应该如何布局，单个页面单个css和js的方案是否可行，对于全站的优化有何利弊，这个以后再讨论。根据第一层的优化，从数据来说，y’slow的分数一般可以提升一个到二个等级，但是从感官来说，似乎提升不大。


第二层优化：
 a.优化tab数据，越来越多的网站使用了tab这种流行的交互模式，但是带来的副作用就是页面代码量激增，一般的tab制作方式就2种，一种使用display:none/block来控制隐藏和显示，但是display:none的方式，浏览器还是要提前渲染隐藏的tab内容，里面如果有图片，浏览器一样需要去下载；另外一种使用ajax去读数据库，这使用起来不方便。 taobao这次改版使用了textarea的方法，把要隐藏的tab写在textarea中，这样隐藏的内容就不会被渲染，成了一段死的字符串，如果tab里面有大量的图片，速度的提升是明显的，只要js激活当前tab时把代码处理一下就可以了，相当灵活的方式。
b.第一屏以下图片的延迟展示，这种方式在图片量大的门户网站非常得有效，只在onscroll滚动的时候去加载第一屏以后的图片，这样整张页面的初始化需要下载的容量得到了有效地控制，感官上能明显得感觉到页面速度加快。


如果第一层，第二层优化都做了，那接下去就是整站级别的优化了，下次再说。。