Spirit騰訊移動Web整體解決方案
Spirit 是移動 Web 開發(fā)規(guī)范，基于日常開發(fā)的沉淀，總結了字體、交互、性能等方面的最佳實踐，是移動Web開發(fā)的指導標準。
移動開發(fā)規(guī)范概述
以下規(guī)范建議，均是Alloyteam在日常開發(fā)過程中總結提煉出的經(jīng)驗，規(guī)范具備較好的項目實踐，強烈推薦使用
字體設置
使用無襯線字體
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
iOS 4.0+ 使用英文字體 Helvetica Neue，之前的iOS版本降級使用 Helvetica。中文字體設置為華文黑體STHeiTi。 需補充說明，華文黑體并不存在iOS的字體庫中(http://support.apple.com/kb/HT5484?viewlocale=en_US)， 但系統(tǒng)會自動將華文黑體STHeiTi兼容命中系統(tǒng)默認中文字體黑體-簡或黑體-繁
Heiti SC Light 黑體-簡 細體 Heiti SC Medium 黑體-簡 中黑 Heiti TC Light 黑體-繁 細體 Heiti TC Medium 黑體-繁 中黑
原生Android下中文字體與英文字體都選擇默認的無襯線字體
4.0 之前版本英文字體原生 Android 使用的是 Droid Sans，中文字體原生 Android 會命中 Droid Sans Fallback 4.0 之后中英文字體都會使用原生 Android 新的 Roboto 字體 其他第三方 Android 系統(tǒng)也一致選擇默認的無襯線字體
基礎交互
設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行為
a, img {
-webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */}html, body {
-webkit-user-select: none; /* 禁止選中文本（如無文本選中需求，此為必選項） */
user-select: none;}
移動性能
要考慮Android低端機與2G網(wǎng)絡場景下性能 注意！
發(fā)布前必要檢查項
所有圖片必須有進行過壓縮
考慮適度的有損壓縮，如轉化為80%質量的jpg圖片
考慮把大圖切成多張小圖，常見在banner圖過大的場景
加載性能優(yōu)化, 達到打開足夠快
數(shù)據(jù)離線化，考慮將數(shù)據(jù)緩存在 localStorage
初始請求資源數(shù)
< 4注意！圖片使用CSS Sprites 或 DATAURI
外鏈 CSS 中避免 @import 引入
考慮內(nèi)嵌小型的靜態(tài)資源內(nèi)容
初始請求資源gzip后總體積
< 50kb靜態(tài)資源(HTML/CSS/JS/IMAGE)是否優(yōu)化壓縮？
避免打包大型類庫
確保接入層已開啟Gzip壓縮
盡量使用CSS3代替圖片
初始首屏之外的圖片資源需延遲加載 注意！
單頁面應用(SPA)考慮延遲加載非首屏業(yè)務模塊
運行性能優(yōu)化, 達到操作足夠流暢
避免 iOS 300+ms 點擊延時問題 注意！
緩存 DOM 選擇與計算
避免觸發(fā)頁面重繪的操作
Debounce連續(xù)觸發(fā)的事件(scroll/resize)，避免高頻繁觸發(fā)執(zhí)行
盡可能使用事件代理，避免批量綁定事件
使用CSS3動畫代替JS動畫
避免在低端機上使用大量CSS3漸變陰影效果，可考慮降級效果來提升流暢度
HTML結構層級保持足夠簡單，推薦不超過 5 個層級
盡能少的使用CSS高級選擇器與通配選擇器
Keep it simple
在線性能檢測評定工具使用指南
訪問 Google PageSpeed 在線評定網(wǎng)站
在地址欄輸入目標URL地址，點擊分析按鈕開始檢測
按 PageSpeed 分析出的建議進行優(yōu)化，優(yōu)先解決紅色類別的問題
關于 Spirit：
Spirit（勇氣號），美國航天局NASA派往Mars（火星）的第一艘探測器。
移動Web開發(fā)是一塊新的領域，甚至有很多坑，這一點與人類從未踏上的Mars（火星）相似。為了避免開發(fā)者重復遇到相同的問題，我們創(chuàng)建了Mars項目（view on Github），收集與歸納移動Web開發(fā)中常見的問題。
Spirit正是為了Mars而生，Mars項目中歸納的問題，會放到Spirit中解決，并沉淀到開發(fā)工具（JM與JMUI）以及開發(fā)規(guī)范中，真正建立移動Web開發(fā)的集成解決方案。