http相關：
有統計證明：乙個網頁最終到達終端使用者有80%的時間都是在js，css，，***，flash等資源的http請求。另一方面，http請求的數量也是有限制的，瀏覽器對同乙個網域名稱有連線數限制，不同瀏覽器核心、不同版本的請求數不盡相同，大部分的併發請求數是6個。
看來通過夠控制http請求的數量，減少http請求時間，達到減少網頁載入和呈現的時間，能帶來更好的使用者體驗。
優化方案：
（1）雪碧圖：即css sprite，也稱css精靈，是一種css影象合併技術，該方法是將小圖示和背景影象合併到一張上，然後利用css的背景定位來顯示需要顯示的部分。
如圖有16個icon，每一次取都需要乙個http請求，如果通過css雪碧圖將16個資源合併，再通過background-image和backgorund-position定位出雪碧圖中的小區域，那麼只需要乙個http請求就可以獲得全部。
（2）地圖：是一種小圖合併大圖的正規化，和雪碧圖相似，區別僅在實現原理上有不同，雪碧圖僅僅是通過css的方式來呈現的某個區域性，而地圖是從html**的方式來控制顯示區域。
（3）js&css合併：將多個小的js、css合併成乙個大的js、css檔案，間接達到減少http請求的目的。
壓縮方法：在http請求中設定所接受到壓縮方式，在server端對response資源進行壓縮再傳給瀏覽器。一般使用gzip設定content-encoding欄位。
壓縮物件：從http請求返回資源中的html，js，css，xml等都可以設定壓縮，值得注意的是我們不需要對**等資源設定壓縮，因為這些資源本身已經壓縮過了，再次壓縮收益並不高，而且增加cpu負擔。js，css我們通常通過去掉空格和回車來壓縮，再經過gzip壓縮，能達到良好的壓縮效果。
通常來說，元件壓縮是一種增加cpu壓縮解壓縮時間來減少網路傳輸消耗的辦法，並且通常網路資源較cpu資源更緊張，所以對合適的物件設定壓縮能個取得良好的收益。
格式：顯示效果較好的格式中，有webp、jpg和png24/32這幾種常見的格式。一般來說，webp的最小，但在ios或者android4.0以下的系統中可能會有相容性問題需要解決。
尺寸：這獲取尺寸時候應該考慮具體的展示場景，如當前移動裝置中常用個尺寸規格為480×800、600×1024、720×1280，800×1280等，從原圖來保證能夠被呈現，而不是通過**對放大或縮小。
壓縮：對於jpg，png格式來說本身就已經經過了壓縮，這對於稀缺的頻寬資源是不夠的，我們還需要更加優化的壓縮演算法，通過一系列的壓縮工具如tinypng, smush.it可以得到更好的壓縮且質量不變。
首先舉乙個例子，相信大家在使用jquery時注意到有兩個檔案jquery-1.4.2.js和 jquery-1.4.2.min.js，這裡的min.js就是js方式的壓縮結果。具體壓縮方法如下：
/*cc的壓縮示例***/function echo(stringa,stringb)/*cc的壓縮示例***/
第一步：「精簡」，去掉js檔案中的而空格和換行符和注釋等資訊，使得js**變得緊湊而不失其語義。如：
function echo(stringa,stringb);
第二步：」混淆」，將方法名和變數名用更簡短的方式來表達，如變數可以用乙個字元來表示。如：
function echo(c,b);
優點：從js&css檔案的源頭進行壓縮，縮小了http傳輸過程資料大小。
缺點：通過兩步壓縮後，再來閱讀js&css原始碼是非常苦難的。並且經過壓縮的**可能和另乙個壓縮的**因變數被共用而引起語法錯誤。
最後，經過壓縮過的指令碼檔案使用務器端設定gzip壓縮算來壓縮，能夠壓使檔案縮得更加的淋漓盡致。
為一種減少http請求的方式，如下有兩種方式設定快取，測試時注意常用資源是否請求資源時否設定快取：
cache-control
「no-cache」指示請求或響應訊息不能快取（http/1.0用pragma的no-cache替換）
「no-store」用於防止重要的資訊被無意的發布。在請求訊息中傳送將使得請求和響應訊息都不使用快取。根據快取超時
「max-age」指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。
「max-stale」指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出超時期指定值之內的響應訊息。
「min-fresh」 「=」 delta-seconds指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
expires表示存在時間，允許客戶端在這個時間之前不去檢查（發請求），等同max-age的效果。但是如果同時存在，則被cache-control的max-age覆蓋。
設定方式：通過http的meta設定expires和cache-control
每乙個http請求都有乙個相對於的返回狀態標誌當次請求是否如期完成，如：
1xx：請求收到，這些狀態**表示臨時的響應。
2xx：操作成功，這類狀態**表明伺服器成功地接受了客戶端請求。
3xx：重定向，客戶端瀏覽器必須採取更多操作來實現請求。
4xx：客戶端錯誤，發生錯誤，客戶端似乎有問題。
5xx：伺服器錯誤，伺服器由於遇到錯誤而不能完成該請求。
所以，如果有http請求返回為非200的狀態碼，我們認為這一次請求時無意義的，占用了稀缺的網路資源，所應該避免非200的返回狀態碼。
時間相關：
如上通過 webpagetest 檢視分析發現，白屏時間和最後乙個資源解析完成時間相同，因為瀏覽器只有載入並解析完頭部資源才會真正渲染頁面，也印證了上面首屏時間採集的原理。
上述各種時間指標應根據當前h5的具體情況，選擇合適的測試指標。
webview相關：
記憶體：載入頁面前後記憶體變化，可間接反映h5中資源數量和大小，如dom數量，大小。
cpu：當頁面中資源樣式複雜，強調視覺效果時，測試員可觀察cpu佔用率來反映h5繪製質量。如果cpu長期處於高佔用率，可考慮降低高計算量的視覺效果等手段。
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...
H5 前端效能測試實踐
如下圖所示，是精選平台開啟 h5 頁面的幾個過程截圖。1 載入網路請求 這個過程主要是 webview 拿到 h5 頁面 url 之後，呼叫 loadurl 方法，開始去網路上請求第乙個資源檔案。這個階段主要包含 dns 解析 建立網路鏈結 資料傳輸的耗時。2 html 解析 webview 拿到 ...
H5前端基礎 布局
浮動 使用float來設定元素浮動 可選值 none 預設值，不浮動，元素在文件流中 left 元素向左浮動 right 元素向右浮動 特點 1.元素浮動以後會完全脫離文件流 2.浮動以後元素會一直向父元素的最上方移動 3.直到遇到父元素的邊框或者其他的浮動元素，會停止移動 4.如果浮動元素的上邊是...