提高頁面性能的方法

一、原則
（1）多使用內存、緩存或者其餘方法。
（2）減小cpu佔用，減小網絡。

提高頁面性能的方法有哪些？

1、加載頁面和靜態資源
一、靜態資源壓縮合並，減小http請求。
（1）減小http請求數量
（2）減小請求資源大小
二、非核心代碼異步加載。
三、靜態資源緩存：經過連接名稱控制緩存，只有內容改變的時候，連接名稱纔會改變。
四、利用瀏覽器緩存
五、使用cdn讓資源加載更快
六、預解析dns
七、使用ssr後端渲染，數據直接輸出到html中（ssr：server site render）
2、頁面渲染
一、css、js及放置位置
（1）儘可能避免在HTML標籤中寫style屬性
（2）css放前面，js放後面。
（3）避免使用CSS Expression
二、圖片
（1）避免圖片和iFrame等的空Src。空Src會從新加載當前頁面，影響速度和效率
（2）懶加載（圖片懶加載，下拉加載更多）

三、dom操做
（1）減小dom查詢，對dom查詢作緩存。

（2）減小dom操做，多個操做盡可能合併在一塊兒執行。

（3）用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能
四、事件
（1）儘早執行操做（如DOMContentLoaded）
（2）事件節流

五、代碼細節優化
（1）用hash-table來優化查找
（2）多個變量聲明合併
（3）少用全局變量
（4）避免全局查詢
（5）避免使用with(with會建立本身的做用域，會增長做用域鏈長度)
（6）用setTimeout來避免頁面失去響應
3、移動端性能優化
一、css
（1）不濫用Float。Float在渲染時計算量比較大，儘可能減小使用
（2）不濫用Web字體。Web字體須要下載，解析，重繪當前頁面，儘可能減小使用。
（3）避免使用css3漸變陰影效果。
二、css動畫
（1）儘可能使用css3動畫，開啓硬件加速。
能夠用transform: translateZ(0)來開啓硬件加速。
CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長
三、合理使用requestAnimationFrame動畫代替setTimeout
四、適當使用touch事件代替click事件。
————————————————