概述

1. PC優化手段(duan)在Mobile側同樣適用

2. 在Mobile側我們提出三秒種渲染完成首屏(ping)指(zhi)標

3. 基(ji)于第二點，首屏加載3秒完(wan)成(cheng)或使用(yong)Loading

4. 基于聯(lian)通3G網絡平均338KB/s(2.71Mb/s)，所以首屏(ping)資源不(bu)應(ying)超過1014KB

5. Mobile側因手機配置原因，除加載外(wai)渲(xuan)染速度也是(shi)優化重點

6. 基(ji)于第五點，要合(he)理處理代碼減(jian)少渲染損(sun)耗

7. 基(ji)于(yu)第(di)二、第(di)五點，所有影響首屏加載和渲染的代碼應(ying)在(zai)處理邏輯(ji)中后置

8. 加(jia)載完(wan)成(cheng)后用戶(hu)交互使用時也需注(zhu)意性能

HTML5優化指南

[加載優化]

加載過(guo)(guo)程(cheng)(cheng)是最為耗時的(de)過(guo)(guo)程(cheng)(cheng)，可能會占到總耗時的(de)80%時間(jian)，因此是優(you)化的(de)重點(dian)

· 減少HTTP請求

因為手機瀏覽器同時響(xiang)應請求(qiu)為4個請求(qiu)(Android支持4個，iOS 5后可支持6個)，所以要盡量減少頁面(mian)的(de)請求(qiu)數，首次加載同時請求(qiu)數不能超過4個

a) 合并CSS、JavaScript

b) 合(he)并小圖(tu)片(pian)，使用雪碧圖(tu)

· 緩存

使用(yong)緩(huan)存可(ke)以(yi)減少(shao)向(xiang)服(fu)務器的請求數，節(jie)省加載(zai)時間，所(suo)以(yi)所(suo)有靜態(tai)資源(yuan)都要在服(fu)務器端設置(zhi)緩(huan)存，并且盡量使用(yong)長Cache(長Cache資源(yuan)的更新可(ke)使用(yong)時間戳)

a) 緩(huan)存一切可緩(huan)存的資(zi)源

b) 使(shi)用長(chang)Cache(使(shi)用時間戳更新Cache)

c) 使用外(wai)聯式引用CSS、JavaScript

· 壓縮HTML、CSS、JavaScript

減少資源大小可(ke)以(yi)加快網頁(ye)顯(xian)示(shi)速度，所以(yi)要(yao)對HTML、CSS、JavaScript等進行代碼壓縮，并在服(fu)務器(qi)端設(she)置GZip

a) 壓縮(例如，多余的空格、換行符和縮進)

b) 啟(qi)用GZip

· 無阻塞

寫(xie)在HTML頭部的JavaScript(無異步)，和(he)寫(xie)在HTML標簽(qian)中的Style會阻(zu)塞頁(ye)面(mian)(mian)的渲染，因此CSS放在頁(ye)面(mian)(mian)頭部并使用Link方式引(yin)入，避免在HTML標簽(qian)中寫(xie)Style，JavaScript放在頁(ye)面(mian)(mian)尾

部或使用(yong)異步方式(shi)加載

· 使用首屏加載

首屏(ping)的(de)快速(su)(su)(su)顯示，可以大(da)(da)大(da)(da)提升(sheng)用戶對頁面(mian)速(su)(su)(su)度的(de)感知，因此(ci)應盡量針對首屏(ping)的(de)快速(su)(su)(su)顯示做優化

· 按需加載

將(jiang)不影(ying)響首屏的(de)資(zi)源(yuan)和當前屏幕(mu)資(zi)源(yuan)不用的(de)資(zi)源(yuan)放到用戶需(xu)要(yao)時才加載，可以大大提升重要(yao)資(zi)源(yuan)的(de)顯示(shi)速度和降低(di)總體(ti)流量(liang)。PS：按需(xu)加載(zai)會導致大量重繪，影響渲染性能

