【前端】加载的图片太多或者太大优化方案(上)

摘要

web性能的终极目标是减小资源到客户端的延迟,可是咱们在HTTP1.0/HTTP1.1协议中常常会遇到加载的图片太多或者太大致使页面加载完成慢的问题:图片太多致使向服务器请求的次数太多,图片太大致使每次请求的时间过长.

本篇将针对图片太多或者太大总结几种优化方案.

一.当图片太多时

方案一:将图片服务和应用服务分离(从架构师的角度思考)

对于这个方案对于经验尚浅的我来讲是考虑很少的,经过跟leader沟通,了解到这一点,此方案是架构师在架构过程当中必需要考虑到的.

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

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

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

图一(来源于网络)

把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就能够并发请求了

方案二:简单粗暴的压缩方案

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

图二

方案三:图片懒加载

像淘宝或者京东这样的APP页面上有不少图片,当咱们滑到下一屏时下一屏的图片才会加载,这就采用了图片懒加载的方式.

图片懒加载,简单来讲就是在页面渲染过程当中,图片不会一次性所有加载,会在须要的时候加载,好比当滚动条滚动到某一个位置时触发事件加载图片,以下代码:

经过js将img标签的data-src属性赋值给src属性

方案四:css Sprites

当网站或者APP有大量小icon,若是上传到图片服务器好比CDN, 要加载全部这些小icon将增长大量请求,而CDN是按流量收费的,这无疑将增长不少成本.

CSS Sprites 技术早已不新鲜,就是将这些小icon合并成一张图片,只须要加载一次,每次经过background-position来控制显示icon,这样就能够节约大量请求,节约成本.

此方案是将网站上的一些小logo拼合成一个大图,如图

图三(图片来源于网络)

不过这也有必定的缺点:在长期开发多人合做的项目中,会很差维护这些sprites,每次对icon作修改,都得相应的改动css里background-position的值,至关繁琐.

方案五:将图片压缩成base64格式来节约请求

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

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

图四

针对decode base64编码的图片比较慢的问题,咱们能够选择使用canvas来加速.当向canvas发出绘画命令时,浏览器直接将指令发到图形加速器而不须要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形.所以,咱们可使用canvas来渲染base64编码后的图片

具体代码以下: (代码出处: http://www.jianshu.com/p/ea7c0ee8aa64)