移動性能優化

移動頁面，包括pc頁面，優化主要包括兩個方面：

　　加載

　  運行

優化在移動端顯得尤其重要，主要在於移動端網絡不給力，一般狀況下，cpu也比較低

下面分別說這兩個大方向

先說加載，加載的優化又包括兩個

　　　　減小加載的數量，

　　　　減少每一個加載內容都大小

減小加載的數量：也就是咱們常說的減小請求數量 

　　　　按需加載

　　　　　　好處是減小首屏時間，固然大量後加載當東西也會引發大量頁面重繪，影響渲染性能

　　　　　　（lazylod， 滾屏加載， Media Query）

　　　　預加載

　　　　　　

　　　　1 減小重定向

　　　　　　不少網站會根據http的user－agent判斷是否移動設備，而後發空body和重定向301/302等，直接返回移動端頁面更好。

　　　　　　最好是直接返回移動的頁面，固然，有時候和pc頁面在不一樣服務器上，有的網站重定向請求時候加上cookie來告訴應用是移動設備

　　　　2 減小圖片請求

　　　　　　使用css3代替圖片（圓形，圓角，下拉三角等等）

　　　　　　合併小圖片等

　　　　3 避免圖片的src屬性爲空，這樣會從新加載固然頁面，影響速度和效率(能夠直接不設置）

             "img src=''引起的問題"

　　　　　　這樣的語句，會致使當前網頁被從新載入一次。尤爲是對於 php/ asp/ aspx 類型的後臺腳本，會致使程序被連續執行兩次

　　　　　　若是該訪問該網頁的URL 還帶有參數，那麼第一次調用有參數，第二次調用沒有參數。

　　　　　　在img 對象的src 屬性是空字符串("")的時候，瀏覽器認爲這是一個缺省值，值的內容爲當前網頁的路徑。瀏覽器會用當前路徑進行再一次載入，並把其內容做爲圖像的二進制內容並試圖顯示。

　　　　　　src=""在不一樣瀏覽器解析不一樣,有的會從新請求當前頁面(一個新的請求，不帶ETAG等緩存)，有可能使用session失效。有的則會解釋成"/",就去訪問默認頁面，而默認頁面有在有驗證服務器上不少時候設成login頁面而且清空session.

　　　　4 緩存ajax的數據

　　　　5 通用css和js能夠放在外聯文件，供多個頁面重用。 

　　　　6 用HTML5緩存(cache manifest and client-side databases)來替代傳統緩存，還有新客戶端數據庫技術indexedDB

 　　　　　　關於manifest　關於manifest

　　　　　　manifest版本更新問題

　　　　　　　　更新manifest文件   經過javascript操做   清除瀏覽器緩存

　　　　　　　　給manifest添加或刪除文件，均可更新緩存，

　　　　　　　　若是咱們更改了js，而沒有新增或刪除，前面例子中註釋中的版本號，能夠很好的用來更新manifest文件。

　　　　　　　　html5中引入了js操做離線緩存的方法，下面的js能夠手動更新本地緩存。

　　　　　　　　　　　　window.applicationCache.update();

　　　　　　　　若是用戶清除了瀏覽器緩存（手動或用其餘一些工具）都會從新下載文件。

　　　　　　manifest緩存了頁面自己

　　　　　　　　 一旦頁面指定了manifest，那麼這個頁面就必定被儲存下來。若是有一個動態頁面，沒有辦法只緩存頁面所引用的css,js,img，不緩存頁面的內容

　　　　　　　　第一次訪問page.html?id=1，緩存成功後。再訪問 page.html?id=2，不會去讀緩存，這是由於因爲參數變了，被認爲地址不同，不算是第二次請求，因此請求page.html?id=2時依然會從新加載manifest指定的文件。不過若是不是參數而是hash，#id=2,則認爲是同一個頁面

　　　　　　　　manifest極不適合含有動態參數頁面跳轉的狀況下使用

　　　　

　　　　7 使用HTML5服務端發送事件

 

　　　　　　Web應用已經使用了各類從服務器上輪詢資源的方法來持續地更新頁面。HTML5的EventSource對象和Server-Sent事件能經過 瀏覽器端的JavaScript代碼打開一個服務端鏈接客戶端的單向通道。服務端可使用這個寫通道來發送數據，這樣能節省了HTTP建立多個輪詢請求的 消耗。這種方式比HTML的WebSocket更高效。WebSocket的使用場景是，當有許多客戶端和服務端的交互的時候（好比消息或者遊戲），在全 雙工鏈接上創建一個雙向通道。

 

　　　　　　若是你的網站當前是使用其餘的Ajax或者Comet技術來輪詢的，轉變成Server-Sent 事件須要重構網站的Javascript代碼。

 

　　　　8 WebSokects（目前只有iOS4.2+支持 ）websockects

　　　　　　

減小加載內容大小

　　1 壓縮， 服務器開啓gzip壓縮

　　2 值爲0的時候不須要寫單位

　　3 localstorage代替cookie，能夠減小每次請求時發送的額外cookie。對於json形式的字符串， JSON.stringify() and JSON.parse() 來輔助存儲

 　  4 圖片優化

　　　　1） 使用智圖優化圖片，服務器能夠直接圖片優化

　　　　2）合適的格式 (1. webP優於JPG 2. PNG8優於GIF)

　　　　3） srcsetsrcset響應式圖片

再看運行

減小重排重繪

　　1 border未none，不寫0，

　　　　border:0; 瀏覽器對border-width/border-color進行了渲染，佔用了內存。

　　　　border:none瀏覽器解析「none」時將不做出渲染動做，即不會消耗內存。

　　2 移除空css規則

　　　　增長css文件大小，影響css樹　　

　　3 正確使用display

　　　　display影響頁面渲染 可參考csslint

　　　　　　display:inline後不該該再使用width、height、margin、padding以及float

　　　　　　display:inline-block後不該該再使用float

　　　　　　display:block後不該該再使用vertical-align

　　　　　　display:table-*後不該該再使用margin或者float

　　4 避免屢次重設圖片大小

　　　　感受實際工做中改動圖片大小不可避免，只能是減小沒必要要的改動，減小重繪

　　5 減小dom節點

　　　　dom節點多，尤爲又有深度，會影響頁面渲染，儘可能減小

減小性能開銷

　　1 儘可能使用事件代理，避免批量綁定事件 

　　　　以前是delegate實現， 如今用on實現，zepto爲on； 也能夠本身寫事件代理

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, [selector], data, handler );

