摘要：插件性能優化及個人常用優化方法經常會觸發視覺變化。作用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優化時，數值和變量的性能差不多，并且速度顯著優于對象屬性和數組元素。

JavaScript 經常會觸發視覺變化。有時是直接通過樣式操作，有時是會產生視覺變化的計算，例如搜索數據或將其排序。時機不當或長時間運行的 JavaScript 可能是導致性能問題的常見原因。您應當設法盡可能減少其影響。

JavaScript 性能分析可以說是一門藝術，因為您編寫的 JavaScript 代碼與實際執行的代碼完全不像。現代瀏覽器使用 JIT 編譯器和各種各樣的優化和技巧來嘗試為您實現盡可能快的執行，這極大地改變了代碼的動態。

注：如果您真的想了解 JIT 的實例，應當查看 Vyacheslav Egorov 提供的 IRHydra2。它顯示了當 Chrome 的 JavaScript 引擎 V8 對 JavaScript 代碼進行優化時，JavaScript 代碼的中間狀態。

盡管如此，您肯定還是可以做一些事情來幫助您的應用很好地執行 JavaScript。但 Javascript 性能優化絕不是一種書面的技術，借鑒別人的意見和自己平時項目的總結給出以下幾條建議：

當一個變量被引用的時候，JavaScript將在作用域鏈中的不同成員中查找這個變量。作 用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分：局部變量的集合和全局變量的集合。

簡單地說，如果JavaScript引擎在作用域鏈中搜索的深度越大，那么操作也就會消耗更多的時間。引擎首先從 this 開始查找局部變量，然后是函數參數、本地定義的變量，最后遍歷所有的全局變量。

因為局部變量在這條鏈的起端，所以查找局部變量總是比查找全局變量要塊。所以當你想要不止一次地使用一個全局變量的時候，你應該將它定義成局部變量，就像這樣：

var dom1 = document.getElementById("id1"),
dom2 = document.getElementById("id2");

改寫成

var document = document,
demo1 = document.getElementById("id1"),
demo2 = document.getElementById("id2");

雖然你可能還不知道“閉包”，但你可能在不經意間經常使用這項技術。閉包基本上被認為是JavaScript中的new，當我們定義一個即時函數的時候，我們就使用了閉包，比如：

document.getElementById("dom").onclick = function(ev) { };

閉包的問題在于：根據定義，在它們的作用域鏈中至少有三個對象：閉包變量、局部變量和全局變量。這些額外的對象將會導致第1和第2個建議中提到的性能問題。

閉包對于提高代碼可讀性等方面還是非常有用的，只是不要濫用它們（尤其在循環中）。

談到JavaScript的數據，一般來說有4種訪問方式：數值、變量、對象屬性和數組元素。在考慮優化時，數值和變量的性能差不多，并且速度顯著優于對象屬性和數組元素。

因此當你多次引用一個對象屬性或者數組元素的時候，你可以通過定義一個變量來獲得性能提升。（這一條在讀、寫數據時都有效）

雖然這條規則在絕大多數情況下是正確的，但是Firefox在優化數組索引上做了一些有意思的工作，能夠讓它的實際性能優于變量。但是考慮到數組元素在其他瀏覽器上的性能弊端，還是應該盡量避免數組查找，除非你真的只針對于火狐瀏覽器的性能而進行開發。

不使用DOM是JavaScript優化中另一個很大的話題。經典的例子是添加一系列的列表項：如果你把每個列表項分別加到DOM中，肯定會比一次性加入所有列表項到DOM中要慢。這是因為DOM操作開銷很大。

Zakas對這個進行了細致的講解，解釋了由于回流（reflow）的存在，DOM操作是非常消耗資源的?；亓魍ǔ１焕斫鉃闉g覽器重新選渲染DOM樹的處理過程。比如說，如果你用JavaScript語句改變了一個div的寬度，瀏覽器需要重繪頁面來適應變化。

任何時候只要有元素被添加到DOM樹或者從DOM樹移除，都會引發回流。使用一個非常方便的JavaScript對象可以解決這個問題——documentFragment，我并沒有使用過，但是在Steve Souders也表示同意這種做法之后我感覺更加肯定了。

DocumentFragment 基本上是一種瀏覽器以非可視方式實現的類似文檔的片段，非可視化的表現形式帶來了很多優點，最主要的是你可以在 documentFragment 中添加任何結點而不會引起瀏覽器回流。

