隨著前端技術的不斷髮展，html5不僅應用於傳統的web頁面開發，而且還能用於移動APP、桌面應用開發，甚至各大網際網路平臺推出的小程式也是借鑑了html5技術。
h5應用相比原生應用來說，使用者體驗上會有一些差異，因此，效能調優非常重要。
對html5的調優可以從以下幾個方面入手：
1。網路調優
網路調優又有以下幾種處理方式：
首先，減小請求體積，對程式碼進行壓縮處理，啟用服務端的GZIP配置等，能有效減小資料傳輸的體積。
其次，減少請求次數，適當的使用一些快取技術，將資料快取到本地，這樣就不需要頻繁向服務端請求資料。增加一些防抖、節流的措施，防止使用者不必要的重複操作，重複請求。
第三，最佳化網路鏈路，使用CDN技術，讓客戶端從最近的網路節點請求資源，減少網路開銷。
最後，還有分頁載入、延時載入、差量載入等可用於不同場景的最佳化。
2。架構最佳化
搭建h5應用，最好採用單頁面應用架構，這樣可以減小瀏覽器切換帶了的額外效能開銷，目前有很多優秀的框架幫我們搭建H5應用，例如：Vue等。另外，Vue等框架的虛擬dom技術，也會大大減少實體dom的操作次數，減小效能開銷。
當然，在具體的開發過程中，資料結構、演算法的最佳化也很重要，這個就跟具體業務場景有關，無法一一列舉。
3。渲染最佳化
需要對瀏覽器渲染的原理有一定的研究，頁面渲染大致四個過程： dom樹解析、渲染樹解析、寫入視訊記憶體、圖形繪製。
dom樹的解析，是對整個文件的html、css結構進行解析，因此html、css的結構越簡潔，巢狀的層級越少，解析效率就會越高。
渲染樹的解析，是根據html與css解析結果，計算出每個元素的實際顯示效果。而寫入視訊記憶體，則是將計算好的渲染樹，寫入到顯示器的記憶體。這2個過程，需要減少重繪的發生，否則很影響效能。簡單的說一下重繪，改變一個元素的寬高，會影響整個佈局重新排版，這就是重繪，如果改變背景色則不會影響其它佈局。因此儘量避免重繪操作，例如，給圖片設定固定大小，就不會因為網路載入過程中，圖片尺寸變化，導致整個頁面佈局排版變化。
最後是圖形繪製，顯示器根據重新整理頻率，將記憶體中的影象，繪製到螢幕的畫素點上。這裡我們需要儘量避免一些效能消耗較大的顯示效果，如：陰影、圓角，另外如果需要動畫效果的話，則儘量使用css3實現，css3動畫會啟用硬體加速。
