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