本编文章是介绍图片优化系列的最后一章，主要是介绍在用户端出图性能方面的优化工作。
图片体积
在保障图片质量的前提，缩减图片等体积无疑是为用户浏览图片提速。
图片EXIF信息
图片EXIF信息可以附加于JPEG、TIFF、RIFF等文件之中，为其增加有关数码相机拍摄信息的内容和索引图或图像处理软件的版本信息。大家可以“度娘“一下，exif信息还是记录不少东西。但对于非摄影类图片服务，该信息不是必须东西，所以，建议去掉。
imagemagick 命令为：convert +profile '*' [src]{file}.{ext} -quality 80 -resize '280x140^>' -gravity Center -crop 280x140+0+0 +repage [out]{file}_280x140.{ext}
+/-profile * 去掉/添加图片exif信息。
色彩通道采样因子
图片的色彩存在不同的采样因子，4:1:1,1:1:1，不同的采样因子图片的体积相差会有35%体积大小的差别，但在用户或比较专业用户肉眼观察，是看不来什么差别，所以，对应用户上传的1:1:1色彩采样因子进行调整，能减少图片35%的体积。
imagemagick 命令为：convert dstFile -quality 90 -sampling-factor 2x2 -gravity Center -crop destSize+0+0 +repage -background white -compose Copy -gravity center -extent dstFile
-sampling-factor选项设置JPEG、MPEG和YUV编码器进行色度通道采样时的采样因子。
CDN
CDN的全称是Content Delivery Network，即内容分发网络。CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。同时，利用cdn的缓存功能，减低源站的流量压力；另一方面也可以利用cdn实现抵抗ddos攻击、避免源站外漏等安全问题。
传统cdn服务商：网宿、蓝汛、帝联等。
云cdn厂商：阿里云cdn、腾讯云cdn等。云大厂的cdn就服务不怎么的，什么时候都得工单，耗时太长。
安全厂家的cdn：知道创宇等。
自建CDN：要达到理想cdn效果，成本、人力耗费巨大。
域名散列
域名散列大家可以认为同一个图片服务建立多个域名给网友进行访问。
如下图
为什么会同一个服务进行使用多个域名呢？主要来自于浏览器的并发限制。浏览器的并发请求数目限制是针对同一域名。就是同一时间针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞。图片多路径请求就能加速显示用户首屏。
但要注意一些使用的坑。
坑1：域名不是越多越好。
坑2：移动端（手机用户）应该减少该用法。因为域名解析时间在移动端移动网络下是比较慢，经过观察，用户使用手机移动网络浏览http资源，域名解析的时间大概会占整个请求的30%左右耗时。
长链接
链接的建立是非常耗时，所以，我们要考虑减少用户与服务器建立连接的次数，让用户重用链接。长链接就是能帮我们达到这个效果。什么是长链接？ HTTP1.1规定了默认保持长连接（HTTP persistent connection ，也有翻译为持久连接），数据传输完成了保持TCP连接不断开（不发RST包、不四次握手），等待在同域名下继续用这个通道传输数据；相反的就是短连接。
TCP的keep alive是检查当前TCP连接是否活着；HTTP的Keep-alive是要让一个TCP连接活久点。它们是不同层次的概念。TCP keep alive的表现：当一个连接“一段时间”没有数据通讯时，一方会发出一个心跳包（Keep Alive包），如果对方有回包则表明当前连接有效，继续监控。这个“一段时间”可以设置。
看看具体例子：
Keep-Alive: timeout=20，表示这个TCP通道可以保持20秒。这个timeout时间有时候不用返回；服务端可能主动发起四次握手断开TCP连接，客户端能够知道该TCP连接已经无效；另外TCP还有心跳包来检测当前连接是否还活着，方法很多，避免浪费资源。
URL哈希
服务端中引入缓存，很大程度上能提升出图速度，但要注意用户访问的链点需要做url hash，让同一个url落到同一个缓存中。
常用的hash算法为：除余 、 一致性hash（consistenthashing）
坑：hash会带一个坏处，当某台机器挂掉后，hash算法会重算，导致部分缓存的实效，从而导致后端压力大。
客户端缓存
让用户端缓存资源，合理使用maxage 和 expires。
关于图片浏览的优化，暂时告一段落，欢迎大家指出错误。
更多文章信订阅请关注，微号：轻量运维
阅读(1135) | 评论(0) | 转发(0) |
