前端性能優化&&網站性能優化

加載優化：一、合併css、JavaScript
　　　　　二、合併小圖片，使用精靈圖
　　　　　三、緩存一切可緩存的資源
　　　　　四、使用長cache
　　　　　五、使用外聯式引用css、JavaScript
　　　　　六、壓縮HTML、CSS、JavaScript
　　　　　七、使用Gzip壓縮內容
　　　　　八、使用首屏加載
　　　　　九、使用按需加載
　　　　　十、使用滾屏加載
　　　　　十一、經過Media Query加載
　　　　　十二、增長loading進度條
　　　　　1三、減小cookie
　　　　　1四、避免重定向
　　　　　1五、異步加載第三方資源
圖片優化：一、使用智圖 http://zhitu.tencent.com/
　　　　　二、使用css三、svg、iconfont代替圖片
　　　　　三、使用srcset
　　　　　四、webP優於jpg
　　　　　五、png8優於gif
　　　　　六、首次加載不超過1014kb（基於3秒聯通平均網速所能達到值）
　　　　　七、圖片不寬於640

css優化：一、css寫在頭部，JavaScript寫在尾部或異步
　　　　  二、不要讓link、script、img、iframe等標籤出現空的src和href
　　　　  三、儘可能避免重設圖片大小
 　　　　 四、圖片儘可能避免使用dataUrl
　　　　  五、儘可能避免寫標籤屬性
　　　　  六、避免css表達式
 　　　　 七、清除空的css
　　　　  八、正確使用display的屬性
　　　　  九、不濫用float
　　　　  十、不濫用web字體
　　　　  十一、不聲明過多的font-size
　　　　  十二、值爲0的時候不須要任何單位
　　　　  1三、標準化各類瀏覽器的前綴
　　　　  1四、避免冗長的選擇符

腳本優化：一、減小重繪和迴流
　　　　　二、緩存DOM選擇與計算
　　　　　三、儘可能使用事件代理，避免批量綁定事件
　　　　　四、儘可能使用ID選擇器
　　　　　五、使用touchstart、touchend代替click
　　　　　六、合理使用節流和防抖
　　　　　七、避免沒必要要的跳轉，合理取消瀏覽器默認事件
　　　　　八、避免404
　　　　　九、配置ETags
　　　　　十、少用全局變量，儘可能用局部變量
　　　　    十一、多個變量或常量合併聲明

渲染優化：一、HTML使用viewport
　　　　    二、減小DOM節點
　　　　    三、儘可能使用css3動畫
　　　　　四、合理使用requestAnimationFrame動畫代替setTimeout
　　　　　五、適當使用canvas動畫
　　　　　六、Touchmove、Scroll事件會致使屢次渲染
　　　　　七、使用css3 transitions、css3 3D transforms、Opacity、Canvas、WebGL、Video來觸發GPU渲染

 

 

 

 

 

總結一下：

　　使用正確的盒子嵌套，避免空標籤，空屬性
　　避免冗長的選擇器
　　標準化各類瀏覽器的前綴
　　使用精靈圖，減小與服務器請求
　　避免使用標籤屬性
　　值爲0的時候不須要帶單位
　　儘可能不要重設圖片尺寸
　　webP優於jpg，png8優於gif
　　使用節流和防抖
　　使用預加載和懶加載，異步加載第三方資源
　　使用壓縮工具，合併壓縮HTML、css、JavaScript
　　使用長鏈接
　　減小cookie
　　使用事件委託
　　避免沒必要要的跳轉，合理使用取消瀏覽器默認事件
　　少用全局變量，多用局部變量，多個變量或常量能夠合併聲明
　　合理使用requestAnimationFrame動畫代替setTimeout