概述
PC優化(huà)手段在Mobile側同樣适用(yòng)
在Mobile側我們提出三秒種渲染完成首屏指标
基于第二點，首屏加載3秒完成或使用(yòng)Loading
基于聯通(tōng)3G網絡平均338KB/s(2.71Mb/s)，所以首屏資源不應超過1014KB
Mobile側因手機配置原因，除加載外渲染速度也(yě)是優化(huà)重點
基于第五點，要合理(lǐ)處理(lǐ)代碼減少渲染損耗
基于第二、第五點，所有影(yǐng)響首屏加載和(hé)渲染的(de)代碼應在處理(lǐ)邏輯中後置
加載完成後用(yòng)戶交互使用(yòng)時(shí)也(yě)需注意性能
[加載優化(huà)]
加載過程是最爲耗時(shí)的(de)過程，可(kě)能會占到總耗時(shí)的(de)80%時(shí)間，因此是優化(huà)的(de)重點
減少HTTP請求
因爲手機浏覽器同時(shí)響應請求爲4個(gè)請求(Android支持4個(gè)，iOS 5後可(kě)支持6個(gè))，所以要盡量減少頁面的(de)請求數，首次加載同時(shí)請求數不能超過4個(gè)。
a)合并CSS、JavaScript
b)合并小圖片，使用(yòng)雪(xuě)碧圖
緩存
使用(yòng)緩存可(kě)以減少向服務器的(de)請求數，節省加載時(shí)間，所以所有靜态資源都要在服務器端設置緩存，并且盡量使用(yòng)長(cháng)Cache(長(cháng)Cache資源的(de)更新可(kě)使用(yòng)時(shí)間戳)
a) 緩存一切可(kě)緩存的(de)資源
b) 使用(yòng)長(cháng)Cache(使用(yòng)時(shí)間戳更新Cache)
c) 使用(yòng)外聯式引用(yòng)CSS、JavaScript
壓縮HTML、CSS、JavaScript
減少資源大(dà)小可(kě)以加快(kuài)網頁顯示速度，所以要對(duì)HTML、CSS、JavaScript等進行代碼壓縮，并在服務器端設置GZip。
a) 壓縮(例如，多(duō)餘的(de)空格、換行符和(hé)縮進)
b) 啓用(yòng)GZip
無阻塞
寫在HTML頭部的(de)JavaScript(無異步)，和(hé)寫在HTML标簽中的(de)Style會阻塞頁面的(de)渲染，因此CSS放在頁面頭部并使用(yòng)Link方式引入，避免在HTML标簽中寫Style，JavaScript放在頁面尾部或使用(yòng)異步方式加載。
使用(yòng)首屏加載
首屏的(de)快(kuài)速顯示，可(kě)以大(dà)大(dà)提升用(yòng)戶對(duì)頁面速度的(de)感知，因此應盡量針對(duì)首屏的(de)快(kuài)速顯示做(zuò)優化(huà)。
按需加載
将不影(yǐng)響首屏的(de)資源和(hé)當前屏幕資源不用(yòng)的(de)資源放到用(yòng)戶需要時(shí)才加載，可(kě)以大(dà)大(dà)提升重要資源的(de)顯示速度和(hé)降低總體流量。
PS：按需加載會導緻大(dà)量重繪，影(yǐng)響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通(tōng)過Media Query加載
預加載
大(dà)型重資源頁面(如遊戲)可(kě)使用(yòng)增加Loading的(de)方法，資源加載完成後再顯示頁面。但Loading時(shí)間過長(cháng)，會造成用(yòng)戶流失。
對(duì)用(yòng)戶行爲分(fēn)析，可(kě)以在當前頁加載下(xià)一頁資源，提升速度。
a) 可(kě)感知Loading(如進入空間遊戲的(de)Loading)
b) 不可(kě)感知的(de)Loading(如提前加載下(xià)一頁)
壓縮圖片
圖片是最占流量的(de)資源，因此盡量避免使用(yòng)他(tā)，使用(yòng)時(shí)選擇最合适的(de)格式(實現需求的(de)前提下(xià)，以大(dà)小判斷)，合适的(de)大(dà)小，然後使用(yòng)智圖壓縮，同時(shí)在代碼中用(yòng)Srcset來(lái)按需顯示。
PS：過度壓縮圖片大(dà)小影(yǐng)響圖片顯示效果
a) 使用(yòng)智圖( http://zhitu.tencent.com/ )
b) 使用(yòng)其它方式代替圖片(1. 使用(yòng)CSS3 2. 使用(yòng)SVG 3. 使用(yòng)IconFont)
c) 使用(yòng)Srcset
d) 選擇合适的(de)圖片(1. webP優于JPG 2. PNG8優于GIF)
e) 選擇合适的(de)大(dà)小(1. 首次加載不大(dà)于1014KB 2. 不寬于640(基于手機屏幕一般寬度))
延伸閱讀：《濃縮的(de)精華!從零開始帶你認識最新的(de)圖片格式WebP》
減少Cookie
Cookie會影(yǐng)響加載速度，所以靜态資源域名不使用(yòng)Cookie。
避免重定向
重定向會影(yǐng)響加載速度，所以在服務器正确設置避免重定向。
異步加載第三方資源
第三方資源不可(kě)控會影(yǐng)響頁面的(de)加載和(hé)顯示，因此要異步加載第三方資源。
[腳本執行優化(huà)]
腳本處理(lǐ)不當會阻塞頁面加載、渲染，因此在使用(yòng)時(shí)需當注意：
CSS寫在頭部，JavaScript寫在尾部或異步。
避免圖片和(hé)iFrame等的(de)空Src，空Src會重新加載當前頁面，影(yǐng)響速度和(hé)效率。
盡量避免重設圖片大(dà)小。
重設圖片大(dà)小是指在頁面、CSS、JavaScript等中多(duō)次重置圖片大(dà)小，多(duō)次重設圖片大(dà)小會引發圖片的(de)多(duō)次重繪，影(yǐng)響性能。
圖片盡量避免使用(yòng)DataURL，DataURL圖片沒有使用(yòng)圖片的(de)壓縮算(suàn)法文件會變大(dà)，并且要解碼後再渲染，加載慢(màn)耗時(shí)長(cháng)
[CSS優化(huà)]
盡量避免寫在HTML标簽中寫Style屬性
避免CSS表達式
CSS表達式的(de)執行需跳出CSS樹的(de)渲染，因此請避免CSS表達式。
移除空的(de)CSS規則
空的(de)CSS規則增加了(le)CSS文件的(de)大(dà)小，且影(yǐng)響CSS樹的(de)執行，所以需移除空的(de)CSS規則。
正确使用(yòng)Display的(de)屬性
Display屬性會影(yǐng)響頁面的(de)渲染，因此請合理(lǐ)使用(yòng)。
a) display:inline後不應該再使用(yòng)width、height、margin、padding以及float
b) display:inline-block後不應該再使用(yòng)float
c) display:block後不應該再使用(yòng)vertical-align
d) display:table-*後不應該再使用(yòng)margin或者float
不濫用(yòng)Float
Float在渲染時(shí)計算(suàn)量比較大(dà)，盡量減少使用(yòng)。
不濫用(yòng)Web字體
Web字體需要下(xià)載，解析，重繪當前頁面，盡量減少使用(yòng)。
不聲明(míng)過多(duō)的(de)Font-size
過多(duō)的(de)Font-size引發CSS樹的(de)效率。
值爲0時(shí)不需要任何單位
爲了(le)浏覽器的(de)兼容性和(hé)性能，值爲0時(shí)不要帶單位。
标準化(huà)各種浏覽器前綴
a) 無前綴應放在最後
b) CSS動畫(huà)隻用(yòng) (-webkit- 無前綴)兩種即可(kě)
c) 其它前綴爲 -webkit- -moz- -ms- 無前綴 四種，(-o-Opera浏覽器改用(yòng)blink内核，所以淘汰)
避免讓選擇符看起來(lái)像正則表達式
高(gāo)級選擇器執行耗時(shí)長(cháng)且不易讀懂(dǒng)，避免使用(yòng)。
[JavaScript執行優化(huà)]
減少重繪和(hé)回流
a) 避免不必要的(de)Dom操作
b) 盡量改變Class而不是Style，使用(yòng)classList代替className
c) 避免使用(yòng)document.write
d) 減少drawImage
緩存Dom選擇與計算(suàn)
每次Dom選擇都要計算(suàn)，緩存他(tā)。
緩存列表.length
每次.length都要計算(suàn)，用(yòng)一個(gè)變量保存這(zhè)個(gè)值
盡量使用(yòng)事件代理(lǐ)，避免批量綁定事件
盡量使用(yòng)ID選擇器，ID選擇器是最快(kuài)的(de)。
TOUCH事件優化(huà)
使用(yòng)touchstart、touchend代替click，因快(kuài)影(yǐng)響速度快(kuài)。但應注意Touch響應過快(kuài)，易引發誤操作
[渲染優化(huà)]
HTML使用(yòng)Viewport
Viewport可(kě)以加速頁面的(de)渲染，請使用(yòng)以下(xià)代碼：
減少Dom節點
Dom節點太多(duō)影(yǐng)響頁面的(de)渲染，應盡量減少Dom節點
動畫(huà)優化(huà)
a) 盡量使用(yòng)CSS3動畫(huà)
b) 合理(lǐ)使用(yòng)requestAnimationFrame動畫(huà)代替setTimeout
c) 适當使用(yòng)Canvas動畫(huà) 5個(gè)元素以内使用(yòng)css動畫(huà)，5個(gè)以上使用(yòng)Canvas動畫(huà)(iOS8可(kě)使用(yòng)webGL)
高(gāo)頻(pín)事件優化(huà)
Touchmove、Scroll 事件可(kě)導緻多(duō)次渲染
a) 使用(yòng)requestAnimationFrame監聽(tīng)幀變化(huà)，使得(de)在正确的(de)時(shí)間進行渲染
b) 增加響應變化(huà)的(de)時(shí)間間隔，減少重繪次數
GPU加速
CSS中以下(xià)屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)來(lái)觸發GPU渲染，請合理(lǐ)使用(yòng)。
手機關注大(dà)連網龍科技