$("table").delegate("td","click",function(){...});
$("table").on("td", "p", function(){...});

　　2 DataURL的使用，注意使用場景

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QLQRXhpZgAASUkqAEoCAAAs/>
//利用base64編碼把圖片數據翻譯成標準ASCII字符。
//Data URL是在本地直接繪製圖片，節省HTTP鏈接，　　
//Base64編碼的圖片會比二進制格式的圖片體積大1/3，同時又沒有使用圖片的壓縮算法，文件會變大，而且要解碼後再渲染，會加劇客戶端的CPU和內存負擔
//Data URL形式的圖片不會被瀏覽器緩存

 

　　適用於小圖片。這樣避免發送一次請求，只爲了得到比較少的數據

　　另外，這個若是是css背景中使用，也是能夠緩存的。直接緩存在css文件中　

　　在線轉換工具

.striped_box
  {
  width: 100px;
  height: 100px;
  background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7");
  border: 1px solid gray;
  padding: 10px;
  }
<div class="striped_box">
這是一個有條紋的方塊
</div>

 

　　3 GPU加速

　　　　瀏覽器利用顯卡的計算能力，實現提速和釋放CPU

　　　　css中如下屬性會觸發GPU渲染，合理使用，由於過多使用引起耗電量增長

　　　　　　CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video　　

　　4 高頻事件優化

　　　　touchmove 和 scroll致使屢次渲染

　　　　增長響應變化等時間間隔，減小重繪次數

　　　　使用requestAnimationFrame監聽幀變化，在正確的時間渲染　（這個替代了setTimeout方法）

　　5 動畫優化

　　　　儘可能使用css3，適當食用canvas（ios8能夠食用webGL,這個是什麼怎麼用，之後有時間再研究下)

　　　　css3動畫只用－webkit和無前綴兩種

　　　　-webkit, -moz, -ms

　　　　有一些瀏覽器動畫事件可使用了，兼容性待定

　　　　webkitAnimationEnd事件與webkitTransitionEndwebkitAnimationEnd事件與webkitTransitionEnd

　　6 避免高級選擇符

　　　　耗時長且不易讀懂

　　7 webworker

　　　　Android 2.0+，ios5+

　　　　Web Workers不能進入到頁面的DOM，也不能改變頁面上的任何東西。

　　　　Web Worker很適合大量計算的工做，基本沒用到

    8  服務端經過檢測請求中的User-Agent頭或者其餘的嵌入到請求中的信息能讓你的應用檢測到網絡情況 ？ how？

　 9 viewport屬性，（以前看過一篇棒棒嗒文章，下次有空分享出來）