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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

1.?預(yù)加載

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

A. 顯性加載

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

B. 隱性加載

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

2. 按需加載

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

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

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

3. 壓縮圖片

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

對于移動端的JPG文件，有這樣一個結(jié)論：

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

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

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

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

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

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

有兩種方式，種類是：依靠CSS 3來繪制圖片：

第二：使用iconfont而不是image

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

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

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

1. 盡量避免DataURI

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

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

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

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

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

1.?動畫優(yōu)化

a）嘗試使用css3動畫

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

不要占用js的主線程，可以使用硬件加速瀏覽器來優(yōu)化動畫

缺點(diǎn)：

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

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

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

可以避免渲染樹的渲染更快渲染

缺點(diǎn)：

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

通過比較CSS 3動畫與Canvas動畫：

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

c）合理使用RAF（requestAnimationFrame）

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

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

缺點(diǎn)：

兼容性問題

將RAF動畫與settimeout動畫進(jìn)行比較：

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

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

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

1.使用requestAnimationFrame監(jiān)聽幀更改，以便在正確的時間呈現(xiàn)它們

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

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

GPU加速

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

CSS3過渡CSS3 3D變換WebGL 3D渲染視頻

.

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

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

過多的GPU層會帶來性能開銷，主要原因是GPU加速的使用是使用GPU層緩存，這樣渲染資源可以重用，所以一旦圖層更多，緩存增加，就會造成其他性能問題。

總結(jié)

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

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

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

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

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

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

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