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

深碍√TFBOYSˉ_ 2022-11-14 11:44 1168阅读 0赞

### 文章目录 ###

*  一.大量图片加载优化方案
 *   *  1.将图片服务和应用服务分离(从架构师的角度思考)
     *  2. 图片压缩方案
     *  3.图片懒加载
     *   *  实现方案一
         *  实现方案二
     *  4.小图片比较多时
     *  5.http2解决连接数限制
 *  二、图片过大加载优化方案

加载的图片太多或者太大导致页面加载完成慢的问题；图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长,导致用户长时间等待。

# 一.大量图片加载优化方案 #

## 1.将图片服务和应用服务分离(从架构师的角度思考) ##

对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器。

浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的,一般在2-6之间,超过限制数目的请求就会被阻塞.一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

## 2. 图片压缩方案 ##

我们可以借助一些第三方软件来进行压缩,压缩后分辨率不变,肉眼看不失真；  
我们项目中对使用的图片基本都会进行压缩再上传。

## 3.图片懒加载 ##

图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片。  
为优化回流，可以先设置占位符

### 实现方案一 ###

document.documentElement.clientHeight//获取屏幕可视区域的高度
    document.documentElement.scrollTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
    element.offsetTop//获取元素相对于文档顶部的高度

如果：clientHeight+scroolTop>offsetTop，则图片进入了可视区内，则被请求。

借一张图：[原文链接][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]

代码实现：

### 实现方案二 ###

getBoundingClientRect()//获取元素的大小及位置

我们滚动条向下滚动的时候，bound.top值会变得越来越小，也就是图片到可视区顶部的距离也越来越小，所以当bound.top == clientHeight时，说明土片马上就要进入可视区了，只要我们在滚动，图片就会进入可视区，那么就需要请求资源了。也就是说，在bound.top<=clientHeight时，图片是在可视区域内的。

代码实现：

## 4.小图片比较多时 ##

可以用雪碧图、字体图标、base64等，这样可以有效减少连接数

## 5.http2解决连接数限制 ##

http2一个站点只有一个连接。每个请求为一个流，每个请求被分为多个二进制帧，不同流中的帧可以交错的发送，实现多路复用。这就解决了连接数限制的问题

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

传输和渲染比较慢

1.  如果是相册之类的可以预加载，在展示当前图片的时候，就加载它的前一个和后一个图片
2.  加载的时候可以先加载一个压缩率非常高的缩略图，以提高用户体验,点击再或加载到之后再查看清晰图
3.  使用渐进式jpeg，会提高用户体验  
    [参考文章][Link 2]  
    Baseline JPEG  
    ![在这里插入图片描述][20210329003517100.gif_pic_center]

Progressive JPEG  
![在这里插入图片描述][20210329003528969.gif_pic_center]  
存储方式不同

1.  如果展示区域小于图片的真实大小，可以在服务端先压缩到合适的尺寸

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115290905][https_blog.csdn.net_qq_39903567_article_details_115290905]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/47f7dab186e844de929879a4d65b5b71.png
[Link 1]: https://zhuanlan.zhihu.com/p/55311726
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]: /images/20221022/ceabba3cb08f451aaf815f1ca130d191.png
[Link 2]: https://www.biaodianfu.com/progressive-jpeg.html
[20210329003517100.gif_pic_center]: /images/20221022/8b1e609847174af9a1acbb56ce90fae1.png
[20210329003528969.gif_pic_center]: /images/20221022/86d9a44c5f2441599396ee65d3199575.png
[https_blog.csdn.net_qq_39903567_article_details_115290905]: https://blog.csdn.net/qq_39903567/article/details/115290905