前端性能优化之路——图片篇。

本人是一名前端开发者，在公司负责目前负责信息流服务，为五大手机厂商和各大App提供服务，每天的请求就是以亿计算，加上我们又做了SSP和DSP，就是类似于百度广告联盟，腾讯广点通这种。接触过的应该知道，所以前端优化一直是我头痛的问题，不仅要注重用户体验，同时要兼顾收益，有时候必须牺牲一些用户体验，但是作为一名有思想的前端，还是努力规避掉，希望能和从事相同业务的同学一起学习交流一下，话不多说，就来分享我的性能优化之路，有什么不对的知识点，麻烦大家指出批评。

• 先附上基本的yahoo军规——yahoo前端性能团队总结的35条黄金定律
  

yahoo军规把大部分的前端优化都提到了，而在js优化这一块如果有兴趣的额，推荐大家去看《高性能javascript》,书里讲的非常详细。https://segmentfault.com/a/1190000008481413

• web前端优化之图片优化

Media Queries 调用高清背景图

国内手机发展迅速，用 retina显示屏的越来越多，假如现在有一张图片，有两部手机，一部是普通显示屏，一部是高清显示屏，在同样大小的屏幕上，高清显示屏中的位图会被放大，图片会变得模糊。

通过 devicePixelRatio的值，就可以区分普通显示屏和高清屏，当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏，当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。这时候我们可以让UI准备2套图片，甚至是3套图片，不同像素的图利用媒体查询结合 devicePixelRatio 可以区分普通显示屏和高清显示屏，并给出了如下CSS设计方案：

.css{
   /* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */