看到上面的性能情況，我們最先想到的優化方法就是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)