文章目录
- 一.大量图片加载优化方案
-
- 1.将图片服务和应用服务分离(从架构师的角度思考)
- 2. 图片压缩方案
- 3.图片懒加载
-
- 实现方案一
- 实现方案二
- 4.小图片比较多时
- 5.http2解决连接数限制
- 二、图片过大加载优化方案
加载的图片太多或者太大导致页面加载完成慢的问题；图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长,导致用户长时间等待。
一.大量图片加载优化方案
1.将图片服务和应用服务分离(从架构师的角度思考)
对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当 站存在大量的图片读写操作时,建议使用图片服务器。
浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞.一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目如图
代码实现：
实现方案二
我们滚动条向下滚动的时候，bound.top值会变得越来越小，也就是图片到可视区顶部的距离也越来越小，所以当bound.top == clientHeight时，说明土片马上就要进入可视区了，只要我们在滚动，图片就会进入可视区，那么就需要请求资源了。也就是说，在bound.top
代码实现：
4.小图片比较多时
可以用雪碧图、字体图标、base64等，这样可以有效减少连接数
5.http2解决连接数限制
http2一个站点只有一个连接。每个请求为一个流，每个请求被分为多个二进制帧，不同流中的帧可以交错的发送，实现多路复用。这就解决了连接数限制的问题
二、图片过大加载优化方案
传输和渲染比较慢
- 如果是相册之类的可以预加载，在展示当前图片的时候，就加载它的前一个和后一个图片
- 加载的时候可以先加载一个压缩率非常高的缩略图，以提高用户体验,点击再或加载到之后再查看清晰图
- 如果展示区域小于图片的真实大小，可以在服务端先压缩到合适的尺寸
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！