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時不須要任何單位
　　標準化瀏覽器前綴
　　避免讓選擇符看起來像正則表達式
圖片優化
　　使用智圖 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渲染