前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)

文章目录

• 一.大量图片加载优化方案
• • 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一个站点只有一个连接。每个请求为一个流，每个请求被分为多个二进制帧，不同流中的帧可以交错的发送，实现多路复用。这就解决了连接数限制的问题

二、图片过大加载优化方案

传输和渲染比较慢

1. 如果是相册之类的可以预加载，在展示当前图片的时候，就加载它的前一个和后一个图片
2. 加载的时候可以先加载一个压缩率非常高的缩略图，以提高用户体验,点击再或加载到之后再查看清晰图
3. 使用渐进式jpeg，会提高用户体验
   参考文章
   Baseline JPEG
   
   存储方式不同
   4. 如果展示区域小于图片的真实大小，可以在服务端先压缩到合适的尺寸

   本文链接:https://blog.csdn.net/qq_39903567/article/details/115290905

   来源：LYFlied

   声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！