原文链接: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协议的特点,起初建立链接完成“三次握手”需要较大的时延,而且也由于协议本身的设计开始传输时无法获得较大的传输带宽。调用持久链接能够节省重新建立链接的开销以及获得高传输速度。
相关推荐
前端开发——递归函数.docx
Web前端开发——简单讲解(完整版)
前端经典——lazyload懒加载
前端项目游戏网站开发——剑网3,前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3前端项目游戏网站开发——剑网3
电商网站前端开发案例,全部由本人亲手完成,若有纰漏,欢迎大家指正。谢谢!
疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战
前端技术——代码片段 给更多程序员补充前端开发的知识和小技巧 提升你的开发效率的工具 掌握它,可以让开发更顺畅
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
前端基础——文档流与BFC
前端经典——vue实现穿梭框demo
前端面试——杨文坚stuQ公开课PPT
前端经典——vue-三级联动demo
WEB前端面试——常见CSS知识点
《Delphi Web前端开发教程——基于TMS WEB Core框架》PDF本教程适合对使用Delphi TMS WEB Core 创建 Web 应用程序感兴趣的初学者和高级开发人员。学习本教程只需要免费的 Delphi 社区版以及 TMS WEB Core 的试用版就...
前端经典——localstorage本地存储demo
前端经典——ajax前后数据交互
《前端架构——从入门到精通》一书重点脑图,本书涉猎较广,深度一般,针对前端技术做了系统的总结,从基础到微服务架构,脑图中整理了各章节相关重点
前端经典——webApp登录校验及封装
前端经典——Vue-tab-demo