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

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

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

隨著Html5的正式定稿，移動(dòng)前端步入APP世界的步伐也隨之加速。目前主流的兩大手機(jī)系統(tǒng)廠商（google、蘋果）都是Html5的參與者，所以這兩大系統(tǒng)在對(duì)html5的支持上基本是沒什么問題的。然而對(duì)于很多開發(fā)者來說，也許僅僅是因?yàn)槭褂们暗囊环尚行苑治霰惴艞夁@種方案。因?yàn)楹芏噘Y料都敘述著Html5相比原生App的各種不足。其中最尷尬的一條莫過于“性能”問題。

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

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

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

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

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

1、頁面上下滑動(dòng)時(shí)感覺卡頓不流暢或是基本不動(dòng)；
2、動(dòng)畫效果卡頓，看上去感覺一幀一幀的跳動(dòng)；
簡單點(diǎn)說，就是感覺卡。也許iphone6不卡但是iphone4上會(huì)卡，也許iphone上不卡三星上感覺卡、魅族、小米、華為、聯(lián)想？國內(nèi)