前端不止，优化不息
作为一名前端er，其实一直我对自己的定位就是服务员，为用户提供好的服务（上菜快）和产品（好吃）。
产品这一块需要和PM一起努力，但是服务这一块我们可以根据自身的能力做到更好。
谈到前端优化，图片资源是重中之重。时至今日，页面中单纯显示文字的用户体验是不敢相信的糟糕场景，就拿float一开始设计的目的来说，也是为了满足图文混排的需求。但是图片的出现也让网页越来越胖，服务器每次都运输很重的东西，最终致使网页变慢。
开端
这个月刚刚完成了公司今年第二个项目的开发工作，新项目一开始的时候并没有直接参与编码，就是和项目组商讨一些技术栈选型和模块设计的方案制定。
主要的工作就是上一个项目的维护与优化，这一部分内容比较多，但是不得不说图片资源的优化是最立竿见影的优化手段，一方面能够快速将图片呈现到用户眼前，另一方面也能够有效减轻业务服务器的压力。
行业大佬们怎么做？
上图中可看到淘宝主页在chrome浏览器下在使用webp进行深度优化，有关于webp的优点可以自行搜索。
之前关于前端工程化的文章也指出了通过webpack对图像资源进行打包or压缩，第一个项目中对图片资源处理的手段是对于小于10KB的图像编译为base64展示，所以主要处理的是资源较大的图片。处理目录暂时如下：
- base64
- 压缩
- IDC+CDN
- 分布式存储
现就个人在项目中使用的优化手段进行剖析，让你的网站更快一步。
一、base64
1 | { |
webpack中通过url-loader将图像转为base64。
使用base64优化的原理是将图像转码为base64编码，这样就可以直接内嵌到HTML文件中，从而避免http请求，达到优化效果。
我们也可以通过在线工具手动将图片转为base64，这样做之后图片的src标签如下：1
2
3<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==">
注意src值需添加前缀 'data:image/png;base64,'。
tips：
内联图像无法缓存，所以建议针对小图标等文件进行转码，较大的图像采取其它手段优化。
在webpack中配置后，在引用图片时只能使用相对地址，不然会被忽略。
二、图像压缩
图像压缩的目的是在保证图片质量的情况下尽可能减小图片的存储大小，上面也提到了webp，不过webp目前只能在chrome下识别，可以先了解，关于webp的可以参见 这篇文章
这里推荐一个图片在线压缩的网站 Tinypng
使用方法不赘述，以本篇文章使用的图片为例，我们直接看压缩效果：
经过压缩后从400K减至129K，压缩比例达到67%！
三、利用IDC+CDN加速
IDC 网络数据中心
像现在我购物的jd，我选择它的原因就是因为他能够做到自营商品211限时达。
IDC是基础设施，也就是通过搭建多个服务器来为用户提供服务。匹配jd的在全国各地的商品仓库，通过这种物理方式来实现各地区网络平等。
我们平时的个人网站也可以通过国内的图床网站进行图像资源分布。
CDN 内容分发网络
CDN可以看做最优路径选择，通过逻辑手段，选择最合适的网络链路来实现网络优化。
CDN可看做快递分配，当我在成都下单后，jd服务器看到我的收货地址在成都高新区，则可以直接让郫都区的仓库发货，让快递员直奔高新区，同时避开拥堵道路（拥堵节点）。
这样两步之后，就能有效减少传输时间，毕竟成都下单成都发货比成都下单上海发货，从距离上看也能知道孰快孰慢。网络和现实的道路其实也是相同的，网络的建立也是依托于一个个物理设备，所以减少了物理传输距离也就等于减少了网络传输距离。
置顶文章也提到了，本站是通过GitPage进行搭建的，资源都是放在美利坚，所以请求资源会比较慢，可以看看使用国内图床前一篇文章的加载速度：
资源放在美利坚
资源放国内图床
可以看到页面加载时间从2.90s优化到了1.59s，当然我这里只用了一篇博文来举例，但管中窥豹可见图像资源优化带来的效果很明显。
四、分布存储
先上图，下面是淘宝首页做的分布存储：
可看到域名有了变化，且都不是www.taoboa.com域下的资源
浏览器对每个网站是有最大连接数的限制的，这么做的原因是由于 TCP 协议的限制，PC端只有65536个端口可用以向外部发出连接，所以浏览器为了保护PC资源不被全部占用，会对请求进行限制。
如之前chrome v4设置的同一domain下最大连接数为6,意味着页面发送10个请求出去后，会有4个请求被堵塞，等到前面的请求完成后才能正常发送。
如此之后，就有了分布式存储的用武之地，随着现在网路速度的提高，我们也不能只是墨守成规的遵守浏览器的规则，毕竟UE至上。
了解到浏览器限制的规则是针对同一domain后，分布式的目的就是将资源存储到不同的服务器上，比如图像资源在“img.xx.com”，影音资源在“v.xx.com”，或者图片资源分类后存储到不同的服务器上。
这样就能突破浏览器的最大并发连接数限制，从而加快网页内容的载入。