網(wǎng)頁(yè)設計移動(dòng)端H5前端性能優(yōu)化方案
移動(dòng)端+HTML5，這個(gè)組合對前端工程師來(lái)說(shuō)是個(gè)不小的挑戰：如何讓開(kāi)發(fā)的頁(yè)面能有更好的體驗？這就是我們今天討論的話(huà)題：移動(dòng)端HTML5頁(yè)面前端性能優(yōu)化。
如何優(yōu)化HTML5在移動(dòng)設置上的性能表現，首先需要明確以下幾個(gè)原則：
1、PC優(yōu)化手段在Mobile端同樣適用。
2、在Mobile側我們提出三秒種渲染完成首屏指標。
3、基于第二點(diǎn)，首屏加載3秒完成或使用Loading。
4、基于聯(lián)通3G網(wǎng)絡(luò )平均338KB/s(2.71Mb/s)，所以首屏資源不應超過(guò)1014KB。
5、Mobile端因手機配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)。
6、基于第五點(diǎn)，要合理處理代碼減少渲染損耗。
7、基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應在處理邏輯中后置。
8、加載完成后用戶(hù)交互使用時(shí)也需注意性能。
在這里，我們針對其中幾個(gè)代表性方案進(jìn)行探討：
加載優(yōu)化
對于移動(dòng)端的網(wǎng)頁(yè)來(lái)說(shuō)，加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì )占到總耗時(shí)的80%時(shí)間，因此是優(yōu)化的重點(diǎn)，當然，手機站的其他前端要素優(yōu)化也是不能忽略的。
1、減少HTTP請求
因為手機瀏覽器同時(shí)響應請求為4個(gè)請求（Android支持4個(gè)，iOS5后可支持6個(gè)），所以要盡量減少頁(yè)面的請求數，首次加載同時(shí)請求數不能超過(guò)4個(gè)，建議優(yōu)化要點(diǎn)為以下2點(diǎn)：
1、合并CSS、Java
2、合并小圖片，使用雪碧圖
2、緩存
使用緩存可以減少向服務(wù)器的請求數，節省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設置緩存，并且盡量使用長(cháng)Cache（長(cháng)Cache資源的更新可使用時(shí)間戳）。
1、緩存一切可緩存的資源
2、使用長(cháng)Cache（使用時(shí)間戳更新Cache）
3、使用外聯(lián)式引用CSS、Java
3、壓縮HTML、CSS、Java
減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要對HTML、CSS、Java等進(jìn)行代碼壓縮，并在服務(wù)器端設置GZip。
1、壓縮（例如，多余的空格、換行符和縮進(jìn)）
2、啟用GZip
4、無(wú)阻塞
寫(xiě)在HTML頭部的Java（無(wú)異步），和寫(xiě)在HTML標簽中的Style會(huì )阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，避免在HTML標簽中寫(xiě)Style，Java放在頁(yè)面尾部或使用異步方式加載
5、使用首屏加載
首屏的快速顯示，可以大大提升用戶(hù)對頁(yè)面速度的感知，因此應盡量針對首屏的快速顯示做優(yōu)化。
| << 上一篇：h5移動(dòng)端頁(yè)面怎么根據設計稿布局 | >> 下一篇：網(wǎng)頁(yè)設計師的靈感主要從哪里來(lái) |
- 2017-07-11h5移動(dòng)端頁(yè)面怎么根據設計稿布局
- 2017-06-26怎么把網(wǎng)頁(yè)設計的更有視覺(jué)效果
- 2017-06-22網(wǎng)頁(yè)設計中的樣式單位px、em、rem區別
- 2017-06-01室內設計師如何設計一個(gè)好的室內設計方案
- 2017-05-24室內設計平面布局方案和技巧
- 2017-05-24室內設計師如何寫(xiě)室內設計方案
- 2017-05-23室內設計師如何講述設計方案
- 2017-05-09網(wǎng)頁(yè)設計中圖片有哪些常見(jiàn)的使用技巧
- 2017-05-04鄭州哪里可以學(xué)網(wǎng)頁(yè)設計培訓班
- 2017-05-04自適應網(wǎng)頁(yè)設計制作的方法和技巧
- 2017-04-10網(wǎng)頁(yè)設計首頁(yè)如何布局會(huì )有好的用戶(hù)體驗
- 2017-04-08室內設計中式白墻黑瓦設計方案
- 2017-04-06網(wǎng)頁(yè)設計中怎么用ps切圖
- 2017-04-06網(wǎng)頁(yè)前端需要會(huì )些什么 學(xué)什么東西
- 2017-03-20web前端用到的專(zhuān)業(yè)技能有哪些
- 求學(xué)問(wèn)答專(zhuān)業(yè)答復，快速響應
- 電話(huà)：0371-63218905
- 手機：13613841515
-
QQ：
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16
