前端图片加载优化

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

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

 

一、预加载、懒加载

 

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

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

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

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

 

 

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

 

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

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

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

 

 

三、简单粗暴的压缩方案

 

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

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

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

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

　　　　

 

 

 

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

 

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

　　咱们知道图片在传输过程当中是流传输,若是将图片转换成base64,其实是变大了,而且浏览器在decode  base64编码的图片时须要耗费不少时间的,因此若是咱们选择此种方案的话,最好选择一些小图片,否则得不偿失,在webpack中能够设置最大多少byte的图片压缩成base64