iresty v2.4

一、分析

1. Chrome Network面板显示HTTP请求有20条左右;
2. bg.jpg背景图片加载为23.85s左右, 参考解决方案3；
3. 其他头像的图片都是在 40K 左右,并且都是png, 参考解决方案2；
4. 外部资源大概有660KB

二、解决方案

1. 减少http请求：
   • 尽量把js和css内联到HTML，用gulp-inlinesource来实现；
   • CSS精灵: 在该项目中还是有点问题，故不采用；
   • 使用Base64 (编码BASE64)：小的图片使用Base64,尝试用了二维码的Base64，感觉加载速度上并没有太多地变化；
   • 图片置灰 使用CSS将图片转换成黑白
2. 压缩：
   • JavaScript/CSS压缩：用gulp-inlinesource；
   • 图片压缩：PNG jpg webp，用了gulp的图片压缩gulp-imagemin插件，可以使得saved 283.96KB - 66.4% 压缩率达到了 66.4%，之前的图片大小为417KB，一共有10张图片，然后压缩之后变成了之后140KB；
   • 参考资料和工具：
     • 智图工具
     • 图片格式那点事儿
3. 不要用CSS3代码去高斯模糊图片，图片还是那么大，兼容性又不好 所以对首页背景图片的，我们采用PS处理高斯模糊图片，从180K 变成了 57K;

三、结果

1. 外部资源(主要是图片) 660KB左右 → 417KB → 140KB

2. 加载速度 23.83s → 14.00s左右 → 5.99s

3. HTTP 请求 20 → 13 → 11

四、长知识

1. 尽量少用绝对定位，top/bottom/left/right;
2. 你发现一个bug，最后也是会被其他发现的;
3. 没用框架或者库，你才知道原来你多么需要一个库来帮你解决兼容性问题;