[譯]編寫更快、更好的JavaScript的13個技巧

10年前，亞馬遜分享一個例子，每100毫秒的延遲都會是他們損失1%的銷售收入，即在整年中，每增長1秒鐘的加載時間將使該公司損失約16億美圓。一樣，谷歌發現搜索頁面的生成時間增長500毫秒，訪問量將減小20%，潛在的廣告收入也將減小五分之一。

咱們中不多人能夠像谷歌和亞馬遜同樣去處理這種大場面，可是，相同的原則也適用於更小規模的場景，速度更快的代碼能夠帶來更好的用戶體驗，而且對業務更有利。特別是在web開發中，速度可能在與對手競爭中成爲關鍵因素。在較快的網絡上浪費的每個毫秒，就會在較慢的網絡上放大。

在本文中，咱們將探討13種提高JavaScript運行速度的實用技巧，不管你是寫基於Node.js的服務端代碼仍是客戶端的JavaScript代碼。我已經提供了基於https://jsperf.com建立的性能測試用例。若是你想本身測試這些技巧，請確保點擊這些連接。

Do It Less

最快的代碼是那些歷來不會運行的代碼。

1. 刪除無用的功能

開始着手優化已經寫好的代碼是一件很容易的事情，可是，對性能提高最大的方法每每來自於退後一步問問本身爲何咱們的代碼須要出如今這裏。

在繼續某項優化工做以前，問問本身你的代碼是否真的須要作他如今所作的事情。這個功能裏面的組件或者函數是否有必要？若是沒有，請刪掉它。這一步對提高代碼速度很是重要，卻很容易被忽略。

2. 避免無用的步驟

基準測試：https://jsperf.com/unnecessary-steps

在較小的規模上，一個函數運行過程當中執行的每一步都有用麼？舉個例子，爲了達到最終的效果，你的數據是否會陷於一個沒有必要的圈中？下面的示例可能被簡化了，可是，它能表明那些在較大代碼量中很難被發現的問題。

'incorrect'.split('').slice(2).join('');  // converts to an array
'incorrect'.slice(2);                     // remains a string

即便在簡單的例子中，性能上的差別也是十分巨大的，運行某些代碼比不運行任何代碼要慢得多！儘管不多有人會犯上述錯，可是面對更長、更復雜的代碼，在獲取結果的前加上一些毫無價值的步驟就會很容易。儘可能避免它！

Do It Less often

若是你不能刪除代碼，問問你本身能不能減小作這件事情的頻率呢？代碼如此強大的緣由之一是他可使用咱們輕鬆的完成重複的操做，可是，也更容易讓咱們的代碼執行次數超過須要的次數。如下是一些須要注意的特殊狀況。

3. 越早退出循環越好

基準測試：https://jsperf.com/break-loops/1

在一個循環中找出不須要迭代完成的狀況。舉個例子，若是你正在尋找一個特殊值而且已經找到他了，那麼剩下的迭代就已經不須要了。你應該經過使用break語句來中斷正在執行中的循環：

for (let i = 0; i < haystack.length; i++) {
    if (haystack[i] === needle) {
        break;
    }
}

或者，若是，你須要只對循環中某些元素作操做時，你可使用continue語句來跳過對其餘元素進行操做。continue會終止當前迭代中的執行語句，當即跳轉到下一個語句中：

for (let i = 0; i < haystack.length; i++) {
    if (!haystack[i] === needle) {
        continue;
    }
    doSomething();
}

值得注意的是，你也能夠經過break或continue跳過嵌套的循環：

loop1: for (let i = 0; i < haystacks.length; i++) {
    loop2: for (let j = 0; j < haystacks[i].length; j++) {
        if (haystacks[i][j] === needle) {
            break loop1;
        }
    }
}

4. 僅僅初始化一次

基準測試：https://jsperf.com/pre-compute-once-only/6 （譯者在mac下自測，使用/不使用閉包，使用/不使用全局變量，目前對性能影響差別不大）

在咱們的應用中，咱們將會調用數次下列方法：