a) LazyLoad

b) 滾(gun)屏(ping)加載

c) 通(tong)過(guo)Media Query加(jia)載

· 預加載

大型(xing)重資源(yuan)頁(ye)面(如游戲)可使用增加Loading的方法(fa)，資源(yuan)加載完成后再(zai)顯示頁(ye)面。但Loading時(shi)間過(guo)長(chang)，會造成用戶流失，對用戶行(xing)為分析，可以(yi)在當前頁(ye)加載下一頁(ye)資(zi)源(yuan)，提升(sheng)速(su)度

a) 可(ke)感知Loading(如進入(ru)空間游戲的Loading)

b) 不(bu)可感知的Loading(如提前加載下一(yi)頁)

· 壓縮圖片

圖片是最占流量的(de)資源，因此盡量避免使用(yong)(yong)(yong)他，使用(yong)(yong)(yong)時(shi)選擇最合(he)適(shi)的(de)格式(實現需求(qiu)的(de)前提(ti)下，以(yi)大(da)小判斷(duan))，合(he)適(shi)的(de)大(da)小，然后使用(yong)(yong)(yong)智圖壓縮，同時(shi)在代(dai)碼中(zhong)用(yong)(yong)(yong)Srcset來按需顯示。PS：過度(du)壓縮圖片大小影響圖片顯示效果

a) 使用智圖或CDN加速

b) 使用其它(ta)方式(shi)代(dai)替圖(tu)片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)

c) 使用Srcset

d) 選擇合(he)適的圖片(1. webP優(you)于JPG 2. PNG8優(you)于GIF)

e) 選擇合適(shi)的大小(1. 首(shou)次加(jia)載不大于(yu)1014KB 2. 不寬(kuan)于(yu)640(基于(yu)手機屏幕一(yi)般(ban)寬(kuan)度))

· 減少CookieCookie

會影響加載速度(du)，所以靜態資源(yuan)域名不使用Cookie

· 避免重定向

重定向(xiang)(xiang)會(hui)影(ying)響加載速度(du)，所(suo)以在服務器(qi)正(zheng)確(que)設置(zhi)避免重定向(xiang)(xiang)

· 異步加載第三方資源

第三(san)方資(zi)源不可控會影響頁面的(de)加(jia)載(zai)和顯示，因此要異步(bu)加(jia)載(zai)第三(san)方資(zi)源

[腳本執行優化]

腳本處理不(bu)當(dang)會阻塞頁面加(jia)載、渲染(ran)，因此在使用(yong)時需當(dang)注意

· CSS寫在頭部，JavaScript寫在尾部或異步

· 避免圖片和(he)iFrame等的空Src

空Src會(hui)重(zhong)新加載當前頁面(mian)，影(ying)響(xiang)速度和效率

· 盡量避(bi)免重設圖片大小

重(zhong)設(she)圖(tu)片大(da)(da)小是指在頁(ye)面(mian)、CSS、JavaScript等中多次(ci)重(zhong)置圖(tu)片大(da)(da)小，多次(ci)重(zhong)設(she)圖(tu)片大(da)(da)小會引發(fa)圖(tu)片的多次(ci)重(zhong)繪，影(ying)響性能

· 圖(tu)片盡量避(bi)免使用DataURL

DataURL圖(tu)片沒有使用圖(tu)片的壓(ya)縮(suo)算法文件會變大，并且要解碼后再渲染，加(jia)載慢耗時(shi)長

[CSS優化]

· 盡量避免寫(xie)在(zai)HTML標(biao)簽中寫(xie)Style屬性

· 避免(mian)CSS表達式

CSS表達式的執行需跳(tiao)出CSS樹的渲(xuan)染，因此請(qing)避免CSS表達式

· 移除空(kong)的CSS規則

空的(de)(de)CSS規(gui)則增(zeng)加了CSS文件的(de)(de)大小，且影(ying)響CSS樹的(de)(de)執行，所以需移除空的(de)(de)CSS規(gui)則

