1. PC優(yōu)化手段在Mobile側(cè)同樣適用
2. 在Mobile側(cè)我們提出
3. 基于第二點(diǎn)，首屏加載3秒完成或使用Loading
4. 基于聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)，所以首屏資源不應(yīng)超過(guò)1014KB
5. Mobile側(cè)因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)
6. 基于第五點(diǎn)，要合理處理代碼減少渲染損耗
7. 基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置
8. 加載完成后用戶(hù)交互使用時(shí)也需注意性能

成都創(chuàng)新互聯(lián)是工信部頒發(fā)資質(zhì)IDC服務(wù)器商，為用戶(hù)提供優(yōu)質(zhì)的光華機(jī)房服務(wù)器托管服務(wù)

加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì)占到總耗時(shí)的80%時(shí)間，因此是優(yōu)化的重點(diǎn)

因?yàn)槭謾C(jī)瀏覽器同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求（Android支持4個(gè)，iOS 5后可支持6個(gè)），所以要盡量減少頁(yè)面的請(qǐng)求數(shù)，
a) 合并CSS、JavaScript
b) 合并小圖片，使用雪碧圖

使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，
a) 緩存一切可緩存的資源
b) 使用長(zhǎng)Cache（使用時(shí)間戳更新Cache）
c) 使用外聯(lián)式引用CSS、JavaScript

減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要
a) 壓縮（例如，多余的空格、換行符和縮進(jìn)）
b) 啟用GZip

寫(xiě)在HTML頭部的JavaScript（無(wú)異步），和寫(xiě)在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此

部或使用異步方式加載

使用首屏加載
首屏的快速顯示，可以大大提升用戶(hù)對(duì)頁(yè)面速度的感知，因此應(yīng)

，可以大大提升重要資源的顯示速度和降低總體流量
PS：
a) LazyLoad
b) 滾屏加載
c) 通過(guò)Media Query加載

大型重資源頁(yè)面（如游戲）可
對(duì)用戶(hù)行為分析，，提升速度
a) 可感知Loading(如進(jìn)入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁(yè)）

b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 選擇合適的圖片(1. webP優(yōu)于JPG 2. PNG8優(yōu)于GIF)
e) 選擇合適的大?。?. 首次加載不大于1014KB 2. 不寬于640（基于手機(jī)屏幕一般寬度））

Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie

重定向會(huì)影響加載速度，所以在服務(wù)器正確設(shè)置避免重定向

第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，因此要異步加載第三方資源

[腳本執(zhí)行優(yōu)化]

，因此在使用時(shí)需當(dāng)注意

空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率

· 盡量避免重設(shè)圖片大小
重設(shè)圖片大小是指在頁(yè)面、CSS、JavaScript等中多次重置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能

· 圖片盡量避免使用DataURL
DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長(zhǎng)

[CSS優(yōu)化]

· 盡量避免寫(xiě)在HTML標(biāo)簽中寫(xiě)Style屬性

CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染，因此請(qǐng)避免CSS表達(dá)式

· 移除空的CSS規(guī)則
空的CSS規(guī)則增加了CSS文件的大小，且影響CSS樹(shù)的執(zhí)行，所以需移除空的CSS規(guī)則

· 正確使用Display的屬性
Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用
a) display:inline后不應(yīng)該再使用width、height、margin、padding以及float
b) display:inline-block后不應(yīng)該再使用float
c) display:block后不應(yīng)該再使用vertical-align
d) display:table-*后不應(yīng)該再使用margin或者float

· 不濫用Float
Float在渲染時(shí)計(jì)算量比較大，盡量減少使用

· 不濫用Web字體
Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用

· 不聲明過(guò)多的Font-size
過(guò)多的Font-size引發(fā)CSS樹(shù)的效率

· 值為0時(shí)不需要任何單位
為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位

· 標(biāo)準(zhǔn)化各種瀏覽器前綴
a) 無(wú)前綴應(yīng)放在最后
b) CSS動(dòng)畫(huà)只用 （-webkit- 無(wú)前綴）兩種即可
c) 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）

· 避免讓選擇符看起來(lái)像正則表達(dá)式
高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用

[JavaScript執(zhí)行優(yōu)化]

· 減少重繪和回流
a) 避免不必要的Dom操作
b) 盡量改變Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 減少drawImage

· 緩存Dom選擇與計(jì)算
每次Dom選擇都要計(jì)算，緩存他

· 緩存列表.length
每次.length都要計(jì)算，用一個(gè)變量保存這個(gè)值

· 盡量使用事件代理，避免批量綁定事件

· 盡量使用ID選擇器
ID選擇器是最快的

· TOUCH事件優(yōu)化
使用touchstart、touchend代替click，因快影響速度快。但應(yīng)注意Touch響應(yīng)過(guò)快，易引發(fā)誤操作

[渲染優(yōu)化]

HTML使用Viewport
Viewport可以加速頁(yè)面的渲染，請(qǐng)使用以下代碼
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

· 減少Dom節(jié)點(diǎn)
Dom節(jié)點(diǎn)太多影響頁(yè)面的渲染，應(yīng)盡量減少Dom節(jié)點(diǎn)

· 動(dòng)畫(huà)優(yōu)化
a) 盡量使用CSS3動(dòng)畫(huà)
b) 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
c) 適當(dāng)使用Canvas動(dòng)畫(huà) 5個(gè)元素以?xún)?nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）

· 高頻事件優(yōu)化
Touchmove、Scroll 事件可導(dǎo)致多次渲染
a) 使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓?，使得在正確的時(shí)間進(jìn)行渲染
b) 增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)

· GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來(lái)觸發(fā)GPU渲染，請(qǐng)合理使用
PS：過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加

看完上訴內(nèi)容，你們對(duì)移動(dòng)HTML5前端性能優(yōu)化大概了解了嗎？如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：移動(dòng)HTML5前端性能優(yōu)化指南-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://m.rwnh.cn/article34/dpeppe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、企業(yè)建站、自適應(yīng)網(wǎng)站、App開(kāi)發(fā)、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)