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

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：黃條代表每秒可執(zhí)行測試函數(shù)的次數(shù)，當然越多越快。

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

document.getElementById更加耗時些。務(wù)必減少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引擎內(nèi)部存儲變量的結(jié)構(gòu)有關(guān)，JavaScript是弱類型語言，它不像強類型語言如C、C++那樣可以通過內(nèi)存地址偏移來快速訪問。

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

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

測試代碼來自JSLitmus官網(wǎng)主頁的例子

// 很多開發(fā)者不知道變量作用域?qū)τ谀_本的性能有多少影響。
// 為了直觀地展示這一點，我們寫了下面的JSLitmus測試用例去測量對定義在不同作用域下的變量
// 執(zhí)行"遞增（++）"操作的表現(xiàn)

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

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

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

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

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

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

這些測試代碼來自，JSLitmus官網(wǎng)的例子

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

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

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

// 循環(huán)測試調(diào)用一個定義在本地作用域函數(shù)的消耗。
// 這個應(yīng)該比前者更快，一個原因是使用循環(huán)測試更準確，另一個原因是函數(shù)定義在本地作用域了
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;
});

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

// 循環(huán)測試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");
});

// 呵呵，如果在循環(huán)的外面定義正則表達式對象會有幫助嗎？
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對象設(shè)置到元素的innerHTML中的速度如何？
// 因為這個操作一定很慢，所以就不需要循環(huán)測試了
JSLitmus.test("set Element.innerHTML", function() {
  document.getElementById("test_element").innerHTML = new Date();
});

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

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

web性能優(yōu)化--高性能javascript