壹 先，我們這里優(yōu)化對象為手機站點 。
手機開發(fā)具備了pc開發(fā)擁有 的特點，并且可以使用一些pc端無法使用的一些手段（主要還是為了兼容ie8及以下瀏覽器啦），pc端的優(yōu)化手段都可以在手機端使用。但是手機有些地方就不如pc端了(網(wǎng)絡(luò)慢，不穩(wěn)定)，尤其2G網(wǎng)絡(luò)，每秒按10kb來算，下載一個資源要耗很多時間。

HTML5頁面優(yōu)化點主要有以下幾點：

1.redirect：重定向耗時
2.APP cache：讀取緩存耗時
3.DNS：域名解析耗時
4.TCP：網(wǎng)絡(luò)連接耗時
5.request和response：發(fā)起請求和接受響應(yīng)時間
6.processing：接受到響應(yīng)頁面渲染時間
7.onload：渲染完畢，加載其他異步靜態(tài)資源時間
優(yōu)化思路可以針對以上每個點各個擊破。
根據(jù)經(jīng)驗，優(yōu)化重點主要放在靜態(tài)資源加載和頁面渲染，網(wǎng)絡(luò)連接耗時和服務(wù)器響應(yīng)時間不考慮在內(nèi)。

隨著Html5的正式定稿，手機前端步入APP世界的步伐也隨之加速。目前主流的兩大手機系統(tǒng)廠商（google、蘋果）都是Html5的參與者，所以這兩大系統(tǒng)在對html5的支持上基本是沒什么問題的。然而對于很多開發(fā)者來說，也許僅僅是因為使用前的一番可行性分析便放棄這種方案。因為很多資料都敘述著Html5相比原生App的各種不足。其中更 尷尬的一條莫過于“性能”問題。

前端性能問題與優(yōu)勢

因為這個問題，剛開始接觸的時候我也有很強的抵觸情緒。但后來慢慢的發(fā)現(xiàn)，其實很多時候性能本就不是問題。適當(dāng)?shù)恼{(diào)整Html和Css，我們的網(wǎng)頁同樣可以無限接近原生程序。而且個人認為，大多數(shù)時候程序是否流暢并非取決于某種編程語言，而是取決于寫程序的人。相比通過各種代碼填充來完成目標任務(wù)，我更喜歡把技術(shù)當(dāng)做藝術(shù)，寫代碼也應(yīng)該有所追求。（扯淡扯遠了。）

其實，Html5相比原生App的開發(fā)有很多誘人的方面。

其一：可快速迭代。 更 簡單更 直接的一個：IOS程序每次上傳都需要通過漫長的審核時間，如果趕時間的話這是個問題，而且耐心等待之后未必就能得到一個我們想要的結(jié)果，審核不通也不是不可能。Html5開發(fā)完成之后也不用再次上傳審核。（若與原生程序有交互變更，此項無效）
其二：跨平臺。Html跨平臺的特性早已不是一天兩天的事了。IOS開發(fā)完成的同時，Android也基本完成。開發(fā)效率和成本上相比原生應(yīng)用確實有較明顯的優(yōu)勢。
其三：轉(zhuǎn)發(fā)率高。現(xiàn)在打開微信朋友圈就能看到各種分享。如：文章分享，產(chǎn)品分享，XX店鋪等。通過連接轉(zhuǎn)發(fā)可以實現(xiàn)快速分享，提高流量。
談完優(yōu)勢，再說說自身經(jīng)歷。本是一名老老實實的C#程序員，沒事就學(xué)習(xí)各種程序優(yōu)化（sql為主）的我在幾個月前突然轉(zhuǎn)向手機網(wǎng)頁開發(fā)。在一個不算小的團隊里前端工程師是一枚傳統(tǒng)前端工程師。除能完成簡單的手機布局外其他一竅不通，于是乎關(guān)于JavaScript、前端性能優(yōu)化等各種重擔(dān)都落到了我這里。由于前端所完成的僅僅是以html的形式展現(xiàn)出效果圖的模樣，很少涉及到性能問題。于是漫長的學(xué)習(xí)之路由此開始了。

究竟什么樣的頁面是需要優(yōu)化的頁面？

1、頁面上下滑動時感覺卡頓不流暢或是基本不動；
2、動畫效果卡頓，看上去感覺一幀一幀的跳動；
簡單點說，就是感覺卡。也許iphone6不卡但是iphone4上會卡，也許iphone上不卡三星上感覺卡、魅族、小米、華為、聯(lián)想？國內(nèi)?潘炕?各有個的長相各有各的特色，比如魅族的MX，其他手機都很正常的時候它就卡。Html兼容一直都不是一件容易的事。

上述問題該如何破？

解決問題的關(guān)鍵在于找到問題的所在?？巢襁€得有裝備，工具很重要。以前用chrome，是因為感覺這貨比較好使（直到放棄多年來一直鐘愛的IE）。幾個月前才發(fā)現(xiàn)這是一個調(diào)試工具也很好使的瀏覽器（簡直就是神器）。其實關(guān)于html性能問題，很多博客上都有解釋重繪這個事。下面主要談?wù)勅绾斡胏hrome鑒別重繪元素。

打開chrome，開啟開發(fā)者工具(F12)。打開模擬器，并選擇需要模擬的設(shè)備，在Console中選擇Rendering 選中 條（Show paint rectangles）。若打開開發(fā)者工具后沒看見下方Console這塊可以按下Esc。

