前端开发——海量图片加载（转）

原文链接：http://blog.csdn.net/rocketleopard/article/details/9052645

 

    面试百田信息科技的时候，面试官看了我的简历，对我的电子商务策划案感兴趣，就开始发问了：“假如你的网站上有几十甚至几百张图片，如此多的图片你要怎么实现顺畅的加载，而不至于让用户等待时间过长关了页面？”

    众所周知，网站的用户体验很重要，如果等待时间过长，用户很大可能会关了这个页面，从而影响网站的停留（这个时间最好别超过4秒）

    当时已经开始学Ajax，但是面试的时候却完全没有运用Ajax的思想，铤而走险随口而出：“浏览器的并发下载！”接着我就被轰炸了，其实当时一点都不 懂浏览器的并发，只是这个技术名词耳熟能详。还胡乱吹：“试过最大并发量可以为10。”回来的时候查了资料，顿时傻眼了！一般是2~4！只有chrome 最高，能达到6！

    今天在图书馆泡了半天的《HTTP权威指南》，加上自己的经验总结，对当初的面试题有了新的解决方案：

    1.渐进式图片加载：先加载模糊的图片，再逐渐清晰，就算等待时间更长，用户也能看到浏览器的“动作”，而不会去关闭页面

    2.实现浏览器的并发下载：同时建立TCP链接，发送HTTP请求，将建立链接的时间重叠而不是串行相加。

    3.用Ajax实现页面的预加载，而不是等所有图片加载完再渲染页面，等待触发鼠标滚轮等事件再实现图片的异步加载。

    4.建立持久链接：根据TCP协议的特点，起初建立链接完成“三次握手”需要较大的时延，而且也由于协议本身的设计开始传输时无法获得较大的传输带宽。调用持久链接能够节省重新建立链接的开销以及获得高传输速度。