Javascript最初是詮釋型言語，如今，主流瀏覽器內置的Javascript引擎基本上都完成了Javascript的編譯實行，即使如此，我們仍須要優化自身寫的Javascript代碼，以取得最好機能。

注重作用域

防止全局作用域

在之前的文章Javascript 變量、作用域和內存題目提到過，因為接見變量須要在作用域鏈上舉行查找，比擬於局部變量，接見全局變量的開支更大，因而以下代碼：

var person = {
    name: "Sue",
    hobbies: ["Yoga", "Jogging"]
};
function hobby() {
    for(let i=0; i<person.hobbies.length; i++) {
        console.log(person.hobbies[i]);
    }
}

能夠舉行以下優化：

function hobby() {
    let hobbies = person.hobbies;
    for(let i=0; i<hobbies.length; i++) {
        console.log(hobbies[i]);
    }
}

把須要頻仍接見的全局變量賦值到局部變量中，能夠減小查找深度，進而優化機能。
固然，上述優化過的代碼依然有不足的處所，背面的部份會提到。

防止運用with

為何防止運用with?

1. with並非必需的，運用局部變量能夠到達一樣的目的
2. with建立了自身的作用域，相當於增加了作用域內部查找變量的深度

舉一個例子：

function test() {
    var innerW = "";
    var outerW = "";
    with(window) {
        innerW = innerWidth;
        outerW = outerWidth;
    }
    return "Inner W: " + innerW + ", Outer W: " + outerW;
}
test()
// "Inner W: 780, Outer W: 795"

上述代碼中，with作用域減小了對全局變量window的查找深度，不過與此同時，也增加了作用域中局部變量innerW和outerW的查找深度，功過相抵。
因而我們不如運用局部變量替代with：

function test() {
    var w = window;
    var innerW = w.innerWidth;
    var outerW = w.outerWidth;
    return "Inner W: " + innerW + ", Outer W: " + outerW;
}

上述代碼依然不是最優的。

算法龐雜度

一下錶格列出了幾種算法龐雜度：

O(1)

假如我們直接運用字面量，或許接見保存在變量中的值，時刻龐雜度為O(1)，比方：

var value = 5;
var sum = 10 + value;

上述代碼舉行了三次常量查找，分別是5，10，value，這段代碼團體龐雜度為O(1)
接見數組也是時刻龐雜度為O(1)的操縱，以下代碼團體龐雜度為O(1)：

var values = [1, 2];
var sum = values[0] + values[1];

防止不必要的屬性查找