另外，程序員應該避免在數組中挖得太深，因為進入的層數越多，操作速度就越慢。

簡單地說，在嵌套很多層的數組中操作很慢是因為數組元素的查找速度很慢。試想如果操作嵌套三層的數組元素，就要執行三次數組元素查找，而不是一次。

因此如果你不斷地引用 foo.bar， 你可以通過定義 var bar = foo.bar 來提高性能。

如果針對的是不斷運行的代碼，不應該使用setTimeout，而應該是用setInterval，因為setTimeout每一次都會初始化一個定時器，而setInterval只會在開始的時候初始化一個定時器。

        var timeoutTimes = 0;
        function timeout() {
            timeoutTimes++;
            if (timeoutTimes < 10) {
                setTimeout(timeout, 10);
            }
        }
        timeout();
        //可以替換為：
        var intervalTimes = 0;
        function interval() {
            intervalTimes++;
            if (intervalTimes >= 10) {
                clearInterval(interv);
            }
        }
        var interv = setInterval(interval, 10);

對于小型react前端應用，最好的優化就是不優化因為React本身就是通過比較虛擬DOM的差異，從而對真實DOM進行最小化操作，小型React應用的虛擬DOM結構簡單，虛擬DOM比較的耗時可以忽略不計。而對于復雜的前端項目，我們所指的渲染性能優化，實際上是指，在不需要更新DOM時，如何避免虛擬DOM的比較。

react組件的生命周期

工欲善其事，必先利其器。理解react的組件的生命周期是優化其渲染性能的必備前提。我們可以將react組件的生命周期分為3個大循環：掛載到DOM、更新DOM、從DOM中卸載。React對三個大循環中每一步都暴露出鉤子函數，使得我們可以細粒度地控制組件的生命周期。

掛載到DOM

組件首次插入到DOM時，會經歷從屬性和狀態初始化到DOM渲染等基本流程，可以通過下圖所示

必須注意的是，掛載到DOM流程在組件的整個生命周期只有一次，也就是組件第一次插入DOM文檔流時。在掛載到DOM流程中的每一步也有相應的限制：

更新DOM

 組件掛載到DOM后，一旦其props和state有更新，就會進入更新DOM流程。同樣我們也可以通過一張圖清晰的描述該流程的各個步驟：

//getDefaultProps()和getInitialState()中不能獲取和設置組件的state。
//render()方法中不能設置組件的state。

componentWillReceiveProps()提供了該流程中更新state的最后時機，后續的其他函數都不能再更新組件的state了。我們尤其需要注意的是shouldComponentUpdate函數，它的結果直接影響該組件是不是需要進行虛擬DOM比較，我們對組件渲染性能優化的基本思路就是：在非必要的時候將shouldComponentUpdate返回值設置為false，從而終止更新DOM流程中的后續步驟。

從DOM中卸載

 從DOM中卸載的流程比較簡單，React只暴漏出componentWillUnmount，該函數使得我們可以在DOM卸載的最后時機對其進行干預。

2、性能分析

   合理的使用shouldComponentUpdate()可以在很大程序上優化應用。但在實際情況下，應用往往在沙箱或是開發環境中運行的非?？欤a環境則表現的不盡人意。這時，我們需要對應用進行性能分析，然后再有針對性的在shouldComponentUpdate()中進行優化。

React 提供了性能分析插件React.addons.Perf，它讓我們可以在需要檢測的代碼起始位置分別添加Perf.start()和Perf.stop()，并可以通過Perf.printInclusive()方法打印花費時間，然后我們可以結合數據做進一步的分析。

React.addons.Perf插件的詳細用法，可以查看官方文檔。

3、 借助react Key標識組件

key屬性在組件類之外提供了另一種方式的組件標識。通過key標識我們可以組件如：順序改變、不必要的子組件更新等情況下，告訴React 避免不必要的渲染而避免性能的浪費。

如，對于如一個基于排序的組件渲染

var items = sortBy(this.state.sortingAlgorithm, this.props.items);
return items.map(function(item){
  return 
});

當順序發生改變時，React 會對元素進行diff操作，并改img的src屬性。顯示，這樣的操作效率是非常低的。這時，我們可以為組件添加一個key屬性以唯一的標識組件：

    return