談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。

緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減少DNS查找等

請求數量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態資源延遲加載。

請求帶寬：壓縮文件，開啟GZIP，

代碼層面的優化

• 用hash-table來優化查找

• 少用全局變量

• 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能

• 用setTimeout來避免頁面失去響應

• 緩存DOM節點查找的結果

• 避免使用CSS Expression

• 避免全局查詢

• 避免使用with(with會創建自己的作用域，會增加作用域鏈長度)

• 多個變量聲明合并

• 避免圖片和iFrame等的空Src?？誗rc會重新加載當前頁面，影響速度和效率

• 盡量避免寫在HTML標簽中寫Style屬性

移動端性能優化

• 盡量使用css3動畫，開啟硬件加速。
• 適當使用touch事件代替click事件。
• 避免使用css3漸變陰影效果。
• 可以用transform: translateZ(0)來開啟硬件加速。
• 不濫用Float。Float在渲染時計算量比較大，盡量減少使用
• 不濫用Web字體。Web字體需要下載，解析，重繪當前頁面，盡量減少使用。
• 合理使用requestAnimationFrame動畫代替setTimeout
• CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引發手機過耗電增加
• PC端的在移動端同樣適用

轉載于:https://www.cnblogs.com/suajiu9/p/6388709.html

總結

以上是生活随笔為你收集整理的分享性能优化问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。