传统优化

看到上面的性能情况，我们最先想到的优化方法就是PC时代[YAHOO 23条web性能优化军规](https://developer.yahoo.com/performance/rules.html)。 首先看看我们日常业务的请求瀑布图是怎么样的，根据这些情况看那些可以用规则去优化。 [](https://camo.githubusercontent.com/38b2ce05ded16a21c8c9c7ace26a112abfa7bbe2/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f303066633730656463306235363565323039643737353163386339386465653762626638313939322e6a706567) ## 请求数优化 * 在请求数控制方面，将js，css各用combo的方式合并成单个资源。 * 页面图片等等，只加载首屏资源，提升首屏展示速度。 * 使用CSS ,SVG,ICONFONT 替换UI图片 ###合理使用IconFont iconfont对于前端来说有很多优点：自由变化大小 矢量不失真、自由修改颜色、可以添加一些视觉效果如 阴影、旋转、透明度、兼容IE6。 #### 使用现状 目前大家都基本上从平台上生成，生成后的文件如下： ~~~ @font-face { font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } ~~~ 这样直接引用在项目中，真实在手机上的网络请求如下（在桌面版Chrome浏览器网络中无法看到这些请求）： [](https://camo.githubusercontent.com/5269554dc9272a9429d8d52f9a01eeffd25f21c2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f336466313261383037316231653165613239643265383335366366373265313731633163313662342e6a706567) 这样造成了极大的网络带宽的消耗，这些icon资源往往在界面渲染中占据重要位置。 目前我们移动端只加载ttf一个字体文件，对于较小的文件也可以考虑base64在css文件中。 ## 首屏多个动态接口合并请求 日常的业务中，一个页面往往拆分出多个异步数据接口（后端开发说：解耦），甚至首屏也需要3-5个接口（如动态banner区块，推荐内容，商品列表等），有些还有嵌套关系。 但是这些对页面性能造成不小的影响。 [](https://camo.githubusercontent.com/9658d6a7095d8590b769d710af9321156320ba36/687474703a2f2f696d67332e746263646e2e636e2f4c312f3436312f312f633462643964613037303337306535386164623266333761613239333033613733383732613833642e706e67) 手淘中某个接口在各网络下的请求性能，2G，3G下平均的消耗时间在2-6s完成下载。其中几个请求性能稍差点对整个页面影响也深远。 [](https://camo.githubusercontent.com/a1ed19b207ea7d88ba52397739efb502d9339cc9/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f356265613036613730373662646165316664623438613837613361636338363264313436613430632e6a706567) ## 禁止重定向 在我们CaseByCase的分析中发现，页面&静态资源的重定向会造成巨大的性能损耗。 特别使用前端JS脚本来实现页面跳转的。 [](https://camo.githubusercontent.com/0b8120c90258a3ab297965deb461b0f77c746a9c/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f613761353564393863343834646230313064336536323363353061373465643131393164656230312e6a706567) ## 图片优化 手淘的特点就是图片多，图片的性能好坏可不仅仅影响用户体验哦，还直接影响着交易，`钱 钱 钱…` 我们在图片方面做了大量的优化。 ### 使用WebP格式。 手淘2年前已经开始使用WebP格式了（主要native使用），1年前H5全面使用，其中iOS 的webview中由手淘以插件的方式支持。我们以手淘线上真实案例来看使用webp格式的前后效果。 案例为：线上的一个活动页面,打开一看其中的banner 就320多KB，整个页面加载457KB，如果就单单banner图片换成webp格式，整个页面的大小就只有181KB。 `使用WebP前` [](https://camo.githubusercontent.com/940927fbd9840fd7ec86f8b8440da64e4d4820cd/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f393035396161616533313263336335346336323666666632653164333632636338656238306566622e6a706567) `使用WebP后` [](https://camo.githubusercontent.com/46d88778219c58653e6c4fddc0d224145c0dfa97/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f646336346430396137643339353631383434376562313630623539316262356238623432306239342e6a706567) `Banner部分对比` [](https://camo.githubusercontent.com/49a4087b18d988b12ebf49f9ead763b63273388f/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f336436663834313432346539336237653662333665323162363936366433363936386163393931362e6a706567) 这种业务类型的案例，我们改进一下就可以为用户，为公司`省70%`的流量费用。 ### 商品图片优化 商品图片在手淘的各个产品中都是必不可少的，为了适应不同业务需求的需要，我们在CDN服务上生成各个尺寸和质量的图片（近100个规格）。 * q值：根据手淘网络情况，加载不同质量的商品图片（q30,q50,q75,q90） * 锐化：根据需要调整图片锐化值 * DPI：根据设备DPI取适当尺寸商品图片 * 合理的使用CDN图片尺寸可以带来下载图片的性能提升，还可以减少不必要的内存消耗。 我们日常中会用到的尺寸，每浪费10像素的宽高都可以造成很大的内存资源浪费。 计算方式如下： [](https://camo.githubusercontent.com/3037213feb6cc823633e92e32d10230bb8fd7b7d/687474703a2f2f696d67342e746263646e2e636e2f4c312f3436312f312f303130623765383534333062613130633264386538363836633562653330626338633664653861612e706e67) ###图片DPI 优化 根据设备DPI值和图片质量Q值做优化，达到最优视觉体验和加载性能（DPI高，宽高增加后可适当降低质量）。 [](https://camo.githubusercontent.com/f11fc6c3407c23180c099064584c5e3e6abfb2f5/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636162633238373035323461323138383536383331336236393866386336333538396466363866652e6a706567) ### Sprite图片 Sprite图片（又称：雪碧图）被运用在众多使用了很多小图标的网站上。相对于把每张小图标以单个文件的形式引用到页面上，Sprite图片会只要请求一张图片就够了，减少了请求数提升了加载性能，还有就是方便图标管理。但在移动互联网时代在使用Sprite图片需要合理利用，不然反对性能造成影响。 #### 解码内存消耗 Decoded in memory的计算公式： w x h x 4（宽 x 高 x 每个像素4个字节） 如果设备DPI大于1，还需要 X DPI系数。如Retina设备X 4，RetinaHD设备X 9. [](https://camo.githubusercontent.com/f159e698f35c4260a63c8fc46c9418528849fb24/687474703a2f2f696d67322e746263646e2e636e2f4c312f3436312f312f383034303933653563636561333633356464373265313934393433633837623630373734333764322e706e67) #### 禁止生成大图且利用率少 由于图片在浏览器中的解码方式，合理的生成紧凑的Sprite图片，即可以带来更少的请求数，又高性能低消耗。 [](https://camo.githubusercontent.com/67f7b7429a4ef4244d072f0a9ab0f0f28ed0a1d2/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f626532646133616539633161396436626264323734373065366233303238663634386561333436382e706e67) #### 建议合并成如下： [](https://camo.githubusercontent.com/a7c5f8477662d4a48d39c6b5627873a2618165d9/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f636565653536393234393934373563316139326433333639323336383761663961663066383133342e6a706567) #### 不建议合并成如下： [](https://camo.githubusercontent.com/b09c8bf51c17d4a7a28758e06da4f3638e608d03/687474703a2f2f696d67312e746263646e2e636e2f4c312f3436312f312f343036363831316166323439376632623264313333353635623065646331336232353731356633352e6a706567)