字體設(shè)置

使用無(wú)襯線字體

body { 
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; 
} 

iOS 4.0+ 使用英文字體 Helvetica Neue，之前的iOS版本降級(jí)使用 Helvetica。中文字體設(shè)置為華文黑體STHeiTi。 需補(bǔ)充說(shuō)明，華文黑體并不存在iOS的字體庫(kù)中(http://support.apple.com/kb/HT5878)， 但系統(tǒng)會(huì)自動(dòng)將華文黑體 STHeiTi 兼容***系統(tǒng)默認(rèn)中文字體黑體-簡(jiǎn)或黑體-繁

Heiti SC Light 黑體-簡(jiǎn) 細(xì)體 （iOS 7后廢棄） 
Heiti SC Medium 黑體-簡(jiǎn) 中黑 
Heiti TC Light 黑體-繁 細(xì)體 
Heiti TC Medium 黑體-繁 中黑 

原生Android下中文字體與英文字體都選擇默認(rèn)的無(wú)襯線字體

4.0 之前版本英文字體原生 Android 使用的是 Droid Sans，中文字體原生 Android 會(huì)*** Droid Sans Fallback 
4.0 之后中英文字體都會(huì)使用原生 Android 新的 Roboto 字體 
其他第三方 Android 系統(tǒng)也一致選擇默認(rèn)的無(wú)襯線字體 

基礎(chǔ)交互

設(shè)置全局的CSS樣式，避免圖中的長(zhǎng)按彈出菜單與選中文本的行為

a, img { 
    -webkit-touch-callout: none; /* 禁止長(zhǎng)按鏈接與圖片彈出菜單 */ 
} 
html, body { 
    -webkit-user-select: none;   /* 禁止選中文本（如無(wú)文本選中需求，此為必選項(xiàng)） */ 
    user-select: none; 
} 

移動(dòng)性能

要考慮Android低端機(jī)與2G網(wǎng)絡(luò)場(chǎng)景下性能 注意！

發(fā)布前必要檢查項(xiàng)

• 所有圖片必須有進(jìn)行過(guò)壓縮
• 考慮適度的有損壓縮，如轉(zhuǎn)化為80%質(zhì)量的jpg圖片
• 考慮把大圖切成多張小圖，常見(jiàn)在banner圖過(guò)大的場(chǎng)景

加載性能優(yōu)化, 達(dá)到打開(kāi)足夠快

• 數(shù)據(jù)離線化，考慮將數(shù)據(jù)緩存在 localStorage
• 初始請(qǐng)求資源數(shù) < 4 注意！
• 圖片使用CSS Sprites 或 DataURI
• 外鏈 CSS 中避免 @import 引入
• 考慮內(nèi)嵌小型的靜態(tài)資源內(nèi)容
• 初始請(qǐng)求資源gzip后總體積 < 50kb
• 靜態(tài)資源(HTML/CSS/JS/Image)是否優(yōu)化壓縮？
• 避免打包大型類庫(kù)
• 確保接入層已開(kāi)啟Gzip壓縮（考慮提升Gzip級(jí)別，使用CPU開(kāi)銷換取加載時(shí)間） 注意！
• 盡量使用CSS3代替圖片
• 初始首屏之外的靜態(tài)資源（JS/CSS）延遲加載 注意！
• 初始首屏之外的圖片資源按需加載（判斷可視區(qū)域） 注意！
• 單頁(yè)面應(yīng)用(SPA)考慮延遲加載非首屏業(yè)務(wù)模塊
• 開(kāi)啟Keep-Alive鏈路復(fù)用

運(yùn)行性能優(yōu)化, 達(dá)到操作足夠流暢

• 避免 iOS 300+ms 點(diǎn)擊延時(shí)問(wèn)題 注意！
• 緩存 DOM 選擇與計(jì)算
• 避免觸發(fā)頁(yè)面重繪的操作
• Debounce連續(xù)觸發(fā)的事件(scroll / resize / touchmove等)，避免高頻繁觸發(fā)執(zhí)行 注意！
• 盡可能使用事件代理，避免批量綁定事件
• 使用CSS3動(dòng)畫代替JS動(dòng)畫
• 避免在低端機(jī)上使用大量CSS3漸變陰影效果，可考慮降級(jí)效果來(lái)提升流暢度
• HTML結(jié)構(gòu)層級(jí)保持足夠簡(jiǎn)單
• 盡能少的使用CSS高級(jí)選擇器與通配選擇器
• Keep it simple

在線性能檢測(cè)評(píng)定工具使用指南

• 訪問(wèn) Google PageSpeed 在線評(píng)定網(wǎng)站
• 在地址欄輸入目標(biāo)URL地址，點(diǎn)擊分析按鈕開(kāi)始檢測(cè)
• 按 PageSpeed 分析出的建議進(jìn)行優(yōu)化，優(yōu)先解決紅色類別的問(wèn)題