首屏轮播图的性能优化

[lijin]

图片的延迟加载

如果轮播图的所有banner同时去下载，会造成带宽和资源的抢占导致延迟首个banner的展现和影响网页的其它部分。

可以对第二张之后的banner进行延迟加载（可以使用textarea或data-src方案），加载的时机可以选择为用户对轮播图的切换操作或者网页的完全加载后。

首个图片的预加载

首屏视觉的重点就在首个banner上，所以可以对首个banner进行预加载，例如：

var img = new Image();
img.src = "http://www.xxx.com/a.png";

首个图片脱离脚本

Javascript的加载需要不少时间，如果轮播图是通过脚本生成的，那么首个banner的展现肯定会大大延后，所以我们要控制首个图片的展现是直接的，不需要依赖Javascript的控制。

图片的优化

图片本身的优化也很重要，影响到图片的下载时间和展现效果（例如JPG通过设置可以分为从上到下展现和从模糊到清晰展现）。

图片的优化最首要的还是选择合适的图片格式，比如PNG、JPG、GIF等，如果对性能的要求很严格的话，还可以考虑一下Google推出的WEBP格式。之后我会专门介绍一下图片的格式。

选择完格式之后还应该对图片进行压缩。

这里推荐腾讯的图片优化工具——智图，可以对比图片的优化效果还支持WEBP格式。

其它说明

可以参看真融宝首页的示例，另外做轮播图性能优化的时候不要只考虑性能因素，还需要注意用户体验。