· 正(zheng)確使(shi)用Display的屬性

Display屬性會影響(xiang)頁面(mian)的渲染(ran)，因此(ci)請合理使用(yong)

a) display:inline后不應該再(zai)使用width、height、margin、padding以及float

b) display:inline-block后不應(ying)該再使用float

c) display:block后不應該再使用vertical-align

d) display:table-*后不(bu)應該再使用margin或者float

· 不濫(lan)用(yong)Float

Float在(zai)渲染時計算量(liang)(liang)比(bi)較大，盡量(liang)(liang)減(jian)少使用

· 不濫用Web字體(ti)

Web字體需要下載(zai)，解析(xi)，重繪當前頁面(mian)，盡量減(jian)少使用

· 不聲明(ming)過(guo)多的Font-size

過(guo)多的Font-size引(yin)發CSS樹的效率

· 值為(wei)0時不需(xu)要任(ren)何單(dan)位

為(wei)了瀏覽器的兼容性(xing)和性(xing)能，值為(wei)0時不要帶單位

· 標準化各(ge)種瀏(liu)覽器前綴

a) 無前綴(zhui)應放在最(zui)后

b) CSS動畫只用 (-webkit- 無(wu)前綴)兩種即可

c) 其它(ta)前(qian)綴(zhui)為(wei) -webkit- -moz- -ms- 無前(qian)綴(zhui) 四種，(-o-Opera瀏覽器(qi)改用blink內(nei)核，所以淘汰)

· 避免(mian)讓(rang)選擇符看起來像正則表(biao)達式

高(gao)級(ji)選(xuan)擇器執(zhi)行耗時(shi)長且(qie)不易讀懂，避(bi)免(mian)使用

[JavaScript執行優化]

· 減(jian)少重繪和(he)回流

a) 避免不必要的Dom操(cao)作

b) 盡量改變Class而不是Style，使用classList代替className

c) 避免使用document.write

d) 減少drawImage

· 緩(huan)存Dom選擇與計算(suan)

每次Dom選擇都(dou)要計(ji)算，緩存他

· 緩存(cun)列表(biao).length

每次.length都要計算，用一個(ge)變量保存這(zhe)個(ge)值

· 盡(jin)量使(shi)用事(shi)件代理(li)，避免批(pi)量綁定事(shi)件

· 盡(jin)量使用ID選擇器

ID選擇器是最快的

· TOUCH事(shi)件優化(hua)

使用touchstart、touchend代替(ti)click，因快(kuai)影響速(su)度快(kuai)。但應注意Touch響應過快(kuai)，易(yi)引發誤操作

[渲染優化]

· HTML使用Viewport

Viewport可(ke)以(yi)加速(su)頁面的渲染，請使用以(yi)下代碼

· 減少Dom節點

Dom節(jie)點太多(duo)影響頁面的渲染，應盡(jin)量(liang)減少Dom節(jie)點

· 動畫優化(hua)

a) 盡(jin)量(liang)使用CSS3動畫

b) 合理(li)使用requestAnimationFrame動畫代替setTimeout

c) 適當使(shi)用(yong)Canvas動畫(hua) 5個元(yuan)素以內使(shi)用(yong)css動畫(hua)，5個以上使(shi)用(yong)Canvas動畫(hua)(iOS8可(ke)使(shi)用(yong)webGL)

· 高頻事件優化

Touchmove、Scroll 事件可(ke)導(dao)致多次渲染

a) 使用requestAnimationFrame監聽幀變化，使得在正(zheng)確的時間(jian)進行渲染(ran)

b) 增加響(xiang)應變(bian)化(hua)的時間(jian)間(jian)隔，減少重繪(hui)次數

· GPU加速

CSS中以下屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)來觸發GPU渲染，請合理使用。PS：過渡使用會(hui)引發手機過耗(hao)電增加(jia)