[轉]15年雙11手淘前端技術巡演 - H5性能最佳實踐

[原文地址】:https://github.com/amfe/article/issues/21css

前言

2015年是全面『無線化』的一年,在BAT(財報)幾家公司都已經超過50%的流量來自移動端,此次 雙11更是佔到了68.67%無線交易 (天貓微博)。html

手淘中大量的業務採用H5的方式開發,H5體驗好壞全面影響着手淘的使用體驗。前端

今年手機淘寶在技術上重點解決「頓」,「卡」,「慢」的問題,並提出了「521法則」 ,具體指:java

  • App內存節省50%
  • 繪製幀率,滑動體驗提高20%
  • App全鏈路實現 1S 法則
    • 強網(4G/Wifi)實現1S首屏(包括圖片)加載
    • 3G 1S首包返回
    • 2G 1S建連,而且實現高複用 從底層到前端

其中1S加載完成是H5頁面須要解決的重點問題,也是難點。android

下面給你們介紹咱們1年多來解決了些什麼樣的問題,以及帶來多少性能的提高。如下每一條都是手淘在無線領域得到的寶貴經驗。ios

系統&網絡環境(手淘2015)

首先給你們介紹一下目前手淘的環境狀況(供你們在設備兼容方面參考)。git

操做系統

操做系統方面iOS佔比42.23%,Android 佔比52.38%,阿里雲OS 佔比5.29%,Windows Phone 佔比 0.1%。github

_679173aceca648b6a1bfe37c038f00b9

iOS版本 & Android版本

iOS 系統版本佔比狀況:web

  • iOS 9 49%
  • iOS 8 38%
  • iOS 7 11%

Android 系統版本對比iOS 碎片化較爲嚴重,所幸4.0如下版本佔比小於10%。chrome

佔好比下:

  • 4.4.4版本30%
  • 4.4.2版本16%
  • 4.3版本11%
  • 4.2.2版本10%
  • 5.0版本以上10%

Banners_and_Alerts_____numbers_5f551394f00e41759c4e026c3eb0763a

網絡狀況

網絡狀況方面,得力於近年的3G/4G推廣已經佔35%,2G網絡佔比15%左右。

PastedGraphic_2_2a17a5229dc441a59c1391a5dbaabbbb

運營商

運營商方面 中國移動佔據70%的用戶,中國聯通18.12%,中國電信11.69%。其中須要注意的是移動3G技術(TD-SCDMA)性能差設備支持少,移動4G容易在信號不理想的地段降級成2G。

PastedGraphic_3_0a5b0e4fa03a49eebe9f2c863af34f01

收集性能數據&創建衡量標準

淘系H5頁面主要在手淘客戶端中展示,爲了瞭解H5頁面在客戶端中的性能表現,咱們在WebView容器中作了大量性能數據的採集,以頁面,數據接口,單個靜態資源爲維度採集。

H5頁面:咱們以WebView的DidFinishLoad事件觸發做爲完成加載(Fully Loaded)的時間。

同時對支持performance.timing的設備收集Timing數據,用於詳細分析網絡請求各階段的性能消耗狀況。

WebViewDidFinishLoad 官方解釋:Sent after a web view finishes loading a frame. Android iOS

1年前H5性能情況

針對幾個主要的業務,咱們將收集到的用戶性能數據整理後獲得如下的結果(部分業務按傳統的網頁性能優化方法優化過)。

DraggedImage_25982e5b7f4046efb0f580fc4bd1b005_d2e2135e89d743a8bb3804c208e11a04

性能狀況很是不理想,不達標嚴重。2G下大於10s的佔比在50%, 3G:6s內的低於70%近一半。

傳統優化

看到上面的性能狀況,咱們最早想到的優化方法就是PC時代YAHOO 23條web性能優化軍規

首先看看咱們平常業務的請求瀑布圖是怎麼樣的,根據這些狀況看那些能夠用規則去優化。

DraggedImage_5e36ed7656a7425d8afabd305bba01dc

請求數優化

  • 在請求數控制方面,將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瀏覽器網絡中沒法看到這些請求):

DraggedImage_4cf266d1fccb4833928f5f6d263c7f86