在對象上接見屬性是一個O(n)的操縱，Javascript 面向對象的順序設計(原型鏈與繼續）文中提到過，接見對象中的屬性時，須要沿着原型鏈追溯查找，屬性查找越多，實行時刻越長，比方：

var persons = ["Sue", "Jane", "Ben"];
for(let i=0; i<persons.length; i++) {
    console.log(persons[i]);
}

上述代碼中，每次輪迴都邑比較i<persons.length，為了防止頻仍的屬性查找，能夠舉行以下優化：

var persons = ["Sue", "Jane", "Ben"];
for(let i=0, len = persons.length; i<len ; i++) {
    console.log(persons[i]);
}

即假如輪迴長度在輪迴開始時即可肯定，就將要輪迴的長度在初始化的時刻聲明為一個局部變量。

優化輪迴

因為輪迴時重複實行的代碼，動輒上百次，因而優化輪迴時機能優化中很主要的部份。

減值迭代

為何要舉行減值迭代，我們比較以下兩個輪迴：

var nums = [1, 2, 3, 4];
for(let i=0; i<nums.length; i++) {
    console.log(nums[i]);
}

for(let i=nums.length-1; i>-1; i--) {
    console.log(nums[i]);
}

兩者有以下區分：

1. 迭代遞次差別
2. 前者支撐動態增減數組元素，後者不支撐
3. 後者機能優於前者，前者每次輪迴都邑盤算nums.length，頻仍的屬性查找下降機能

因而，出於機能的斟酌，假如不在乎遞次，迭代長度初始即可肯定，運用減值迭代更優。

簡化停止前提

上述情況，我們也能夠不運用減值迭代，即像上文提到過的，在初始化時行將迭代長度賦值給一個局部變量。

簡化輪迴體

輪迴體應最大水平地被優化，防止舉行不必要的麋集的盤算

運用while輪迴

為何運用while輪迴，我們能夠比較以下兩個輪迴：

var len = nums.length;
for(let i=0; i<len; i++) {
    console.log(nums[i]);
}

var i = nums.length ;
while(--len > -1) {
    console.log(nums[len]);
}

以上兩個輪迴有一個很明顯的差別點：while輪迴將每次輪迴停止前提的推斷和index的自增兼并為一個語句，在後續部份會講解語句數目與機能優化的關聯。

睜開輪迴

因為豎立輪迴和處置懲罰停止前提須要分外的開支，因而假如輪迴次數比較少，而且能夠肯定，我們能夠將其睜開，比方：

process(nums[0]);
process(nums[1]);

假如迭代次數不能事前肯定，能夠運用Duff裝配，个中比較有名的是Andrew B. King提出的一種Duff手藝，經由過程盤算迭代次數是不是為8的倍數將輪迴睜開，將“零頭”與“整數”分紅兩個零丁的do-while輪迴，在處置懲罰大數據集時優化效果明顯:

var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var i = 0;
if (leftover > 0){
do {
process(values[i++]);
} while (--leftover > 0);
}
do {
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
} while (--iterations > 0);

防止兩重詮釋

eval() Function() setTimeout()能夠傳入字符串，Javascript引擎會將其剖析成能夠實行的代碼，意味着，Javascript實行到這裏須要分外開一個詮釋器來剖析字符串，會明顯下降機能，因而：

1. 只管防止運用eval()
2. 防止運用Function組織函數，用平常function來替代
3. setTimeout()傳入函數作為參數

其他

運用原生要領

原生要領都是用C/C++之類的編譯言語寫出來的，比Javascript快很多。

運用switch語句

多個if-else能夠轉換為switch語句，還能夠根據最能夠到最不能夠排序case

運用位運算符

當舉行數學運算的時刻，位運算操縱要比任何布爾運算或許算數運算快。挑選性地用位運算替代算數運算能夠極大提拔龐雜盤算的機能。諸如取模，邏輯與和邏輯或都可

以斟酌用位運算來替代。

書中的這段話筆者示意不能明白，因為運用&& ||做邏輯推斷時，有的時刻只須要求得第一個表達式的效果便能夠完畢運算，而& |不管怎樣都要求得兩個表達式的效果才能夠完畢運算，因而後者的機能沒有占太大上風。
這裏，補充一下位運算符怎樣發揮邏輯運算符的功用，首先看幾個例子：

7 === 7 & 6 === 6
1
7 === 7 & 5 === 4
0
7 === 7 | 6 ===6
1
7 === 7 | 7 ===6
1
7 === 6 | 6 === 5
0

或許你會豁然開朗，位運算符並沒有發生true 或 false，它只是利用了Number(true) === 1 Number(false) === 0 Boolean(1) === true Boolean(0) === false。

最小化語句數

Javascript代碼中的語句數目會影響實行的速率，只管組合語句，能夠削減劇本的實行時刻。

多個變量聲明

當我們須要聲明多個變量，比方：

var name = "";
var age = 18;
var hobbies = [];

能夠做以下優化：

var name = "",
    age = 18,
    hobbies = [];

兼并迭代值

上文中我們提到一個例子，運用while輪迴能夠兼并自減和推斷停止前提，我們還能夠換一種寫法：

var i = nums.length ;
while(len > -1) {
    console.log(nums[len--]);
}

行將自減與運用index取值兼并為一個語句。

運用字面量建立數組和對象

行將以下代碼：

var array = new Array();
array[0] = 1;
array[1] = 2;

var person = new Object();
person.name = "Sue";
person.age = 18;

替代成：

var array = [1, 2];
var person = { name:"Sue", age:18 };

省了4行代碼。

優化DOM操縱

DOM操縱是最拖累機能的一方面，優化DOM操縱能夠明顯進步機能。

最小化現場更新的次數

假如我們要修正的DOM已顯現在頁面，那末我們就是在做現場更新，因為每次更新瀏覽器都要從新盤算，從新襯着，異常斲喪機能，因而我們應當最小化現場更新的次數，比方我們要向頁面增加一個列表：

var body = document.getElementsByTagName("body")[0];
for(let i=0; i<10; i++) {
    item = document.createElement("span");
    body.appendChild(item);
    item.appendChild(document.createTextNode("Item" + i));
}

每次輪迴時都邑舉行兩次現場更新，增加div，為div增加筆墨，統共須要20次現場更新，頁面要重繪20次。
現場更新的機能瓶頸不在於更新的大小，而在於更新的次數，因而，我們能夠將一切的更新一次繪製到頁面上，有以下兩個要領：

文檔片斷

能夠運用文檔片斷先網絡好要增加的元素，末了在父節點上挪用appendChild()將片斷的子節點增加到父節點中，注重，片斷自身不會被增加。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="container" style="with: 100px; height: 100px; border: 1px solid black;">
            <div id="child">this</div>
        </div>
        <script>
            var container = document.getElementById("container"),
                fragment = document.createDocumentFragment(),
                item,
                i;
            for (i=0; i < 10; i++) {
              item = document.createElement("li");
              fragment.appendChild(item);
              item.appendChild(document.createTextNode("Item " + i));
            }
            container.appendChild(fragment);
        </script>
    </body>
</html>

innerHTML

運用innerHTML與運用諸如createElement() appendChild()要領有一個明顯的區分，前者運用內部的DOM來建立DOM構造，後者運用JavaScript的DOM來建立DOM構造，前者要快很多，之前的例子用innerHTML改寫為：

var ul = document.getElementById("ul"),
    innerHTML = "";
for(let i=0; i<10; i++) {
    innerHTML += "<li>Item " + i + "</li>";
}
ul.innerHTML = innerHTML;

整合冒泡事宜處置懲罰

頁面上的事宜處置懲罰順序數目與頁面響應用戶交互的速率之間存在負相干，詳細緣由有多方面：

1. 建立函數會佔用內存
2. 綁定事宜處置懲罰要領時，須要接見DOM

因而關於冒泡事宜，只管由父元素以至先人元素代子元素處置懲罰，如許一個事宜處置懲罰要領能夠擔任多個目的的事宜處置懲罰，比方：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="container" style="with: 100px; height: 100px; border: 1px solid black;">
            <div id="child">this</div>
        </div>
        <script>
            var container = document.getElementById("container");
            container.addEventListener("click", function(e) {
                switch(e.target.id) {
                    case "container":
                        console.log("container clicked");
                        break;
                    case "child":
                        console.log("child clicked");
                        break;
                }
            },false);
        </script>
    </body>
</html>

注重HTMLCollection

接見HTMLCollection的價值異常高貴。
下面的每一個項目（以及它們指定的屬性）都返回 HTMLCollection：

1. Document (images, applets, links, forms, anchors)
2. form (elements)
3. map (areas)
4. select (options)
5. table (rows, tBodies)
6. tableSection (rows)
7. row (cells)