完成上述操作后，請將視線手機到左側(cè)網(wǎng)頁上的綠色矩形框上。

ps：一直都很喜歡淘寶的廣告，創(chuàng)意從未間斷過。

這個綠色框就是瀏覽器重繪的部分。這個框越大，說明重繪的區(qū)域也就越大。重繪并沒什么問題，這很正常，不正常的是大面積重繪，比如上圖中的時間跳動，如果僅僅是時間那個區(qū)域重繪并沒有什么問題，要是整個頁面都一直閃著個綠框框那就完蛋了。為何大面積重繪會出現(xiàn)性能問題，這個還得從瀏覽器渲染上談起。那是一個很長的故事，有興趣的朋友可以找些資料看看。簡單的舉例就是，瀏覽器把html文檔解析成網(wǎng)頁展現(xiàn)到我們面前，其中間是一個“漫長”的過程。再載入文檔之后需要對html進行分割、讀取并計算其樣式大小、然后進行圖層繪制、合并圖層等一系列操作。整個過程其實使用更 多的部件是CPU和GPU。

重繪的面積大小和回流（reflows）有關(guān)，關(guān)于回流其實可以這樣理解，當(dāng)改變一個元素后對其它節(jié)點元素產(chǎn)生影響。就如同可石子投入水中引起的波紋一樣，波紋所到之處基本都會有所影響。而在Html中子節(jié)點的變化會引起祖先的回流，同時也會影響到部分兄弟節(jié)點，大部分的回流將導(dǎo)致頁面的重新渲染。那么如何降低回流，減小重繪面積呢？淘寶時間不也只更新了一小塊么！這里提供兩種方法：

1、使用 position 屬性的 fixed 值或 absolute 值。
2、創(chuàng)建獨立的Layer（層）（為避免和div（層）產(chǎn)生混淆文中盡量同一使用Layer）。
繼續(xù)看淘寶：

種方法已經(jīng)很明顯了就不再贅述。說說第二種方法吧。壹 先說說在Chrome中如何查看獨立的Layer呢。如上圖，選擇Show composited layer borders后在頁面上獨立的Layer上回顯示一個橘黃色邊框。那么又要如何才能建立獨立的Layer呢？

在Chrome中創(chuàng)建獨立的Layer僅需要符合下述條件之一：

1.有3D元素的屬性；
2.video標簽并使用加速視頻解碼；
3.canvas元素并啟用3D；
4.插件，比如flash；
5.CSS動畫；
6.CSS濾鏡；
7.有一個后代元素是獨立的layer；
8.元素的相鄰元素是獨立layer。
看上去挺多挺復(fù)雜的，其實更 簡單、更 容易理解、也更 容易濫用的是 條。實現(xiàn) 條僅需要在元素的樣式里加上。transform:translateZ(0);-webkit-transform:translateZ(0); 就可以了。我們將淘寶往下滑動一點，找一個元素試試看。

還是看淘寶：

當(dāng)加上css樣式后對應(yīng)的元素上出現(xiàn)了橘黃色邊框，事實證明這招是有效的。而在Chrome中這樣做可以啟用GPU硬件加速。初次看到加速兩個字讓人覺得無比興奮，仿佛找到了克敵制勝的 神招?？墒牵?先這是在chrome下，其次大量使用真的好嗎？

其實就算是在chrome下GPU也未必能排上用場，壹 先需要確定你的GPU驅(qū)動程序不在chromium的黑名單中。因為某些GPU驅(qū)動程序存在錯誤，可能會影響瀏覽器穩(wěn)定，所以會被加入到黑名單里。在chrome地址欄里輸入 about:gpu 可以查看相關(guān)的GPU信息。現(xiàn)在再說說GPU加速的事情吧，簡單點解釋就是通過GPU渲染的Layer，GPU會將圖層信息緩存起來，到下次改變的時候就只需要重新渲染修改過的部分。這樣固然是快，但是會加大系統(tǒng)RAM和GPU的內(nèi)存開銷。在配置參差不齊的手機設(shè)備上，過多的層不僅不能加速，反而會嚴重影響性能。很多時候我們在感覺到手機網(wǎng)頁較卡的時候不防試試減少頁面上的Layer試試。

通過Chrome我們還可以鑒別一些其他影響性能的方面。比如：

上面兩幅圖，左邊一幅是百度.新聞的手機網(wǎng)頁版，箭頭指向的是這個頁面的loading效果（就是一種一直一直轉(zhuǎn)動的感覺）。右邊是以前更 常用的一種loading。在效果上兩種方式都一樣，一直不停的轉(zhuǎn)動。而區(qū)別在于右邊的loading是一個帶有背景圖片的div，通過css3使其產(chǎn)生轉(zhuǎn)動效果；而右邊則是一張Gif動態(tài)圖片。雖然效果上一樣，但在瀏覽其中我們可以看到右邊的loading會有一個不停閃動的綠色框（頻率相當(dāng)高）。gif動畫會導(dǎo)致瀏覽器不斷的進行繪制、柵格化、合成，整個過程相當(dāng)影響性能，所以更好 干掉它。

簡而言之言而簡之：

布局

1、減少重繪，減小重繪面積（改良布局，創(chuàng)建獨立的Layer），降低重繪頻率。
2、合理使用GPU加速，避免過度依賴GPU而導(dǎo)致性能下降。
動畫

說完布局，再簡單談?wù)剟赢嫲伞?/strong>