前端性能優化方面建議

  • 字符串拼接會比較影響性能,這時可以採用將每段字符串放入數組中,最後調用join方法輸出整段字符串

  • 採用事件委託來提高性能,當遇到比如給某個table下面所有的tr綁定事件處理函數,這時候如果全部綁定,由於綁定的事件處理函數比較多,會佔用太多內存。因爲事件是會冒泡的,所以可以在table元素上面綁定事件處理函數,其中IE瀏覽器中使用event.srcElement,兼容DOM的瀏覽器中可以使用event.target來獲取事件的目標元素。其中event對象在IE中的attachEvent函數中可以使用window.event來獲取,在兼容DOM的瀏覽器中的addEventListener函數中event對象是傳入的第一個參數,通過判斷target來檢查是否是在tr元素上面觸發事件,進行下面的邏輯

  • 與後端做交互時儘量使用異步的方式

  • 將js和css文件壓縮,來縮短加載js和css文件的時間

  • 使用惰性載入函數:比如創建XMLHttpRequest對象,因爲瀏覽的差異,每次創建都要包含大量的if語句,很影響性能。這時可以使用惰性載入函數,在第一次調用時在if語句判斷後,將創建XMLHttpRequest對象的方法換成在該瀏覽器下特定的創建方法,下一次進來就不需要判斷了

  • 避免過多的DOM操作,遍歷數據而非遍歷DOM

  • 合併文件來減少http的請求,比如將多個css文件合併成一個文件,使用css sprites技術,比如設置圖表的背景圖時,使用背景圖絕對定位,而非一個圖標使用一個背景圖。

  • 減少DOM數量


前端悟飯

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章