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