webapp前端效能最佳化規範

標籤：

 

載入最佳化
　　合并css javascript
　　合并小圖片 使用雪碧圖
　　緩衝一切可快取的資源
　　使用長的cache
　　使用外鏈式引用css,javascript
　　壓縮HTML,CSS,JAVASCRPT
　　啟用GZip
　　使用首屏載入
　　使用按需載入
　　使用滾屏載入
　　通過Media Query載入
　　增加Loading進度條
　　減少cookie
　　避免重新導向
　　非同步載入第三方資源
css最佳化
　　css卸載頭部，javascript寫在尾部或者非同步
　　避免圖片和iFrame等的空Src
　　盡量避免重設圖片大小
　　圖片盡量避免使用DataURL
　　盡量避免寫在HTML標籤中寫Style屬性
　　避免css運算式
　　移除空的css規則
　　正確使用Display的屬性
　　不濫用Float
　　不刊用Web字型
　　不聲明過多的font-size
　　值為0時不需要任何單位
　　標準化瀏覽器首碼
　　避免讓選擇符看起來像Regex
圖片最佳化
　　使用智圖 http://zhitu.tencent.com
　　使用(css3,scg,IconFont)代替圖片
　　使用Srcset
　　webP優於GIF
　　PNG8優於GIF
　　首次載入大不於1014KB
　　圖片不寬於640
　　指令碼最佳化
　　減少重繪和迴流
　　緩衝Dom選擇與計算
　　緩衝列表
　　盡量使用時間代理，避免大量繫結事件
　　盡量使用ID選取器
　　使用touchstart,touchend代替click
渲染最佳化
　　HTML使用Viewport
　　減少Dom節點
　　盡量使用css3動畫
　　合理使用requestAnmationFrame動畫代替setTimeout
　　適當使用Canvas動畫
　　Touchmove,Scroll事件會導致多次渲染
　　使用（css3 transtions,css3 3D transforms,Opacity,Canvas,webGL,Video）來出發GPU渲染

webapp前端效能最佳化規範