常常做這樣一件事，看見一篇博文覺得不錯(cuò)，CTRL+D；看見微博一條感覺有用的分享，收藏；看見一篇*老師講的教程，覺得不錯(cuò)分享給好友，自己還@我的印象筆記 一下。做的太多太多了，卻忘記自己總結(jié)了，只有自己擁有了才真正是屬于自己的。上周寫了篇 《一個(gè)簡單的特效引發(fā)的大戰(zhàn)之移動開發(fā)中我為什么放棄jquery mobile》收到了很多朋友的意見，主要還是代碼質(zhì)量，原生JS（移動開發(fā)接下來要走的路），對比分析不全面等方面比較欠缺。
本文內(nèi)容申明內(nèi)容針對實(shí)際開發(fā)中涉及CSS,JS,Image方面用到的提供一些參考方案，僅表述個(gè)人觀點(diǎn)與君交流，內(nèi)容不全面的方面，請參考參考資料。點(diǎn)擊此處鼓勵(lì)一下unofficialCSS JS Image 離不開的情愫之請求數(shù)CSS/Js方面我想分享的是一個(gè)我遇到的問題，頁面內(nèi)我們包含的是公共的header，其中有一個(gè)map頁面不一樣，只是一張地圖。這樣一來就可以簡單的樣式分離，引用一個(gè)公共樣式，js方面需要用到百度api，僅僅在這個(gè)頁面內(nèi)我們r(jià)equire了一個(gè)baiyun.mobile.map.js，這個(gè)針對地圖的，我們在其他頁面就無需包含。
Image方面，還記得上文中的例子，JQM版本文件比較大，首次加載耗時(shí)問題，二次加載中直接來源于緩存中，耗時(shí)就主要來自image請求，當(dāng)時(shí)@碼道程工 說道為什么不做一個(gè)JQM的css spirit做對比分析呢？這樣一來區(qū)別應(yīng)該就不是很大了。實(shí)際上這里還可以使用另外一個(gè)方法，實(shí)際開發(fā)中按照實(shí)際情況選擇方式使用。
Data URI scheme: 這種技術(shù)可以讓通常單獨(dú)的元素,如圖像和樣式表中獲取一個(gè) http 請求而不是多個(gè)HTTP請求,可以更有效率（這里的效率視情況而定）。
格式：data:image/png(jpeg/gif);base64,image的base64編碼
使用：<img src="data:image/png(jpeg/gif);base64,image的base64編碼" alt="Data URI scheme測試" />
DEMO：插入了一張Image圖片，圖片大小124K。
通過Http URI scheme方式加載圖片，來看一下請求數(shù)。
通過Data URI scheme方式加載圖片，來看一下請求數(shù)。
通過上面的圖片的對比分析可以看出來Data URI scheme在這里并沒有優(yōu)勢，原因是gif編碼使demo變大了，減少請求數(shù)量時(shí)我們需要慎重考慮，小圖片可以選擇這種方式加載出來，上文中我們就可以使用這樣的方式來解決，小圖標(biāo)幾乎在1K以內(nèi)?，F(xiàn)在還是在使用css spirit，在接下來的項(xiàng)目中或許可以嘗試使用一下這種方式。
CSS JS Image 離不開的情愫之文件大小1.在資料的使用上我們常常習(xí)慣了給予的什么文件就直接使用什么文件，PC端拿來一個(gè)插件就加上，拿來一個(gè)插件就加上，也許文中還是應(yīng)用的jquery，而非壓縮后的jquery.min。css文件也是一個(gè)容易忽略的部分，沒有壓縮，一般正常情況下都可以壓縮掉25%左右（數(shù)據(jù)大致估算，不必參考），徘徊在2G時(shí)代的我每月還只有30M，你為什么就不為我想想呢？
2.圖片方面上文有提到，這里就不過多描述，關(guān)于圖片大小，圖片質(zhì)量方面考慮一下。
Js事件之觸摸
var isMobileEvent = /ipad|ipod|iphone|android|windows phone/i.test(navigator.userAgent.toLocaleLowerCase())?'touchstart':'click';
var isMobileEvent = 'ontouchstart' in document.documentElement?'touchstart':'click';
PC端我們使用的是click事件，而移動端呢？click也可以使用啊，有效果的呢，難道就沒發(fā)現(xiàn)點(diǎn)擊后悔延遲一下下？據(jù)查閱的資料數(shù)據(jù)看這延遲的時(shí)間是300ms，移動端建議使用相應(yīng)的觸摸事件，而PC端我們就還是使用Click事件，這里就需要用到一個(gè)JS判定。
本文原創(chuàng)博客地址：http://www.cnblogs.com/unofficial 官網(wǎng)地址：www.pushself.com參考資料Data URI scheme：http://en.wikipedia.org/wiki/Data_URI_scheme
性能優(yōu)化：http://segmentfault.com/blog/laopopo/1190000000367899
