TGideas实例：加载，不只是少一点点(5)

其实，使用第二种方法有明显的好处。第一是，html文件体积比json文件小，加载量减少；第二是直接使用html文件，减少了JS动态生成结构的开销。

2.3 延时加载

对于一组有加载时间间隔的资源，我们其实可以对其做加载延时，按照其前后出现的顺序，在时间间隔后即时加载下一个资源。例如轮播广告就很适合这么做。

图3-9 轮播广告

2.3.1 轮播广告

以往轮播广告的加载模式是一次性全部加载，虽然采用延迟加载，但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时（例如轮播广告设置的是5秒切换一次），第二张广告图片以后的图片加载就没有必要了。

图3-10 轮播广告加载的请求瀑布图

其实我们可以这样，第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。判断的方式很简单，我们只要在初期生成轮播广告结构的时候，不设置img标签的src属性，然后加载时判断这张图片是否有src属性，如果没有，加载图片并设置这个属性。

图3-11 判断方式

这样，如果用户在首页停留时长只有14秒，那么就节省了第4、5张广告图片的下载量，大约有100K左右。

图3-12 优化后的请求瀑布图

第3章 其他方式

3.1 文件压缩

3.1.1 代码

老生常谈的方法。我们可以将代码里多余的空格，回车，无用标签删除，替换名字较长的变量名等等方式减少脚本文件大小。

图4-1 脚本压缩对比

3.1.2 多媒体

对于图片，不同格式，不同压缩率都会造成图片大小的千差万别。选择一个合适并且图片质量可以接受的压缩方式，可以节省很大一笔加载量。

图4-2 图片压缩对比

对于视频、音频、Flash来说，也都一样，码率、格式等等方面都会对大小造成影响。

图4-3 视频压缩对比

3.2 CSS 3

CSS 3是一个不算太新，但由于我朝浏览器限制而得不到大范围应用的技术。其实我们可以在一些效果表现不是很重要的页面使用CSS 3来针对浏览器做一些差异化效果，已达到减少加载量的目的。

3.2.1 替换图片