玩轉(zhuǎn)HTML5移動(dòng)頁(yè)面(優(yōu)化篇)

承接上文《玩轉(zhuǎn)HTML5移動(dòng)頁(yè)面（動(dòng)效篇）》，上次說(shuō)的是讓頁(yè)面動(dòng)起來(lái)的一些小技巧。
而頁(yè)面動(dòng)起來(lái)的根基是功能可用的頁(yè)面，因此有必要分享一些優(yōu)化細(xì)節(jié)的技巧和方向，熟悉掌握一些方法論還是會(huì)對(duì)頁(yè)面開(kāi)發(fā)大大提高效率的，并且也能防止疏忽缺漏。

====前方高能====

（1） 動(dòng)畫雪碧圖
涉及的動(dòng)畫十分多，用的元素也十分多，請(qǐng)務(wù)必使用雪碧圖（Sprite）！
網(wǎng)上的工具有一些可以幫助你生成雪碧圖的工具，例如CssGaga，GoPng等等，自動(dòng)化構(gòu)建工具Grunt和Gulp也提供了相應(yīng)插件。
特別地，如果單張雪碧圖面積實(shí)在太大，可以拆分雪碧圖，例如拆分成2-4張，因?yàn)楝F(xiàn)代瀏覽器都支持4-6個(gè)同源請(qǐng)求下載，若資源實(shí)在太多，也可以考慮把靜態(tài)資源放在不同源域名下去請(qǐng)求，這里犧牲多幾個(gè)請(qǐng)求換來(lái)圖片同時(shí)加載比一張圖片慢慢加載要好，當(dāng)然，這需要具體情況去衡量。

順便提一下，我寫動(dòng)畫的一個(gè)小技巧是把每一頁(yè)的動(dòng)畫分在一個(gè)import.css里面，然后最后在主樣式中import進(jìn)去，這樣方便調(diào)試動(dòng)畫，也容易維護(hù)，例如：

//style.css @import url("reset.import.css"); @import url("loading.import.css"); @import url("m-animate-1.import.css"); @import url("m-animate-2.import.css"); @import url("m-animate-3.import.css");

當(dāng)然，import不是原生支持的，這里需要一些流程化工具讓import的頁(yè)面在輸出之前經(jīng)過(guò)組裝-壓縮的步驟。

（2）  圖片壓縮
圖片壓縮是老生常談，但是仍然有不少人忘記壓縮，那可是活生生的帶寬和流量的浪費(fèi)啊…
壓縮圖片需要有好工具，有智圖，TinyPNG，JPEGmini等等。
依靠工具外，還有以下方式可以優(yōu)化圖片：
1.盡量避免用PNG24。如果圖片色彩要求不高，請(qǐng)使用PNG8；
2.使用新格式，WEBP和BPG等新格式的到來(lái)，在不用考慮兼容的情況下請(qǐng)大膽嘗試；
3.用SVG和ICONFONT代替簡(jiǎn)單的圖標(biāo)；
4.用FUFU的字蛛來(lái)代替藝術(shù)字體切圖。

（3）多終端兼容
多終端兼容是一切的根基，要知道有人拿著腎6+，有人拿著腎4，大則414×736，小則320×416（IPHONE4在SAFARI保留上下端導(dǎo)航），因此多終端兼容是十分必要的。
曾經(jīng)有一種派系為320派系，就是大部分頁(yè)面都是320寬度，因此干脆直接用320的容器來(lái)包一切頁(yè)面，那樣也簡(jiǎn)單，然而IPHOEN6和IPHONE6+的出現(xiàn)簡(jiǎn)直是滅了這個(gè)派系。

那么到底要如何兼容呢？
這里我分了三個(gè)時(shí)期來(lái)說(shuō)說(shuō)：
A.設(shè)計(jì)初期。先審視設(shè)計(jì)稿，因?yàn)?20派系的原因，大部分設(shè)計(jì)稿只考慮到IPHONE5來(lái)設(shè)計(jì)，因此很多背景元素是只有320px寬度（頁(yè)面實(shí)際渲染寬度），例如下圖。

那么，這時(shí)候就需要設(shè)計(jì)提供一個(gè)較長(zhǎng)的延伸背景了，最好是可以重復(fù)的，用background-repeat可以減少圖片大小。
B.設(shè)計(jì)中期。也就是具體的兼容方法，可以使用CSS3 Media Query和類覆蓋。
1.CSS3 Media Query，按范圍兼容機(jī)型。

/*iphone6*/ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { .page6 .ele-building{top: 69px;} .page6 .ele-runner{top: 100px;} .page6 .ele-pophome{top: 16px;} }

2.類覆蓋，這種方式適合直接為小屏或大屏做整體兼容。
首先，為小屏（大屏）加一個(gè)識(shí)別類，這里小于420表示為小屏幕（IPHONE4有上下導(dǎo)航欄）：

var bh = $(window).height(); // 480 - 64 = 416 iphone4 if(bh<420){ $('body').addClass('low-screen'); }

然后，對(duì)應(yīng)識(shí)別類加上要變動(dòng)的元素覆蓋，例如：

.page6 .ele-bg{top: 10px;} .low-screen .page6 .ele-bg{top: 0px;}

C.設(shè)計(jì)后期。這是最后一步，整體檢查和體驗(yàn)，這里面會(huì)暴露一些問(wèn)題，例如元素在IPHONE6P顯得小了或者元素在IPHONE4擠不下了，可以來(lái)最后大招解決：

1.大屏適當(dāng)用zoom:(倍率)或者transform:scale(倍率)來(lái)增大元素，實(shí)測(cè)失真根本看不出來(lái)，設(shè)計(jì)師也滿意（畢竟不用多做一張圖！）；
2.小屏適當(dāng)去掉一些元素，例如一些翻頁(yè)提示，一些多余圖標(biāo)，可以讓優(yōu)雅降級(jí)，把它們 display:none掉。

有以上幾步，基本就能兼容大部分機(jī)器了。兼容一直是個(gè)苦活，但是這是前端必修課，多練就會(huì)發(fā)覺(jué)其實(shí)也沒(méi)有那么難嘛。

（4）交互提示
前面說(shuō)了，加了音效就要加上音樂(lè)切換開(kāi)關(guān)的按鈕，不然會(huì)被用戶罵死。還有其他，例如如果你的頁(yè)面不能兼容橫屏，請(qǐng)監(jiān)聽(tīng)橫屏狀態(tài)，然后加上適當(dāng)?shù)臋M屏提示。
例如：

// 橫屏監(jiān)聽(tīng) var updateOrientation = function(){ if(window.orientation=='-90' || window.orientation=='90'){ $('.landscape-wrap').removeClass('hide'); console.log('為了更好的體驗(yàn)，請(qǐng)將手機(jī)/平板豎過(guò)來(lái)！'); }else{ $('.landscape-wrap').addClass('hide'); console.log('豎屏狀態(tài)'); } }; window.onorientationchange = updateOrientation;

提示越多，界面越友好，有時(shí)候設(shè)計(jì)師會(huì)漏掉一些可能出現(xiàn)的頁(yè)面情況。
作為有態(tài)度的前端，請(qǐng)好好把關(guān)，讓用戶有好的體驗(yàn)。