時(shí)間:2016-02-16 19:02:16
我們?cè)谥暗奈恼轮幸灿胁簧傥恼绿峒耙苿?dòng)端頁(yè)面優(yōu)化的問(wèn)題，但大多淺顯不夠深入。
在移動(dòng)頁(yè)面變得越來(lái)越酷炫的年代，文件越來(lái)越大，和運(yùn)行速度越來(lái)越低的情況不可避免，而加載速度低會(huì)造成不良影響，具統(tǒng)計(jì)：
71%的用戶期望移動(dòng)頁(yè)面跟PC頁(yè)面一樣快，74%的用戶能容忍的響應(yīng)時(shí)間為5秒，所以我們必須保證移動(dòng)端頁(yè)面有足夠的速度。
移動(dòng)頁(yè)面的速度跟三個(gè)因素有關(guān)，分別是：移動(dòng)網(wǎng)絡(luò)帶寬速度，設(shè)備性能（CPU，GPU，瀏覽器），頁(yè)面本身。
移動(dòng)頁(yè)面優(yōu)化目標(biāo)
首先，我們要知道，一個(gè)頁(yè)面從開始到呈現(xiàn)必須經(jīng)歷的過(guò)程，一共四個(gè)過(guò)程，如下圖：
?類似這種用戶能明顯感知的，我把它稱為顯性加載，互動(dòng)頁(yè)面都建議加上這種加載方式，它一方面能增加頁(yè)面的趣味性，另一方面能讓后續(xù)頁(yè)面體驗(yàn)更流暢。
這種在加載張圖片的時(shí)候已經(jīng)預(yù)先加載了第二張圖片，從而使得頁(yè)面體驗(yàn)更流暢的方式，我把它稱為隱性加載，這種方式的好處是節(jié)省流量之余又能使得體驗(yàn)增強(qiáng)。
?按需加載是不可或缺的優(yōu)化手段，主要有以下兩種方式：
?對(duì)于這種方式，在首屏加載的時(shí)候把首屏的內(nèi)容加載盡量，而位于首屏之外的元素都只在出現(xiàn)在首屏?xí)r才加載，很大程度地節(jié)省了流量，提升了加載時(shí)間。
這種叫響應(yīng)式加載方式，意思是利用JS 或者CSS 判斷分辨率，從而選擇不同尺寸的圖片進(jìn)行引入，這種的好處顯而易見，同樣可以加快加載速度和節(jié)省流量。
2、使用jpegtran進(jìn)行無(wú)損壓縮
這是一個(gè)同一網(wǎng)速下的測(cè)試結(jié)果，重定向之所以會(huì)比較慢，是因?yàn)樗貜?fù)了域名查找，tcp鏈接，發(fā)送請(qǐng)求。
DataUri在移動(dòng)端并不如它在pc端吃香，因?yàn)椋?/span>
經(jīng)測(cè)試，DataURI要比簡(jiǎn)單的外鏈資源慢6倍，生成的代碼文件相對(duì)圖片文件體積沒有減少反而增大，而且瀏覽器在對(duì)這種base64解碼過(guò)程中需要消耗內(nèi)存和cpu，這個(gè)在移動(dòng)端壞處特別明顯。
在移動(dòng)端請(qǐng)適當(dāng)使用touchstart，touchend，touch等事件代替延遲比較大的Click 事件。Click之所以慢是因?yàn)閙ousedown導(dǎo)致的：
3、瀏覽器可對(duì)動(dòng)畫做優(yōu)化
b）適當(dāng)使用canvas動(dòng)畫
通過(guò)對(duì)CSS 3動(dòng)畫和Canvas 動(dòng)畫對(duì)比：
c）合理使用RAF（requestAnimationFrame）
1、能解決腳本問(wèn)題引起的丟幀，卡頓問(wèn)題
通過(guò)RAF動(dòng)畫與settimeout動(dòng)畫對(duì)比：
類似touchmove，scroll這類的事件可導(dǎo)致多次渲染，對(duì)于這種事件可以通過(guò)以下手段進(jìn)行優(yōu)化：
1、使用requestAnimationFrame監(jiān)聽?zhēng)兓沟迷谡_的時(shí)間進(jìn)行渲染
2、增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)。
，針對(duì)合成/繪制只提一個(gè)優(yōu)化手段：
使用GPU加速前有對(duì)比實(shí)驗(yàn)：
GPU加速實(shí)際上是大幅減少了合成/繪制時(shí)間，從而大大地提高了頁(yè)面速度，但GPU加速有自己的缺點(diǎn)：
過(guò)多的GPU層會(huì)帶來(lái)性能開銷，主要原因是使用GPU加速其實(shí)是利用了GPU層的緩存，讓渲染資源可以重復(fù)使用，所以一旦層多了，緩存增大，會(huì)引起別的性能問(wèn)題。
推薦閱讀
400-685-0732(7x24小時(shí))
關(guān)注文軍
