隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，我們必須更加關(guān)注移動(dòng)網(wǎng)頁(yè)的性能優(yōu)化。讓我在今天談?wù)勥@個(gè)問(wèn)題。首先，為什么要移動(dòng)頁(yè)面進(jìn)行優(yōu)化？

看看移動(dòng)網(wǎng)絡(luò)的現(xiàn)狀：

移動(dòng)頁(yè)面布局越來(lái)越復(fù)雜，效果越來(lái)越眩目，直接導(dǎo)致文件越來(lái)越大，下載和運(yùn)行速度越來(lái)越低，低速會(huì)造成不良影響，據(jù)統(tǒng)計(jì)：

71％的用戶希望移動(dòng)頁(yè)面與PC頁(yè)面一樣快，74％的用戶可以容忍5秒的響應(yīng)時(shí)間，因此我們必須確保移動(dòng)頁(yè)面足夠快。

移動(dòng)頁(yè)面的速度與三個(gè)因素有關(guān)：移動(dòng)網(wǎng)絡(luò)帶寬速度，設(shè)備性能（CPU，GPU，瀏覽器）和頁(yè)面本身。

目前主流的移動(dòng)網(wǎng)絡(luò)標(biāo)準(zhǔn)是3G：

今年，我們也看到了4G網(wǎng)絡(luò)標(biāo)準(zhǔn)的快速發(fā)展，再次提高了手機(jī)頁(yè)面的加載速度;

移動(dòng)設(shè)備本身，截至目前，隨著iPhon6 /三星Note4等設(shè)備，智能設(shè)備已經(jīng)變得比以前的屏幕更大，CPU，GPU，內(nèi)存更加可靠。

與此同時(shí)，瀏覽器制造商已經(jīng)做出了不可磨滅的努力來(lái)提高頁(yè)面的速度。

網(wǎng)絡(luò)標(biāo)準(zhǔn)供應(yīng)商，手機(jī)制造商，瀏覽器制造商都是如此強(qiáng)大，我們呢？我們能做什么。

我們可以做的是優(yōu)化移動(dòng)頁(yè)面本身，這也是我們價(jià)值的體現(xiàn)，因此我們必須進(jìn)行移動(dòng)頁(yè)面頁(yè)面性能優(yōu)化。

如何進(jìn)行移動(dòng)頁(yè)面優(yōu)化？

在說(shuō)這個(gè)之前，我想提一下PC中常用的優(yōu)化方法：

代碼優(yōu)化（css，html，js優(yōu)化）減少HTTP請(qǐng)求（Sprite，文件合并.）減少DOM節(jié)點(diǎn)而不阻塞（內(nèi)聯(lián)CSS，JS post .）Cache

.

大多數(shù)這些方法適用于移動(dòng)端。這些是一些熟悉的方法。我今天在這里談?wù)?。我想?yún)⒖糚DI課程《網(wǎng)站性能優(yōu)化》。

今天要討論的主要內(nèi)容是移動(dòng)設(shè)備的一些優(yōu)化方法，現(xiàn)在它已經(jīng)到了重點(diǎn)。

首先，我們必須注意頁(yè)面從演示文稿的開(kāi)頭到結(jié)尾需要的階段。主要有四個(gè)階段：

每個(gè)階段的主要工作如上圖所示，我們的優(yōu)化目標(biāo)是：

讓我們看看上面的階段來(lái)詳細(xì)說(shuō)明優(yōu)化方法。

首先，讓我們看看負(fù)載中可用的優(yōu)化：

1.?預(yù)加載

有兩種預(yù)加載方式：

A. 顯性加載

類似這種用戶可以清楚地感知，我稱之為顯式加載，建議在交互頁(yè)面中添加這種加載方法，這一方面可以增加頁(yè)面的樂(lè)趣，另一方面可以使后續(xù)頁(yè)面體驗(yàn)更多平滑。

B. 隱性加載

這種在加載圖像時(shí)預(yù)加載第二圖像的方法使頁(yè)面體驗(yàn)更加平滑。我稱之為隱式加載。這種方法的優(yōu)點(diǎn)是可以節(jié)省流量并增強(qiáng)體驗(yàn)。

2. 按需加載

按需加載是不可或缺的優(yōu)化工具，主要有以下兩種方式：

這樣，當(dāng)加載屏幕時(shí)，屏幕內(nèi)容盡可能多地加載，屏幕外的元素只在屏幕上顯示時(shí)才加載，大大節(jié)省了流量，縮短了加載時(shí)間。

這種響應(yīng)式加載方法意味著使用JS或CSS來(lái)判斷分辨率，從而可以選擇不同大小的圖像進(jìn)行引入。這種優(yōu)勢(shì)是顯而易見(jiàn)的，它還可以加快加載并節(jié)省流量。

3. 壓縮圖片

對(duì)于壓縮圖像，首先要提到的是jpg文件：

對(duì)于移動(dòng)端的JPG文件，有這樣一個(gè)結(jié)論：

使用具有大尺寸和大損耗壓縮比的jpegtran進(jìn)行無(wú)損壓縮