function whichSideOfTheForce1(name) {
    const light = ['Luke', 'Obi-Wan', 'Yoda'];
    const dark = ['Vader', 'Palpatine'];

    return light.includes(name) ? 'light' : dark.includes(name) ? 'dark' : 'unknown';
}

whichSideOfTheForce1('Luke');
whichSideOfTheForce1('Vader');
whichSideOfTheForce1('Anakin');

這段代碼，咱們每次調用whichSideOfTheForce1時，都會從新建立2次數組，每次調用時都須要給咱們的數組從新分配內存。

提供的數組的值是固定的，那最好的解決辦法就是定義一次，而後在函數中調用它的引用。儘管咱們也能夠全局定義這2個數組變量，可是，這將容許他們在咱們的函數外部被篡改。最好的解決方法是使用閉包，這就意味着他返回的是一個函數：

function whichSideOfTheForceClosure1(name) {
    const light = ['Luke', 'Obi-Wan', 'Yoda'];
    const dark = ['Vader', 'Palpatine'];

    return (name) => (light.includes(name) ? 'light' : dark.includes(name) ? 'dark' : 'unknown');
}
const whichSideOfTheForce2 = whichSideOfTheForceClosure1();

如今，咱們的數組只會初始化一次了。再來看看下面的例子：

function doSomething(arg1, arg2) {
    function doSomethingElse(arg) {
        return process(arg);
    };
    return doSomethingElse(arg1) + doSomethingElse(arg2);
}

每次運行doSomething時，都會從頭開始建立嵌套函數doSomethingElse。 閉包提供瞭解決方案， 若是咱們返回一個函數，doSomethingElse仍然是私有的，但只會建立一次：

function doSomething(arg1, arg2) {
    function doSomethingElse(arg) {
        return process(arg);
    };
    return (arg1, arg2) => doSomethingElse(arg1) + doSomethingElse(arg2);
}

5. 控制代碼的執行順序來保證最小的運行次數

基準測試: https://jsperf.com/choosing-the-best-order/1

若是仔細考慮函數中每一步的執行順序，也能夠幫助咱們提升代碼的執行效率。假設，咱們有一個數組來存儲上平的價格（美分），咱們須要一個函數對商品的價格進行求和並返回結果（美圓）：

const cents = [2305, 4150, 5725, 2544, 1900];

這個函數有2件事情要作，轉化單位和求和，可是這些動做的順序很重要。若是優先處理轉化單位，咱們函數是這樣的：

function sumCents(array) {
    return '$' + array.map(el => el / 100).reduce((x, y) => x + y);
}

在這個方法中，咱們對數組的每一項都須要進行除法，若是改變執行的順序，咱們只須要進行一次除法:

function sumCents(array) {
    return '$' + array.reduce((x, y) => x + y) / 100;
}

優化性能的關鍵就是確保函數以最佳的順序執行。

6. 瞭解代碼的時間複雜度 O(n)

瞭解代碼的時間複雜度是理解爲何某些方法比其餘方法運行的更快，佔用的內存更少的最佳方法之一。例如，你能夠經過使用時間複雜一目瞭然的瞭解爲何二分搜索是效率最好的搜索算法之一，爲何快排是每每是最有效的排序算法。詳細請自行了解時間複雜度

Do It Faster

代碼速度優化收益最大的每每是前面2類。在本節中咱們將討論提升代碼速度的幾種方法，他們更多的是和代碼優化相關，而不是剔除他或者減小運行的次數。

固然，這些優化也要減小代碼的大小或者使其對編譯器更友好，可是，表面上看你只更改了代碼而已。

7. 多用內置函數

基準測試：https://jsperf.com/prefer-built-in-methods/1

對於擁有編譯器和底層語言經驗的人來講，這是一件很明顯的事情。可是，這裏仍是要把它做爲一個基礎規則來提一下，若是JavaScript有內置函數，請使用它。

編譯器代碼在設計時，就針對方法或者對象類型進行了性能優化。另外，內置方法的底層語言是C++。除非你的用例特別具體，不然，你本身的JavaScript代碼不多能比現有內置代碼快。

爲了測試這個，咱們本身來實現一個map方法

function map(arr, func) {
    const mapArr = [];
    for (let i = 0; i < arr.length; i++) {
        const result = func(arr[i], i, arr);
        mapArr.push(result);
    }
    return mapArr;
}

