網頁設計移動端H5前端性能優化方案
6、按需加載
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量。
1、LazyLoad
2、滾屏加載
3、通過MediaQuery加載
另外，提醒大家一點：按需加載會導致大量重繪，影響渲染性能。
7、預加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面，但Loading時間過長，會造成用戶流失。
1、可感知Loading(如進入空間游戲的Loading)
2、不可感知的Loading（如提前加載下一頁）
3、對用戶行為分析，可以在當前頁加載下一頁資源，提升速度。
8、壓縮圖片
圖片是最占流量的資源，因此盡量避免使用他，使用時選擇最合適的格式（實現需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示。
1、使用智圖
2、使用其它方式代替圖片（使用CSS3；使用SVG；使用IconFont）
3、使用Srcset
4、選擇合適的圖片（webP優于JPG；PNG8優于GIF）
5、選擇合適的大小（首次加載不大于1014KB；基于手機屏幕一般寬度不寬于640）
提醒大家一點：過度壓縮圖片大小影響圖片顯示效果。
9、減少Cookie，避免重定向以及異步加載第三方資源
Cookie會影響加載速度，所以靜態資源域名不使用Cookie。另外，重定向會影響加載速度，所以在服務器正確設置避免重定向。還有，第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源。
腳本執行優化
腳本處理不當會阻塞頁面加載、渲染，因此在使用時需要注意以下幾點：
1、CSS寫在頭部，Java寫在尾部或異步。
2、避免圖片和iFrame等的空Src，空Src會重新加載當前頁面，影響速度和效率。
3、盡量避免重設圖片大小，重設圖片大小是指在頁面、CSS、Java等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能。
4、圖片盡量避免使用DataURL，DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長。
CSS優化
1、盡量避免寫在HTML標簽中寫Style屬性。
2、避免CSS表達式，CSS表達式的執行需跳出CSS樹的渲染，因此請避免CSS表達式。
| << 上一篇：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：