這樣形成了極大的網絡帶寬的消耗,這些icon資源每每在界面渲染中佔據重要位置。
目前咱們移動端只加載ttf一個字體文件,對於較小的文件也能夠考慮base64在css文件中。

首屏多個動態接口合併請求

平常的業務中,一個頁面每每拆分出多個異步數據接口(後端開發說:解耦),甚至首屏也須要3-5個接口(如動態banner區塊,推薦內容,商品列表等),有些還有嵌套關係。
可是這些對頁面性能形成不小的影響。

DraggedImage_70cd539eaa23481cb41eac9efd680c9a

手淘中某個接口在各網絡下的請求性能,2G,3G下平均的消耗時間在2-6s完成下載。其中幾個請求性能稍差點對整個頁面影響也深遠。

_15_11_17_12_04_02dfa888dec3495891b9e5c6fc4eaac5

禁止重定向

在咱們CaseByCase的分析中發現,頁面&靜態資源的重定向會形成巨大的性能損耗。
特別使用前端JS腳原本實現頁面跳轉的。

_3_f60e75b7fefc46ed8d9123fdfa94c2a4

圖片優化

手淘的特色就是圖片多,圖片的性能好壞可不只僅影響用戶體驗哦,還直接影響着交易,錢 錢 錢…
咱們在圖片方面作了大量的優化。

使用WebP格式。

手淘2年前已經開始使用WebP格式了(主要native使用),1年前H5全面使用,其中iOS 的webview中由手淘以插件的方式支持。咱們以手淘線上真實案例來看使用webp格式的先後效果。
案例爲:線上的一個活動頁面,打開一看其中的banner 就320多KB,整個頁面加載457KB,若是就單單banner圖片換成webp格式,整個頁面的大小就只有181KB。

使用WebP前

DraggedImage_c2d16e1273bf429aac2118123c477d02

使用WebP後

DraggedImage_914eb83c506e4e25bed4bcacbe1c546c

Banner部分對比

DraggedImage_e2a8298a99a44233ab64738a69541eba

這種業務類型的案例,咱們改進一下就能夠爲用戶,爲公司省70%的流量費用。

商品圖片優化

商品圖片在手淘的各個產品中都是必不可少的,爲了適應不一樣業務需求的須要,咱們在CDN服務上生成各個尺寸和質量的圖片(近100個規格)。

  • q值:根據手淘網絡狀況,加載不一樣質量的商品圖片(q30,q50,q75,q90)
  • 銳化:根據須要調整圖片銳化值
  • DPI:根據設備DPI取適當尺寸商品圖片
  • 合理的使用CDN圖片尺寸能夠帶來下載圖片的性能提高,還能夠減小沒必要要的內存消耗。 咱們平常中會用到的尺寸,每浪費10像素的寬高均可以形成很大的內存資源浪費。

計算方式以下:

DraggedImage_37ea251e09c44f1dbe24f3b689068cb8

圖片DPI 優化

根據設備DPI值和圖片質量Q值作優化,達到最優視覺體驗和加載性能(DPI高,寬高增長後可適當下降質量)。

DraggedImage_6b19fe95e2294949bc5c9c2a85cdd12a

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.

DraggedImage_d15b37a3f44a453188bbcedcdd9d9f0b

禁止生成大圖且利用率少

因爲圖片在瀏覽器中的解碼方式,合理的生成緊湊的Sprite圖片,便可以帶來更少的請求數,又高性能低消耗。

DraggedImage_2fd69d286e5f4ef18caaa3bc908604f1

建議合併成以下:

DraggedImage_dc8095e9f7514aa8a92252c0445b5434

不建議合併成以下:

DraggedImage_1a20c971cf054438bd64dd0043896383

結合Native優化

通過幾輪的常規前端性能優化後,頁面性能有進步,可是離目標還遠遠不夠。咱們也不斷的問本身到到底那裏慢,那裏瓶頸最大。咱們開始試着CaseByCase的分析頁以及梳理H5在手淘中的全鏈路性能消耗。

最終作了一些和native結合的優化思路。

HTTPDNS

