(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ā)覺其實(shí)也沒(méi)有那么難嘛。

　　(4)交互提示

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

　　例如：

　　// 橫屏監(jiān)聽

　　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) 。

　　(5)分享接口

　　H5做好了，要傳播分享才能展示你的牛逼轟轟。

　　然而分享其實(shí)是個(gè)坑，分享到微信、手Q等都有各種問(wèn)題。

　　A.微信

　　舊微信會(huì)使用WeixinJSBridge來(lái)聲明分享的縮略圖、標(biāo)題、正文等，比較方便。例如：

　　而最新的微信提供了新的微信SDK，需要在公眾賬號(hào)綁定所屬域名之后調(diào)用SDK作分享，可以說(shuō)分享功能會(huì)更加強(qiáng)大，坑也會(huì)更加少。

　　B.手Q

　　手Q支持聲明meta標(biāo)簽的的分享方式，例如：

　　而若在QQ.com域名下也支持api的定義方式。

　　C.一般化分享

　　在默認(rèn)兼容舊版微信、手Q或者各種瀏覽器，平臺(tái)，可以用這樣的方法：

　　寫h1做標(biāo)題，p做內(nèi)容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好要大于200x200px。

　　例如：

　　當(dāng)然，這樣也有利于搜索引擎拉取信息。

　　分享的坑還有更多，例如不同瀏覽器例如QQ瀏覽器、Chrome也會(huì)有自己的默認(rèn)拉取方式(部分截圖作縮略圖)，需要多加測(cè)試優(yōu)化。

　　(5)SEO搜索引擎優(yōu)化

　　SEO(搜索引擎優(yōu)化)的基本做法是把頁(yè)面結(jié)構(gòu)寫好，這包括：

　　1.定義精確的網(wǎng)頁(yè)標(biāo)題。 你的標(biāo)題應(yīng)該有概括性，能明確告知搜索引擎和用戶你的網(wǎng)站大概內(nèi)容和目的，可以是當(dāng)前頁(yè)面標(biāo)題-所屬類型-產(chǎn)品名 ，例如“全民來(lái)猜歌-年費(fèi)黃鉆-QQ空間”。

　　2.針對(duì)頁(yè)面內(nèi)容補(bǔ)充description和keyWords的meta標(biāo)簽。 你需要簡(jiǎn)短總結(jié)頁(yè)面的主要目標(biāo)，然后補(bǔ)充description，以及根據(jù)關(guān)鍵詞補(bǔ)充keywords。

　　3.優(yōu)化你的超鏈接和圖片。 包括優(yōu)化超鏈接顯示的文本，要具有語(yǔ)義性也要跟超鏈接的網(wǎng)頁(yè)具有相關(guān)性，例如“空間主頁(yè)”就不要鏈接到“www.qq.com”。同時(shí)，要補(bǔ)充”title”和”alt”屬性，例如“<img src=’images/apple.jpg’ title=’蘋果示例圖’ alt=’蘋果示例圖’ />”。

　　4.建立良好的網(wǎng)站導(dǎo)航和sitemap。 網(wǎng)站需要有一個(gè)良好的導(dǎo)航，控制根目錄和各子目錄的關(guān)鍵，通過(guò)sitemap可以幫助網(wǎng)站主了解網(wǎng)站結(jié)構(gòu)，也方便搜索引擎收錄整個(gè)站點(diǎn)。

　　5.優(yōu)化目錄結(jié)構(gòu)和URL。 你的URL應(yīng)該有語(yǔ)義性，簡(jiǎn)短易懂，例如http://www.apple.com/macbook-air/，而且每一層級(jí)都要有它對(duì)應(yīng)的頁(yè)面展示以及語(yǔ)義。

　　6.善用h1-h6的標(biāo)題結(jié)構(gòu)樹。 合理的標(biāo)題可以強(qiáng)調(diào)文字，也能讓搜索引擎更加了解到各標(biāo)題的重要性，因此建立良好的標(biāo)題樹十分有意義。

　　7.不斷致力于提供優(yōu)質(zhì)的內(nèi)容。 社交化分享是網(wǎng)站曝光最快的因素，因此不斷提供了優(yōu)質(zhì)原創(chuàng)內(nèi)容才能真正提高你的網(wǎng)站曝光權(quán)重。

　　(6)無(wú)障礙

　　無(wú)障礙的普及是一件好事，這讓互聯(lián)網(wǎng)真正地為所有人可用。因此我們也應(yīng)該為之而努力，無(wú)障礙的根基是你頁(yè)面強(qiáng)壯的語(yǔ)義性和結(jié)構(gòu)性，具體可以參考《騰訊網(wǎng)無(wú)障礙說(shuō)明》了解無(wú)障礙的優(yōu)化手段。

　　最后，羅嗦了這么多，只是我自己的一些小經(jīng)驗(yàn)，請(qǐng)輕拍磚，多交流。