隨著挪動互聯網的發展，咱們越發要關注挪動頁面的機能優化，今天跟大家談談這方面的事件。先，為什么要挪動頁面進行優化？
縱觀目前挪動網絡的現狀：
挪動頁面布局越來越龐雜，后果越來越炫，直接導致了文件越來越大，下載跟運行速度越來越低，而速度低會造成不良影響，據統計：
71%的用戶冀望挪動頁面跟PC頁面一樣快，74%的用戶能容忍的響應時光為5秒，所以咱們必須保障挪動端頁面有足夠的速度。
挪動頁面的速度跟三個因素有關，分辨是：挪動網絡帶寬速度，設備機能（CPU，GPU，瀏覽器），頁面自身。
目前主流的挪動網絡制式為3G：
今年，咱們還看到了4g網絡制式在疾速發展，這再一次晉升了挪動頁面的加載速度；
而挪動設備自身，截止到目前，以iPhon6/三星Note4等設備為，智能設備已經變得比以往屏幕更大，CP
U、GP
　　U、內存更靠譜。網站制作通俗的來說就是網站通過頁面結構定位，合理布局，圖片文字處理，程序設計，數據庫設計等一系列工作的總和，也是將網站設計師的圖片用HTML（標準通用標記語言下的一個應用）方式展示出來。
而與其同時，瀏覽器產商也為晉升頁面的速度做出了不可磨滅的盡力。
網絡制式供給商，手機制造商，瀏覽器產商如此給力，咱們呢？咱們能做什么。
咱們能做得是對挪動端頁面自身優化，這也是咱們價值的體現，所以咱們必須做挪動端頁面機能優化。
該怎么做挪動端頁面優化呢？
在說這個前，要提一下PC常用的優化手段：
代碼優化（cs
　　S、htm
　　L、js優化）減少HTTP懇求（雪碧圖，文件合并…）減少DOM節點無阻塞（內聯CSS，JS置后…）緩存
…
這些手段大局部實用于挪動端，這都是一些耳熟能詳的手段，今天這里就講了，有興趣可能參考PDI課程《網站機能優化》。
今天要講的重要是一些實用于挪動真個優化手段，當初進入正題。
先咱們得關注一下一個頁面從開端到顯現結束須要經歷什么階段，重要有四個階段：
每個階段的重要工作如上圖所示，而咱們的優化目標是：
下面咱們來針對上面的多少個階段細說一下都有哪些優化手段。
先，來看看加載中有哪些優化手段：
1. 預加載
預加載方法有兩種：
A. 顯性加載
類似這種用戶能明顯感知的，我把它稱為顯性加載，互動頁面都倡導加上這種加載方法，它一方面能增加頁面的趣味性，另一方面能讓后續頁面閉會更流暢。
B. 隱性加載
這種在加載張圖片的時候已經預先加載了第二張圖片，從而使得頁面閉會更流暢的方法，我把它稱為隱性加載，這種方法的利益是節儉流量之余又能使得閉會加強。

　　2. 按需加載
按需加載是不可或缺的優化手段，重要有以下兩種方法：
對這種方法，在屏加載的時候把屏的內容加載盡量，而位于屏之外的元素都只在出當初屏時才加載，很大水平地節儉了流量，晉升了次加載時光。
這種叫響應式加載方法，意思是利用JS 或者CSS 判斷辨別率，從而抉擇不同尺寸的圖片進行引入，這種的利益不問可知，同樣可能加快加載速度跟節儉流量。

　　3. 緊縮圖片
對緊縮圖片，先要提的是jpg文件：
對挪動真個JPG 文件，有這樣的論斷：
利用大尺寸大有損緊縮比的jpg利用jpegtran進行無損緊縮
而對png有以下論斷：
多彩圖片利用png24低彩圖片利用png8推薦利用pngquant盡量避免重定向
為什么要盡量避免重定向呢？因為如圖：
這是一個同一網速下的測試結果，重定向之所以會比較慢，是因為它重復了域名查找，tcp鏈接，發送懇求。
5. 利用其余方法取代圖片
有兩種方法，種是：依附CSS 3繪制圖片：
第二種：利用iconfont取代圖片
但iconfont不一定比圖片好，這里做了個實驗：
對大圖片，iconfont并不比雪碧圖好，倡導單側小尺寸圖標才利用iconfont.
而后，針對腳本履行中有哪些優化手段，這里只提兩點：

　　1. 盡量避免DataURI
DataUri在挪動端并不如它在pc端吃香，因為：
經測試，DataURI要比簡單的外鏈資源慢6倍，生成的代碼文件絕對圖片文件體積不減少反而增大，而且瀏覽器在對這種base64解碼進程中須要消耗內存跟cpu，這個在挪動端壞處特別明顯。

　　2. 點擊事件優化
在挪動端請恰當利用touchstart，touchend，touch等事件取代延遲比較大的Click 事件。Click之所以慢是因為mousedown導致的：
而后，針對渲染階段中有哪些優化手段，這里也只提兩點：
1. 動畫優化
a）盡量利用css3動畫
優點：
不占用js主線程可利用硬件加速瀏覽器可對動畫做優化
毛病：
不支撐旁邊狀況監聽
b）恰當利用canvas動畫
優點：
可躲避渲染樹的盤算渲染更快
毛病：
開發本錢高，維護較麻煩。
通過對CSS 3動畫跟Canvas 動畫對比：
得到論斷：5個元素以內利用css3動畫，5個以上利用canvas動畫。
c）公道利用RAF（requestAnimationFrame）
優點：
能解決腳本問題引起的丟幀，卡頓問題支撐旁邊狀況監聽
毛病：
兼容問題
通過RAF動畫與settimeout動畫對比：
得到論斷：不須要兼容android 4.3瀏覽器的情況下，請利用RAF制造腳本動畫
2. 高頻事件優化
類似touchmove，scroll這類的事件可導致屢次渲染，對這種事件可能通過以下手段進行優化：
1.利用requestAnimationFrame監聽幀變更，使得在正確的時光進行渲染
2.增加響應變更的時光間隔，減少重繪次數。
后，針對合成/繪制只提一個優化手段：
GPU加速
觸發GPU加速的方法有：
CSS3 transitionsCSS3 3D transformsWebGL 3D 繪制Video
…
利用GPU加速前有對比實驗：
GPU加速實際上是大幅減少了合成/繪制時光，從而大大地進步了頁面速度，但GPU加速有自己的毛病：
過多的GPU層會帶來機能開銷，重要起因是利用GPU加速切實是利用了GPU層的緩存，讓渲染資源可能重復利用，所以一旦層多了，緩存增大，就會引起別的機能問題。
總結
本文針對頁面顯現的四個階段提出了比較典范的優化手段，到后，再提示讀者一下：切實優化是雙刃劍。
按需加載晉升速度，但可能導致大量重繪；
Touch響應快，但很多場景不適合；
GPU加速效力高，但內存開銷大等等
Loading會讓整體閉會流暢，但輕易造成用戶消散
圖片緊縮讓帶寬本錢降落，但可能會導致視覺后果變差
類似這樣的抵觸點還有很多，請結合業務按如實際情況進行優化。網站制作通俗的來說就是網站通過頁面結構定位，合理布局，圖片文字處理，程序設計，數據庫設計等一系列工作的總和，也是將網站設計師的圖片用HTML（標準通用標記語言下的一個應用）方式展示出來。

相關鏈接：長春網站建設，長春網站制作，長春網站設計，長春做網站，長春建網站，長春網站公司，長春網絡公司，http://www.dxcruisers.com/