摘要：性能測試工具操作測試代碼測試結果黃條代表每秒可執行測試函數的次數，當然越多越快。務必減少操作，減少無意義的路徑的查找。其他測試測試代碼這些測試代碼來自，官網的例子這是一個空的非循環測試。正則表達式測試，數組的，新建日期，稍微慢了些。

JSLitmus

function domTestDepthOne () {
    document.getElementById("domTestWrap")
}
function domTestDepthOneQS () {
    document.querySelector("#domTestWrap")
}
function domTestDepthTwo () {
    document.getElementById("domTestWrap").getElementsByClassName("dom-test-content")
}
function domTestDepthTwoQSA () {
    document.querySelectorAll("#domTestWrap .dom-test-content")
}
function domTestDepthThree () {
    var domTestTextList = document.getElementById("domTestWrap").getElementsByClassName("dom-test-content")
    for (var i=0; i< domTestTextList.length; i++) {
        domTestTextList[i].innerHTML
    }
}
function domTestDepthThreeQSA () {
    var domTestTextList = document.querySelectorAll("#domTestWrap .dom-test-content")
    for (var i=0; i< domTestTextList.length; i++) {
        domTestTextList[i].innerHTML
    }
}
JSLitmus.test("dom test depth one", domTestDepthOne)
JSLitmus.test("dom test depth one query selecter", domTestDepthOneQS)
JSLitmus.test("dom test depth two", domTestDepthTwo)
JSLitmus.test("dom test depth two query selecter all", domTestDepthTwoQSA)
JSLitmus.test("dom test depth three query", domTestDepthThree)
JSLitmus.test("dom test depth three query selecter all", domTestDepthThreeQSA)

PS：黃條代表每秒可執行測試函數的次數，當然越多越快。

dom操作非常耗時，querySelector&querySelectorAll書寫方便但相比

document.getElementById更加耗時些。務必減少dom操作，減少無意義的dom路徑的查找。

var objectTest = {
    one : {
        name: "one",
        value: 1,
        two: {
            name: "two",
            value: 2,
            three: {
                name: "three",
                value: 3
            }
        }
    }
}

var three = objectTest.one.two.three;
function objectTestDepthZero () {
    three.name
    three.value
}

function objectTestDepthThree () {
    objectTest.one.two.three.name
    objectTest.one.two.three.value
}


JSLitmus.test("object test depth zero", function (count) {
    while (count -- ) objectTestDepthZero()
})
JSLitmus.test("object test depth three", function (count) {
    while (count -- ) objectTestDepthThree()
})

對象屬性的訪問非常耗時，原因于JavaScript引擎內部存儲變量的結構有關，JavaScript是弱類型語言，它不像強類型語言如C、C++那樣可以通過內存地址偏移來快速訪問。

可以參考，用最簡單易懂的道理告訴你，為什么JavaScript在現代引擎（V8，JavaScriptCore）下，能表現出卓越性能！

務必減少對象嵌套的深度，減少無意義的對象路徑的查找

測試代碼來自JSLitmus官網主頁的例子

// 很多開發者不知道變量作用域對于腳本的性能有多少影響。
// 為了直觀地展示這一點，我們寫了下面的JSLitmus測試用例去測量對定義在不同作用域下的變量
// 執行"遞增（++）"操作的表現

// 首先，測試定義在全局作用域的變量
var global_var = 1;
JSLitmus.test("global", function(count) {
  while (count--) global_var++;}
);

// 現在測試一個定義在局部函數作用域的變量
JSLitmus.test("local", function(count) {
  var local_var = 1;
  while (count--) local_var++;
});

// 嘗試測試一個綁定到立即執行函數內的變量。
// 喜歡Prototype和JQuery的開發者應該覺得這樣特別有意思
JSLitmus.test("closure",
  (function() {
    var closure_var = 1;
    return function(count) {while (count--) closure_var++;}
  })()
);

// 還是綁定在立即執行函數中的變量，不過這次套了兩層
JSLitmus.test("multi-closure",
  (function() {
    var multi_var = 1;
    return (function() {
      return function(count) {while (count--) multi_var++;}
    })()
  })()
);

// 測試一個空的函數調用，這可以作為一個參照點
JSLitmus.test("empty function call", function(count) {
  var f = function() {};
  while (count--) f();
});

每次訪問變量或者函數都會進行一次作用域冒泡的過程，所以本地作用域如函數作用域是最快的，全局作用域最慢。
應該要盡量減少這個冒泡的層數，對于要經常訪問的全局變量，應該在本地作用域做一個緩存。

這些測試代碼來自，JSLitmus官網的例子

// 這是一個空的非循環測試。它的結果應該是一秒可以做無限次，或者非常接近無限的一個值
JSLitmus.test("empty test (non-looping)", function() {});

// 這是一個空的循環測試，對于這種執行非常快的代碼，需要執行更多次才能得到比較準確的結果
// 所以經常使用循環測試
// 它的結果應該是一秒可以做無限次，或者非常接近無限的一個值
JSLitmus.test("empty test", function(count) {
  while (count--);
});

// 測試調用一個定義在全局作用域的函數的消耗
var emptyFunction = function() {};
JSLitmus.test("function overhead (non-looping)", function() {
  emptyFunction();
});

// 循環測試調用一個定義在本地作用域函數的消耗。
// 這個應該比前者更快，一個原因是使用循環測試更準確，另一個原因是函數定義在本地作用域了
JSLitmus.test("function overhead", function(count) {
  var f = emptyFunction;
  while (count--) f();
});

// 測試Array.join()方法，然后我們可以看看它和字符串"+"操作的對比
JSLitmus.test(""hello" + "world" (non-looping)", function() {
  var a = "hello", b = "world", x;
  x = a+b;
});

// 循環測試Array.join()方法，然后我們可以看看它和字符串"+"操作的對比
JSLitmus.test(""hello" + "world"", function(count) {
  var a = "hello", b = "world", x;
  while(count--) x = a+b;
});

// 循環測試Array.join()方法，然后我們可以看看它和字符串"+"操作的對比
JSLitmus.test("string join()", function(count) {
  var a = ["hello", "world"];
  while (count--) a.join();
});

// Math.random()是快還是慢呢？
JSLitmus.test("Math.random()", function(count) {
  while (count--) Math.random();
});

// 正則表達測試有多快呢？讓我們來一探究竟
JSLitmus.test("RegExp.test()", function(count) {
  while (count--) /rl/.test("hello world");
});

// 呵呵，如果在循環的外面定義正則表達式對象會有幫助嗎？
JSLitmus.test("cached RegExp.test()", function(count) {
  var re = /rl/;
  while (count--) re.test("hello world");
});

// 新建Date對象的速度怎樣？是快還是慢？
JSLitmus.test("new Date()", function(count) {
  while (count--) new Date();
});

// 如果我們把Dete對象設置到元素的innerHTML中的速度如何？
// 因為這個操作一定很慢，所以就不需要循環測試了
JSLitmus.test("set Element.innerHTML", function() {
  document.getElementById("test_element").innerHTML = new Date();
});

// 測試一個數組的創建，這個可以作為一個參照物
JSLitmus.test("new Array()", function(count) {
  while (count--) {var a = [];}
});

圖中，Infinity的測試代表非常快，其中，空函數的調用，字符串的"+"的拼接都非常快。
Math.random()與新建一個數組也比較快。
正則表達式測試，數組的join，新建日期，稍微慢了些。
最后，設置innerHTML的dom操作最慢。

web性能優化--高性能javascript