對(duì)于png有以下結(jié)論：

彩色圖片使用png24低色圖片使用png8建議使用pngquant以避免重定向

我們?yōu)槭裁匆M量避免重定向？因?yàn)槿鐖D所示：

這是在相同網(wǎng)絡(luò)速度下的測(cè)試結(jié)果。重定向較慢的原因是它重復(fù)了域名查找，tcp鏈接和發(fā)送請(qǐng)求。

5.使用其他方法代替圖像

有兩種方式，種類是：依靠CSS 3來(lái)繪制圖片：

第二：使用iconfont而不是image

但是iconfont不一定比圖片好，這是一個(gè)實(shí)驗(yàn)：

對(duì)于大圖像，iconfont并不比Sprite好，建議使用iconfont。

然后，對(duì)于腳本執(zhí)行中的優(yōu)化方法，這里只有兩點(diǎn)：

1. 盡量避免DataURI

移動(dòng)端的DataUri并不像移動(dòng)端那么好，因?yàn)椋?/p>

經(jīng)過(guò)測(cè)試，DataURI比簡(jiǎn)單的外部鏈資源慢6倍。與圖像文件大小相比，生成的代碼文件沒(méi)有減少，但瀏覽器需要在解碼此base64的過(guò)程中消耗內(nèi)存和CPU。這是在移動(dòng)端。缺點(diǎn)尤為明顯。

2. 點(diǎn)擊事件優(yōu)化

在移動(dòng)端，請(qǐng)使用touchstart，touchend，touch和其他事件，而不是延遲的Click事件。 Click很慢的原因是由于mousedown：

然后，對(duì)于渲染階段的優(yōu)化方法，這里只有兩點(diǎn)：

1.?動(dòng)畫(huà)優(yōu)化

a）嘗試使用css3動(dòng)畫(huà)

優(yōu)點(diǎn)：

不要占用js的主線程，可以使用硬件加速瀏覽器來(lái)優(yōu)化動(dòng)畫(huà)

缺點(diǎn)：

不支持中間狀態(tài)監(jiān)控

b）適當(dāng)使用畫(huà)布動(dòng)畫(huà)

優(yōu)點(diǎn)：

可以避免渲染樹(shù)的渲染更快渲染

缺點(diǎn)：

開(kāi)發(fā)成本高，維護(hù)麻煩。

通過(guò)比較CSS 3動(dòng)畫(huà)與Canvas動(dòng)畫(huà)：

得出結(jié)論：在5個(gè)元素中使用css3動(dòng)畫(huà)，并使用5個(gè)或更多的畫(huà)布動(dòng)畫(huà)。

c）合理使用RAF（requestAnimationFrame）

優(yōu)點(diǎn)：

可以解決腳本問(wèn)題造成的幀丟失，Caton問(wèn)題支持中間狀態(tài)監(jiān)控

缺點(diǎn)：

兼容性問(wèn)題

將RAF動(dòng)畫(huà)與settimeout動(dòng)畫(huà)進(jìn)行比較：

得出結(jié)論：如果你不需要兼容android 4.3瀏覽器，請(qǐng)使用RAF制作腳本動(dòng)畫(huà)

2.?高頻事件優(yōu)化

touchmove，scroll等事件可以產(chǎn)生多個(gè)渲染，可以針對(duì)以下內(nèi)容進(jìn)行優(yōu)化：

1.使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)模员阍谡_的時(shí)間呈現(xiàn)它們

2.增加響應(yīng)更改的時(shí)間間隔并減少重繪次數(shù)。

之后，只提出了一種合成/繪圖的優(yōu)化方法：

GPU加速

觸發(fā)GPU加速的方法是：

CSS3過(guò)渡CSS3 3D變換WebGL 3D渲染視頻

.

在使用GPU加速之前有比較實(shí)驗(yàn)：

GPU加速實(shí)際上大大減少了合成/繪圖時(shí)間，大大提高了頁(yè)面速度，但GPU加速有其自身的缺點(diǎn)：

過(guò)多的GPU層會(huì)帶來(lái)性能開(kāi)銷，主要原因是GPU加速的使用是使用GPU層緩存，這樣渲染資源可以重用，所以一旦圖層更多，緩存增加，就會(huì)造成其他性能問(wèn)題。

總結(jié)

本文針對(duì)頁(yè)面呈現(xiàn)的四個(gè)階段提出了一種更典型的優(yōu)化方法。之后，提醒讀者：事實(shí)上，優(yōu)化是一把雙刃劍。

按需加載提升速度，但可能會(huì)導(dǎo)致大量重繪;

觸摸快速響應(yīng)，但許多場(chǎng)景不合適;

GPU加速度很高，但內(nèi)存開(kāi)銷很大等等。

加載將使整體體驗(yàn)流暢，但很容易導(dǎo)致用戶流失

圖像壓縮可降低帶寬成本，但可能導(dǎo)致視覺(jué)性能不佳

還有很多像這樣的矛盾。請(qǐng)根據(jù)實(shí)際情況優(yōu)化業(yè)務(wù)。