常常做這樣一件事，看見一篇博文覺得不錯，CTRL+D；看見微網誌一條感覺有用的分享，收藏；看見一篇*老師講的教程，覺得不錯分享給好友，自己還@我的印象筆記 一下。做的太多太多了，卻忘記自己總結了，隻有自己擁有了才真正是屬于自己的。上周寫了篇 《一個簡單的特效引發的大戰之移動開發中我為什麼放棄jquery mobile》收到了很多朋友的意見，主要還是代碼品質，原生JS（移動開發接下來要走的路），對比分析不全面等方面比較欠缺。
本文内容申明
内容針對實際開發中涉及CSS,JS,Image方面用到的提供一些參考方案，僅表述個人觀點與君交流，内容不全面的方面，請參考參考資料。點選此處鼓勵一下unofficial
CSS JS Image 離不開的情愫之請求數
CSS/Js方面我想分享的是一個我遇到的問題，頁面内我們包含的是公共的header，其中有一個map頁面不一樣，隻是一張地圖。這樣一來就可以簡單的樣式分離，引用一個公共樣式，js方面需要用到百度api，僅僅在這個頁面内我們require了一個baiyun.mobile.map.js，這個針對地圖的，我們在其他頁面就無需包含。
Image方面，還記得上文中的例子，JQM版本檔案比較大，首次加載耗時問題，二次加載中直接來源于緩存中，耗時就主要來自image請求，當時@碼道程工 說道為什麼不做一個JQM的css spirit做對比分析呢？這樣一來差別應該就不是很大了。實際上這裡還可以使用另外一個方法，實際開發中按照實際情況選擇方式使用。
Data URI scheme: 這種技術可以讓通常單獨的元素,如圖像和樣式表中擷取一個 http 請求而不是多個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。
通過上面的圖檔的對比分析可以看出來Data URI scheme在這裡并沒有優勢，原因是gif編碼使demo變大了，減少請求數量時我們需要慎重考慮，小圖檔可以選擇這種方式加載出來，上文中我們就可以使用這樣的方式來解決，小圖示幾乎在1K以内。現在還是在使用css spirit，在接下來的項目中或許可以嘗試使用一下這種方式。
CSS JS Image 離不開的情愫之檔案大小
1.在資料的使用上我們常常習慣了給予的什麼檔案就直接使用什麼檔案，PC端拿來一個插件就加上，拿來一個插件就加上，也許文中還是應用的jquery，而非壓縮後的jquery.min。css檔案也是一個容易忽略的部分，沒有壓縮，一般正常情況下都可以壓縮掉25%左右（資料大緻估算，不必參考），徘徊在2G時代的我每月還隻有30M，你為什麼就不為我想想呢？
2.圖檔方面上文有提到，這裡就不過多描述，關于圖檔大小，圖檔品質方面考慮一下。
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也可以使用啊，有效果的呢，難道就沒發現點選後悔延遲一下下？據查閱的資料資料看這延遲的時間是300ms，移動端建議使用相應的觸摸事件，而PC端我們就還是使用Click事件，這裡就需要用到一個JS判定。
本文原創部落格位址：http://www.cnblogs.com/unofficial 官網位址：
www.pushself.com
參考資料
Data URI scheme：http://en.wikipedia.org/wiki/Data_URI_scheme
性能優化：http://segmentfault.com/blog/laopopo/1190000000367899