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