讓咱們來建立一個數組，裏面包含了100個隨機數字（1-100)。

const arr = [...Array(100)].map(e=>~~(Math.random()*100));

咱們來執行一些簡單操做（數字乘2）來比較兩者的差別：

map(arr, el => el * 2);  // Our JavaScript implementation
arr.map(el => el * 2);   // The built-in map method

在個人測試中，咱們本身實現的map方法比原生的Array.prototype.map慢65%。

8. 選擇最佳的數據類型

基準測試1：set.add()vs array.push() https://jsperf.com/adding-to-a-set-vs-pushing-to-an-array

基準測試2：map.set() vs object['xx'] https://jsperf.com/adding-map-vs-adding-object

一樣，最佳的性能也可能來自於選擇合適的內置數據類型。JavaScript中內置的數據類型遠遠不止：Number、String、Function、Object。不少不常見的數據類型若是在正確的場景中使用將會提供很是明顯的優點。

Set和Map在頻繁添加和刪除元素的狀況下有明顯的性能優點。

瞭解內置的對象類型，並嘗試使用最適合你須要的對象類型，這對提高代碼的性能很是有用。

9. 別忘了內存

JavaScript做爲一種高級語言，它爲你處理不少底層細節。內存管理就是其中一個。JavaScript使用一種稱爲垃圾回收（GC）的系統來釋放內存，在不須要開發人員明確指示的狀況下，就能夠自動釋放內存。

儘管內存管理在JavaScript中是自動的，但這並不意味着它是完美的。你也能夠採起其餘步驟來管理內存並減小內存泄漏的機會。

例如，Set和Map有變體WeakSet和WeakMap，他們持有對象的「弱」引用。他們經過確保其中的對象沒有其餘對象引用時觸發垃圾回收，來確保不會出現內存泄漏。

在ES2017以後，你能夠經過TypedArray對象來更好的控制內存的分配。例如，Int8Array能夠放-128到127之間的值，僅僅佔用一個字節。可是，值得注意的是，使用TypedArray的性能提高可能很小：將常規數組與Uint32Array進行比較寫入性能略有改善，但讀取性能卻幾乎沒有改善。

對於底層編程語言有基本的瞭解能夠幫助你編寫更快、更好的JavaScript代碼。

10. 儘量使用單態

基準測試1：https://jsperf.com/monomorphic-forms

基準測試2：https://jsperf.com/impact-of-function-arguments

若是咱們設置const a = 2，則變量a能夠被視爲多態的（能夠更改）。 相反，若是咱們直接使用2，則能夠認爲是單態的（其值是固定的）。

固然，若是咱們須要屢次使用變量，則設置變量很是有用。 可是，若是你只使用一次變量，則徹底避免設置變量會稍快一些。 採起簡單的乘法功能：

// 函數定義
function multiply(x, y) {
    return x * y;
}

若是咱們運行multiply(2, 3)，他比直接運行下面的代碼快1%：

// 定義2個變量做爲multiply的參數
let x = 2, y = 3;
multiply(x, y);

這是一個小勝利，在大型代碼中，性能提高每每是由大量小勝利組成的。

一樣，在函數中使用參數可提供靈活性，但會下降性能。 若是不須要它們，就能夠把它變成一個常量放在函數中，它會略微提升性能。所以，multiply的更快版本以下所示：

// 若是3是固定不變的時候，則直接做爲函數中的一部分
function multiplyBy3(x) {
    return x * 3;
}

結合上述優化，在個人測試中性能提高約爲2％。雖然改動的點比較小，可是若是能夠在大型代碼庫中屢次進行這種改進，就值得考慮了。

譯者注，這裏原文太繞了，你們看看代碼裏面的註釋理解一下

a. 僅在值必須是動態的時才引入函數參數，不然，就寫成函數內部的變量；

b. 僅在屢次使用某一個值時才引入變量，不然，就直接寫值；

11. 避免使用delete

基準測試1: https://jsperf.com/removing-variables-from-an-object/1

基準測試2: https://jsperf.com/delete-vs-map-prototype-delete

