JS 一些優化性能的小細節

Github博客: github.com/aototo/blog
喜歡的朋友star 支持一下

Js高性能優化小結

謹慎使用閉包

因爲閉包[[Scope]] 屬性包含與執行環境做用域鏈相同的對象引用，函數活動對象原本會隨着執行環境完畢後一同銷燬，但引入閉包，對象沒法被銷燬。

閉包會形成更多的內存開銷，同時IE下還會形成內存泄露。

緩存對象成員

在同一個函數中，若是存在屢次讀取同一個對象成員，能夠在局部函數中保存對象，減小查找。

function getWindowWH() {
    var elBody = document.getElementsByTagName('body')[0];
    return {
        width: elBody.offsetWidth,
        height: elBody.offsetHeight
    }
}複製代碼

同時也解決了屬性越深，訪問速度越慢的問題。

DOM 操做

訪問DOM的次數越多，代碼運行的速度越慢，統一的保存結果最後在一併輸出。 例子：

function innerHTMLLoop() {
     var content = '';

     for (var count = 0; count < 10000; count++){
         content += 'a';
     }

     document.getElementById("idName").innerHTML += content;     
}複製代碼

重繪(repaints)與重排(reflows)

當頁面佈局和幾何屬性改變時就須要＂重排＂

避免在修改樣式的過程當中使用 offsetTop, scrollTop, clientTop, getComputedStyle() 這些屬性, 它們都會刷新渲染隊列

• 最小化重繪和重排, 儘可能一次處理

  1. 使元素脫離文檔流(隱藏元素
  2. 使用 documentFragment
  3. 將原始元素拷貝到一個脫離文檔的節點中, 修改副本, 完成後再替換原始元素)

事件委託

當有不少元素須要綁定事件的時候，咱們一個一個的去綁定事件是有代價的的，元素越多應用程序越慢。事件綁定不但佔用了處理時間，而且追蹤事件須要更多的內存，有時候不少元素是不須要，或者是用戶不會點擊的，因此咱們須要使用事件委託來解決沒有必要的資源消耗。

例子： 咱們需監聽li的click事件，經過冒泡事件來獲取點擊的對象。

<ul> <li index='1'>1</li> <li index='2'>2</li> <li index='3'>3</li> </ul>複製代碼

var ul = document.getElementById('ul');

ul.addEventListener('click', function(e) {
  var now_index = e.target.getAttribute('index');
  ...
})複製代碼

循環性能

通常的for語句可能不少人都這麼寫

for(var i = 0; i < array.length; i++){
    ....
}複製代碼

每次循環的時候須要查找array.length，這樣不但很耗時，也形成性能損失。只要查找一次屬性，存儲在局部變量，就能夠提升性能。

for(var i = 0, len = array.length; i < len; i++){
    ....
}複製代碼

重寫後的循環根據數組的長度能優化25%的運行時間，IE更多。因此平時書寫的時候仍是要多加註意。同時仍是要避免使用for-in循環。

條件語句

if-else 對比 switch， 當條件語句較多的時候switch 更易讀，運行的要更快。因此但條件少的狀況下使用if-else，當條件增長時，更傾向於switch，會更佳合理。

避免使用構造器

經過避免使用eval()和Function()構造器來避免雙重求值帶來的性能消耗。好比：

eval('2 + 2');  複製代碼

使用 Object/Array 直接量

直接量的速度回更快。

//bad
var myObject = new Object();
myObject.name = "xxxx";

//good
var myObject = {
    name: "xxxx"
}複製代碼