移动web开发规范
以下規范建議，均是Alloyteam在日常開發過程中總結提煉出的經驗，規范具備較好的項目實踐，強烈推薦使用
字體設置
body {font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;} ios 4.0+ （iOS9以下系統已經非常少） 使用英文字體 Helvetica Neue，之前的iOS版本降級使用 Helvetica。 中文字體設置為華文黑體STHeiTi。
iOS 9+ Safari開始支持 -apple-system 參數， Chrome 使用 BlinkMacSystemFont ，兼容 iOS ／ MacOS
微軟雅黑是為了兼容Win系統，畢竟視網膜分辨率的win系統用Simsun是非常丑陋的，可以用4K屏 windows 去看 JD 淘寶，你能忍的話我就沒話說
PingFang SC 是簡體蘋方，看需要 如果要命中對應 蘋方字體的話 直接寫 PingFang 不帶引號。
需補充說明，華文黑體并不存在iOS的字體庫中(http://support.apple.com/kb/HT5484?viewlocale=en_US)， 但系統會自動將華文黑體STHeiTi兼容命中系統默認中文字體黑體-簡或黑體-繁：
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系統也一致選擇默認的無襯線字體。
Android 就直接讓它命中系統字體吧，因為你無法預知發行廠商會去內置什么字體，或者人家root去修改什么字體。
基礎交互
設置全局的CSS樣式，避免圖中的長按彈出菜單與選中文本的行為
a, img {
-webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */
}
html, body {
-webkit-user-select: none; /* 禁止選中文本（如無文本選中需求，此為必選項） */
user-select: none;
}
移動性能
要考慮Android低端機與2G網絡場景下性能 注意！
發布前必要檢查項
所有圖片必須有進行過壓縮
考慮適度的有損壓縮，如轉化為80%質量的jpg圖片
考慮把大圖切成多張小圖，常見在banner圖過大的場景
加載性能優化, 達到打開足夠快
數據離線化，考慮將數據緩存在 localStorage
初始請求資源數 < 4 注意！
圖片使用CSS Sprites 或 DataURI
外鏈 CSS 中避免 @import 引入
考慮內嵌小型的靜態資源內容
初始請求資源gzip后總體積 < 50kb
靜態資源(HTML/CSS/JS/Image)是否優化壓縮？
避免打包大型類庫
確保接入層已開啟Gzip壓縮（考慮提升Gzip級別，使用CPU開銷換取加載時間） 注意！
盡量使用css3代替圖片
初始首屏之外的靜態資源（JS/CSS）延遲加載 注意！
初始首屏之外的圖片資源按需加載（判斷可視區域） 注意！
單頁面應用(SPA)考慮延遲加載非首屏業務模塊
開啟Keep-Alive鏈路復用
運行性能優化, 達到操作足夠流暢
避免 iOS 300+ms 點擊延時問題 注意！
緩存 DOM 選擇與計算
避免觸發頁面重繪的操作
Debounce連續觸發的事件(scroll / resize / touchmove等)，避免高頻繁觸發執行 注意！
盡可能使用事件代理，避免批量綁定事件
使用CSS3動畫代替JS動畫
避免在低端機上使用大量CSS3漸變陰影效果，可考慮降級效果來提升流暢度
HTML結構層級保持足夠簡單
盡能少的使用CSS高級選擇器與通配選擇器
Keep it simple
在線性能檢測評定工具使用指南
訪問 Google PageSpeed 在線評定網站
在地址欄輸入目標URL地址，點擊分析按鈕開始檢測
按 PageSpeed 分析出的建議進行優化，優先解決紅色類別的問題
總結
- 上一篇： Nginx monitor
- 下一篇： NotificationManagerS