DNS解析想必你們都知道,在傳統PC時代DNS Lookup基本在幾十ms內。而咱們經過大量的數據採集和真實網絡抓包分析(存在DNS解析的請求),DNS的消耗至關可觀,2G網絡大量5-10s,3G網絡平均也要3-5s。

案例:iPhone5s 聯通3G

78783DE2_043F_47C4_947D_2F368A44CD77_4a2da76568a345308af786a15338f704

DraggedImage_116eabb710e9451bac870de5c9140126

針對這種狀況,手淘開發了一套httpdns,httpdns是面向無線端的域名解析服務,與傳統走UDP協議的DNS不一樣,httpdns基於HTTP協議。 基於HTTP的域名解析,減小域名解析部分的時間並解決DNS劫持的問題。

手淘httpdns服務在啓動的時候就會對白名單的域名進行域名解析,返回對應服務的最近ip(各運營商),端口號,協議類型,心跳 等信息。

優勢

  • 防止域名劫持

傳統DNS由Local DNS解析域名,不一樣運營商的Local DNS有不一樣的策略,某些Local DNS可能會劫持特定的域名。採用httpdns可以繞過Local DNS,避免被劫持;另外,httpdns的解析結果包含HMAC校驗,也可以防止解析結果被中間網絡設備竄改。

  • 更精準的調度

對域名解析而言,尤爲是CDN域名,解析獲得的IP應該更靠近客戶端的地區和運營商,這樣纔能有更快的網絡訪問速度。然而,因爲運營商策略的多樣性,其推送的Local DNS可能和客戶端不在同一個地區,這時獲得的解析結果可能不是最優的。httpdns可以獲得客戶端的出口網關IP,從而可以更準確地判斷客戶端的地區和運營商,獲得更精準的解析結果。

  • 更小的解析延遲和波動

在2G/3G這種移動網絡下,DNS解析的延遲和波動都比較大。就單次解析請求而言,httpdns不會比傳統的DNS更快,但經過httpdns客戶端SDK的配合,整體而言,可以顯著下降解析延遲和波動。httpdns客戶端SDK有幾個特性:預解析、多域名解析、TTL緩存和異步請求。

  • 額外的域名相關信息

傳統DNS的解析結果只有ip,httpdns的解析結果採用JSON格式,除了ip外,還支持其它域名相關的信息,好比端口、spdy協議等。利用這些額外的信息,APP能夠啓用或中止某個功能,甚至利用httpdns來作灰度發佈,經過httpdns控制灰度的比例。

SSL+SPDY協議

在通過以上的優化方案後,H5頁面的性能始終離目標還遠。在移動端建連的消耗很是大,在業界也只有SPDY 這個玩意兒比較新穎。
理論上SPDY協議能夠完成多路複用的加密全雙工通道,顯著提高非wifi環境下的網絡體驗。

DraggedImage_2e08b076724a427a9cf91d6f8ab1146b

  • 多路複用請求優化
  • 服務器推送技術
  • SPDY壓縮http頭

看着很牛逼的技術,可是等咱們第一期上線後發現,從數據上幾乎察覺不了變化。

域名收斂

域名收斂是指儘可能控制一個頁面中使用的域名數量。爲何要這麼作呢?咱們前面提到DNS解析,減小域名數量能夠下降DNS解析的成本。上文還提到SPDY協議,其中一個特性就是複用請求,使用同一個域名能夠更多的複用請求。這個PC時代正好相反,咱們原先用多個域名提高併發請求量已提高性能。
PC時代的域名數量相似這樣的

DraggedImage_fa4838181dc843978eada2f101ed3cd8

域名最終形態(建議)

  • 頁面請求 域名一個
  • 靜態資源(css,js) 一個
  • 圖片資源 一個
  • 動態數據一個
  • 數據統計一個

最終結合SSL+SPDY+域名收斂 才發揮出真正的做用。下圖是各網絡下SSL 和 非SSL 的性能狀況。

Uploading 魔兔_-_無線統一監控平臺 2.jpg…

動態數據複用狀態

動態數據部分,相信各個公司都差很少,動態數據會有專門的API提供出來。手淘(mtop平臺)也同樣,接口總會有各類狀態,登陸失效,令牌過時,簽名失效等。手淘使用了重發請求的方式來獲取新的簽名令牌等。致使以下的狀況(始料未及):
在手淘真實環境中發現一次令牌過時,能夠形成10多秒的延遲。