delete關鍵詞的做用是用來刪除對象中的某一個屬性。也許你會以爲這個對於你的應用來講頗有用，可是，但願你儘可能別去用它。在v8引擎中，delete關鍵詞消除了hidden class的優點，讓對象變成了一個"慢對象"。

hidden class：因爲 JavaScript 是一種動態編程語言，屬性可進行動態的添加和刪除，這意味着一個對象的屬性是可變的，大多數的 JavaScript 引擎（V8）爲了跟蹤對象和變量的類型引入了隱藏類的概念。在運行時 V8 會建立隱藏類，這些類附加到每一個對象上，以跟蹤其形狀/佈局。這樣能夠優化屬性訪問時間

根據你的需求，可能僅僅將不須要的屬性設置成undefined就夠了。

const obj = { a: 1, b: 2, c: 3 };
obj.a = undefined;

我在網上看過一些建議，他們使用如下的功能去拷貝除去指定屬性以外的對象：

const obj = { a: 1, b: 2, c: 3 };
const omit = (prop, { [prop]: _, ...rest }) => rest;
const newObj = omit('a', obj);

可是，在個人測試中，上面的函數比delete關鍵詞還要慢。另外，它的可讀性也很低。

或者，你能夠考慮使用Map而不是Object，由於，Map.prototype.delete比delete也快不少。

Do It Later

若是你作不到上述3個方面的優化，你也能夠試一試第四類優化，即便運行時間徹底相同也會讓你覺代碼更快。這涉及重構代碼，使總體性較小或要求較高的任務不會阻塞最重要的代碼執行。

12. 使用異步代碼避免線程堵塞

默認狀況下，JavaScript是單線程的，而且會同步的執行代碼。（實際上，瀏覽器代碼可能正在運行多個線程來捕獲事件並觸發處理程序，但就編寫JavaScript代碼而言，它是單線程的）

同步執行對大可能是JavaScript代碼都適用，可是，若是咱們須要執行的代碼須要很長時間，可是，咱們又不想堵塞其餘更重要的代碼執行。

咱們就須要使用異步代碼。像fetch()或者XMLHttpRequest()這些內置方法強制是異步執行的。值得注意的是，任何同步函數均可以異步化：若是你在執行耗時的同步操做，例如對大型數組中的每一個項目執行操做，則可使此代碼異步化，這樣就不會阻止其餘代碼的執行。

此外，在NodeJs中，不少模塊都存在同步方法和異步方法兩種，例如，fs.writeFile()和fs.writeFileSync()。在正常狀況下，請默認使用異步方法。

13. 使用Code Split

若是你在瀏覽器中寫JavaScript，那麼你應該優先確保你的頁面展現的越快越好。「首屏渲染」是一個衡量瀏覽器渲染第一個有效界面時間的關鍵指標。

改善此問題的最佳方法就是經過JavaScript代碼拆分。與其將全部代碼都打包在一塊兒，不如將其拆分紅較小的塊，這樣就能夠預加載更少的JavaScript代碼。根據你是用的引擎不一樣，代碼拆分的方法也不一樣。

Tree-Shaking是一個從代碼庫中剔除無用的代碼的策略，你能夠經過這篇文章tree-shaking來了解他。

總結

確保你的優化策略有效的最佳方案就是測試他們，我在文章中使用[]()測試性能，你也能夠試一試:

• http://jsben.ch/
• https://jsbench.me/
• console.time和consoele.timeEnd

Chrome的開發者工具中的性能和網絡面板是檢查web應用的性能的好工具，同時，我還推薦使用Google的LightHouse。

最後，儘管速度很重要，可是，速度並非好代碼的所有。可讀性和可維護性也很重要，若是爲了提高輕微的性能而致使須要花更多的時間去找BUG並修復它，事情將變得很不值得。

關於我

我是一個莫得感情的代碼搬運工，每週會更新1至2篇前端相關的文章，有興趣的老鐵能夠掃描下面的二維碼關注或者直接微信搜索前端補習班關注。

精通前端很難，讓咱們來一塊兒補補課吧！

好啦，翻譯完畢啦，原文連接在此 13 Tips to Write Faster, Better-Optimized JavaScript。