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