移動H5前端性能優化

移動H5前端優化，從如下幾個方面入手：

一、加載優化

二、圖片優化

三、css優化

四、腳本優化

五、渲染優化

加載優化

一、合併CSS、JS

二、合併小圖片，使用雪碧圖

三、緩存一切可緩存的資源

四、使用長Cache

五、使用外聯式引用CSS、JS

六、壓縮HTML、CSS、JS

七、啓用GZip

八、使用首屏加載

九、使用按需加載

十、使用滾屏加載

十一、使用Media Query加載

十二、增長Loading進度條

1三、減小Cookie

1四、避免重定向

1五、異步加載第三方資源

圖片優化

一、使用智圖

二、使用（CSS三、SVG、IconFont）代替圖片

三、使用Srcset

四、webP優於JPG

五、PNG8優於GIF

六、首次加載不大於1014KB（基於3秒聯通平均網速所能達到值）

七、圖片不寬於640

CSS優化

一、CSS寫在頭部，JS寫在尾部或異步

二、避免圖片和iFame等的空src

三、儘可能避免重設圖片大小

四、圖片儘可能使用DataURL

五、儘可能避免在HTML標籤中些style屬性

六、避免css表達式

七、移除空的CSS規則

八、正確使用display屬性

九、不濫用float

十、不濫用web字體

十一、不聲明過多的font-size

十二、值爲0時不須要任何單位

1三、標準化各類瀏覽器前綴

1四、避免讓選擇符看起來像正則表達式

腳本優化

一、儘可能減小重繪和迴流

二、緩存DOM選擇和計算

三、緩存列表、length

四、儘可能使用事件代理，避免批量綁定事件

五、儘可能使用ID選擇器

六、使用touchstart、touchend代替click

渲染優化

一、HTML使用Viewport

二、減小DOM節點

三、儘可能使用CSS3動畫

四、合理使用requestAnimationFrame動畫代替setTimeout

五、適當使用Canvas動畫

六、Touchmove、Scroll事件會致使屢次渲染

七、使用CSS3 transition、CSS3 3D transforms、opacity、canvas、WebGL、video來觸發GPU渲染

 

後續須要展開對每一項進行闡述   以此提醒本身