個人常用JavaScript及React常用優化總結

gmogle 7年前發布 | 14K 次閱讀 React JavaScript開發 JavaScript

JavaScript 插件性能優化及個人react常用優化方法

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

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

Zakas對這個進行了細致的講解，解釋了由于回流（reflow）的存在，DOM操作是非常消耗資源的。回流通常被理解為瀏覽器重新選渲染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前端應用，最好的優化就是不優化因為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()可以在很大程序上優化應用。但在實際情況下，應用往往在沙箱或是開發環境中運行的非常快，但生產環境則表現的不盡人意。這時，我們需要對應用進行性能分析，然后再有針對性的在shouldComponentUpdate()中進行優化。
React 提供了性能分析插件React.addons.Perf，它讓我們可以在需要檢測的代碼起始位置分別添加Perf.start()和Perf.stop()，并可以通過Perf.printInclusive()方法打印花費時間，然后我們可以結合數據做進一步的分析。
React.addons.Perf插件的詳細用法，可以查看官方文檔。</code></pre> 
  
3、 借助react Key標識組件 
  key屬性在組件類之外提供了另一種方式的組件標識。通過key標識我們可以組件如：順序改變、不必要的子組件更新等情況下，告訴React 避免不必要的渲染而避免性能的浪費。 
  如，對于如一個基于排序的組件渲染 
  var items = sortBy(this.state.sortingAlgorithm, this.props.items);
return items.map(function(item){
  return <img src={item.src} />
}); 
  當順序發生改變時，React 會對元素進行diff操作，并改img的src屬性。顯示，這樣的操作效率是非常低的。這時，我們可以為組件添加一個key屬性以唯一的標識組件： 
  return <img src={item.src} key={item.id} /> 
    
  來自：https://segmentfault.com/a/1190000008704275


                    
                         本文由用戶 gmogle 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1489631025049.html
                         React JavaScript開發 JavaScript