【难】javaWeb 预览很多较大的图片,如何提高速度,提升用户使用体验?

追赶追赶! 2018-10-26 10:57:59
项目有这么个模块,页面左侧是个报销单号表,是用户报销各种费用的记录,每个单号下有多个报销发票的图片,图片格式有.png, .jpg, .gif, .bmp, .jpeg。当用户点击左侧表中的某条记录时,页面右侧展示与该条记录有关的所有的图片,样式见下图,页面下侧是图片列表,点击小图片展示大图片,这些图片都存在另一台ftp服务器中。

目前的方案是将一条报销单号的所有图片的数据循环转换为base64码到前台展示,并将展示过的图片的base64数据存至txt文件中作为缓存文件用,再次浏览时读缓存。
目前的问题是,①有些报销单号下有100多张图片,后台会将所有图片循环转换为base64传至前台,图片转为base64码的过程挺耗时的,浏览器会卡很久;②读缓存文件也不快,读取速度见下图,有3秒,有4秒,缓存文件中存的是某张图片的base64码,一个图片一个缓存文件。

鄙人才疏学浅,目前只知道base64技术、jpg的渐进式加载技术。在当前情景下各位大神会采用什么技术采取什么方案来加快图片加载速度呢?望各位大神不吝赐教,万分感谢!
...全文
815 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
LastOfTheWilds 2018-11-10
  • 打赏
  • 举报
回复
放到缓存里行不行
nyq1999 2018-11-07
  • 打赏
  • 举报
回复
浏览器展示?浏览器对同一域名资源的加载是有并发限制的,服务器扛得住的话,多来几个域名绑定到服务器上,可以提高并发下载的数量。如img1.demo.com img2.demo.com .....等等
思想问题 2018-11-07
  • 打赏
  • 举报
回复
nginx放静态资源,还有就是上面说的 图片大小限制,缩略图展示,点击大图
雾里看花の 2018-11-02
  • 打赏
  • 举报
回复
一般图片访问问题都考虑用nginx作为图片服务器,试试nginx
stacksoverflow 2018-10-26
  • 打赏
  • 举报
回复
首先,对于每个原图,你需要一个供预览的小图(尽量把文件做小), 这个小图可以在上传图片的时候做,或者用批处理做..根据自己业务来。 然后,点击单号的时候不要复杂的转码,直接从服务器上(用img标签从http服务器上读就行)读几张小图和一个大图(至于读几张,根据业务来,总不能有100万张全读过来吧) 点击小图读大图。 小图缓存在浏览器会自动设置,大图缓存你查查浏览器缓存的资料,能缓存多大的图片。
千秋无痕 2018-10-26
  • 打赏
  • 举报
回复
第一步:动静分离------图片已经上传到服务器,保存到某个文件夹,这个文件夹最好放到应用容器之外,然后通过nignx共享该文件夹,页面可以通过url直接访问;

第二步:负载均衡------每台服务器承载的访问量是有上限的,那么需要增加多台机器来分担压力,所以可以考虑nignx负载均衡策略;

第三步:控制大小------如果图片太大,不管再怎么搞,都是无法满足你要求的,所以尽可能的限制上传到服务器的图片大小;

第四步:动态扩展------静态图片服务的访问压力不定,所以应该有一种机制能够随时增加或者减少机器,到达随意有心;

第五步:做到以上4步,你可以去钓鱼了

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