前端图片加载优化

图片是界面显示效果很重要的组成部分，图片加载关系到用户体验、应用性能，优化图片加载的常用策略为：预加载和懒加载。

图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长.

 

1、预加载、懒加载

 

　　预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

　　懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

　　两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

　　懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。

 

 

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

 

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

　　(注:图片服务器是专门为图片读写操作优化的独立服务器,运行网站的服务器称为应用服务器)

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

 

 

3、简单粗暴的压缩方案

 

　　我们可以借助一些第三方软件来进行压缩,比如https://tinypng.com/,压缩后分辨率不变,肉眼看不失真

　　我们也可以使用阿里云的压缩，给定图片的尺寸，在图片后面加入压缩规则名称，示例如下：

　　　　https://static.iberhk.com/poster/2018/12/20181211192214157355.jpg!thumb-375

　　具体的图片显示规则参考如下示例图：

　　　　

 

 

 

4、将图片压缩成base64格式来节约请求

 

　　将图片压缩成base64,随html或者css一起下载到浏览器,不需要额外的请求,这样就节约了请求.

　　我们知道图片在传输过程中是流传输,如果将图片转换成base64,实际上是变大了,并且浏览器在decode  base64编码的图片时需要耗费很多时间的,所以如果我们选择此种方案的话,最好选择一些小图片,不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64