`
hl756799782
  • 浏览: 77056 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

前端开发——海量图片加载(转)

阅读更多

原文链接: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协议的特点,起初建立链接完成“三次握手”需要较大的时延,而且也由于协议本身的设计开始传输时无法获得较大的传输带宽。调用持久链接能够节省重新建立链接的开销以及获得高传输速度。

分享到:
评论

相关推荐

    电商后台管理系统(前端项目)

    同时,前端可能需要与后端配合,通过大数据分析工具如Spark或Hadoop处理海量数据,然后将结果以API的形式提供给前端展示。 总的来说,“vue-shop-admin-master”项目展示了“大前端”理念在电商后台管理系统中的...

    大前端技术与管理——饿了么移动性能可视化之路 共32页.pdf

    ### 大前端技术与管理——饿了么移动性能可视化之路 #### 一、移动应用性能关注点 在当今数字化时代,移动应用已经成为人们日常生活不可或缺的一部分。对于开发者而言,确保应用程序性能稳定、用户体验流畅至关...

    壁纸前后端wallpaper-v1.0.2.zip

    同时,为了保证用户体验,前端需要优化图片加载策略,例如采用懒加载、WebP格式等方法,减少流量消耗。此外,考虑到小程序的性能和规范,开发者还需要遵循微信小程序或支付宝小程序的开发指南,确保代码兼容性和审核...

    本地生活小程序的设计与实现--大数据Web开发框架

    - **定义**: 大数据Web开发框架是指利用大数据技术和Web开发技术相结合的方式构建的软件架构,它能够处理海量数据的同时保持高效、稳定的前端响应。 - **优势**: - **高性能**: 能够快速处理大规模数据集,确保应用...

    047 公司名称大数据可视化平台_大屏幕展屏(html源码).rar

    为了提升性能,可能需要进行前端缓存优化、异步加载策略以及服务器端的数据预处理。 总结,公司名称大数据可视化平台通过HTML源码实现了对大数据的前端展示,结合强大的前端技术,为用户提供了一个高效、直观的数据...

    微信小程序demo:斗图神器51.zip

    “斗图神器51”是一个基于微信小程序的趣味应用,主要功能是为用户提供海量的表情包资源,方便用户在聊天中进行“斗图”——即通过发送有趣的图片来回应对话,增加聊天的乐趣。这种小程序通常包含用户界面设计、表情...

    Unsplash 的三方壁纸客户端.zip

    Unsplash拥有海量的高质量图片,这些图片由全球各地的摄影师贡献,涵盖各种主题和风格,满足了不同用户的需求。Mysplash客户端将这些图片以友好的方式呈现,用户可以轻松浏览、搜索并下载自己喜欢的壁纸,为自己的...

    汽车销售可视化.rar

    《汽车销售可视化——基于Hadoop、Hive与JavaWeb的大数据项目实践》 在当今的信息化社会,数据已经成为企业决策的重要依据。汽车行业也不例外,通过对汽车销售数据的深度挖掘与分析,可以洞察市场趋势,优化营销...

    豆瓣探索者这个作品是依托豆瓣这个平台制作的一个数据分析系统。

    **豆瓣探索者——基于Node.js的数据分析系统** 豆瓣探索者是一个利用豆瓣平台数据进行深度分析的应用,它旨在为用户和研究者提供一个直观且功能强大的工具,以挖掘豆瓣平台上的各类信息,包括书籍、电影、音乐等...

    spotweather:显示与当前当地天气相匹配的 Flickr 创意共享中的本地图像

    《JavaScript实现:SpotWeather——基于Flickr的创意共享天气匹配图片展示》 在现代互联网世界中,用户界面的个性化和互动性成为了提升用户体验的关键因素。SpotWeather是一个创新的应用,它巧妙地结合了天气信息和...

    人工智能-项目实践-信息检索-内蒙古工业大学毕业设计-影视影讯检索系统的设计与实现

    描述部分提到,“内蒙古工业大学毕业设计——影视影讯检索系统的设计与实现”,意味着这个系统是为了解决用户在海量的影视资源中快速、准确地找到所需信息的问题。系统可能采用了先进的搜索算法,比如TF-IDF、BM25...

    基于ECharts高速综合管控大数据平台可视化大屏源码.rar

    整体来看,这个项目涵盖了大数据处理、前端开发、后端接口设计、性能优化等多个领域的知识,是学习和实践数据可视化及大数据综合管控的一个典型实例。通过深入研究这个源码,开发者可以提升在这些领域的技能和经验。

    iconfont图标哦

    "iconfont图标哦"这个标题和描述虽然简洁,但其实涉及到了一个在前端开发中非常重要的工具——Iconfont。Iconfont是中国阿里巴巴集团旗下的一个图标库,它为开发者提供了丰富的矢量图标资源,可以极大地提升网站或...

    base-yt-unuglify.json_youtube_

    《深入剖析YouTube源码解析——基于base-yt-unuglify.json》 在当今互联网时代,视频分享平台YouTube以其海量的视频资源、丰富的互动功能以及强大的技术支持,成为全球最受欢迎的在线视频网站之一。为了提供流畅的...

    基于Spark大数据处理的电影推荐系统设计与实现.pdf

    1. **前端可视化实现**:利用AngularJS框架开发用户可视化工具,提供用户友好的界面交互。 2. **后端业务处理实现**:通过Spring框架进行综合业务服务的实现,处理来自前端的业务请求。 3. **算法设计与实现**:...

    fontawesome-pro-6.0.0-alpha3.zip

    它的最新版本——Font Awesome Pro 6.0.0 Alpha 3,带来了许多新特性和改进,进一步提升了其在Web设计和开发中的应用价值。本文将深入探讨这个版本的关键知识点,帮助你更好地理解和利用这个强大的资源。 一、SVG...

    实时数仓VS离线数仓.docx

    在数据仓库架构的演变中,从 1990 年 Inmon 提出数据仓库概念到今天,数仓架构经历了最初的传统数仓架构——离线数仓库——离线大数据架构、Lambda 架构、Kappa 架构以及 Flink 的火热带出的流批一体架构,数据架构...

Global site tag (gtag.js) - Google Analytics