DraggedImage_360111fd7f19443990115e75c5b4c071

手淘在啓動的時候Native已經作了不少的數據請求,這些也是mtop請求,只是由native程序發出。 咱們判斷到頁面是在手淘客戶端中就會使用native發出mtop數據請求,這樣就規避了令牌失效,簽名失效的問題。

直本次優化後,咱們第一次看到了很是激動人心的數據:第一次里程碑式的提高

優化前

_1_593a69d6043a4ad3a5143051e27ead2e

優化後

_2_313ab932ffc0413f9889c21925f12693

預加載和離線化方案

手淘中加載H5頁面的首屏白屏時間較長,基於此,集團各BU都內部產生了離線包的方案(手淘,航旅,錢包),將靜態資源經過Hybrid的方式提早加載到本地。大量了資源預加載給H5頁面帶來了極大的提高,資源加載時間降到30ms內。
今年雙11前,針對預加載方案,在技術上解決了3個痛點

  • 開發成本(開發方式侵入性強)
  • 靜態資源解Combo
  • 更新到達率

關於 預加載&離線化方案詳細技術細節不少,這裏先簡單闡述這個功能帶來的性能提高價值。

下圖案例:

  • 第一個HTML沒有預加載,阻塞頁面時間較長
  • 靜態資源部分幾ms 級別加載,加載性能很是好

lALOAmbUQ80D7M0HgA_1920_1004_40fe7ff23e10467e9f1cf3c02c0498bf

這是第二次里程碑式的提高,3G,4G,WIFI網絡性能全面提高。

截至到這個時間點爲止,咱們個別業務的性能有了顯著的提高。如下是其中一個業務的3個性能優化節點的性能優化對比。其中10s以上加載完成的佔比大大的縮小,1s之內的佔比上升較高。

DraggedImage_4a5daf7dd5cc485d9ce6c44ef83226db

統計方案優化

業務數據統計在平常工做中是必不可少的部分,因統計部份量級不大,每每會忽視掉。其中咱們對一個業務CaseByCase的分析後發現。一箇中國移動 2G/3G.Edge的用戶在請求H5頁面的時候 log.mmstat.com 的日誌埋點花了近6s才加載完成。

514E1116_9ECE_4768_8BE8_C2F502D661A0_af89dc8bee8f47708c3881c573124ed2

DraggedImage_68e0466f8b59416f8a7a29f3fb0f6524

後面咱們對數據統計部分作了Native的異步上傳。效果是這樣滴:

iOS:

_15_11_17_03_09_f470e9f4998a4a5c86918a92d5525ff7

Android:

_15_11_17_03_10_94376eb235b64ed2974650f4738d8cc4

第三次里程碑式的提高,2G網絡性能全面提高

渲染優化

  • 禁止使用iframe (阻塞父文檔onload事件)
  • 禁止使用GIF圖片實現Loading 效果 (下降CPU消耗,提高渲染性能)視頻

業務效果

前面說了這麼多性能優化,確定會有問,花了這麼多力氣,前端到客戶端到後端搞了這麼多,價值在那裏呢。業界google,amazon,microsoft都給過速度性能對業務對GMV的影響。
下面是兩個手淘中的業務在持續幾個月的性能優化後UV,跳失率,停留時間的變化。

DraggedImage_fdb5687616a24cf092473c43f6401678

DraggedImage_9acd1efea6424102bb78fb1d1e9b2fec

2015 雙11 戰績

好了,說了這麼多此次雙11搞的怎麼樣呢?

2015_11_H5__numbers_414306f6efe84b3bbde412781cede368

2015_11_H5__numbers

在無線時代,H5頁面中的任意一個微小的點都會應網絡問題被放大N倍。持續分析用戶真實數據和CaseByCase的分析不一樣業務場景,才能真正找到性能瓶頸。

H5要達到極致的體驗,須要你們跳出前端的圈子,從客戶端,後端 一塊兒的角度來共同協助發揮各自的優點才能真正作到極致的體驗。後面有更多精彩等這你們。

相關文章
相關標籤/搜索