讓我們寫快速的JavaScript,JS效能最佳化小竅門

標籤：

JavaScript已經是目前最流行的語言了，它能做很多事情 - 網站介面，伺服器端，遊戲 ，作業系統 ，機器人 等等很多很多。 不過，說實話，即使它這麼瘋狂流行，它的效能還沒有達到它的極限。是的，它在改進，但是等到它在各個方面趕上本地應用之前，在做一個HYBIRD混合應用時，你還不得不使用一些伎倆來最佳化它的效能。  Firefox擁有目前最快的JavaScript解析器 SpiderMonkey,  有各種各樣的讓JavaScript的速度更快的努力，其中一個是asm.js. Asm.js是JavaScript是由Emscripten產生的一個子集，它為C/C++編繹成的JavaScript代碼做了很多最佳化，編譯型後的代碼很難看，這就是為什麼你不能自己寫最佳化後的代碼，但它運行非常快。我建議你閱讀一下這篇文章   別扯了舉個例子吧!  好了，我們的目標是寫速度更快的JavaScript代碼，這裡有讓你的代碼跑得更快一些的小竅門，以及更好的記憶體效率。請注意，我不是嚴格討論DOM和Web應用程式，它是關於JavaScript的，DOM只是一部分。 眼見為實，我要添加為第一個添加jsperf測試案例，使用的是Firefox38和Chrome39測試。  ＃1不要類型轉換  JavaScript是動態類型，但如果你想提高速度不要使用該功能。盡量保持變數的類型一致。這也適用於數組，儘管主要是由瀏覽器都進行了最佳化,但盡量不要混用不同類型的數組。這就是為何編譯成 JavaScript的C/C++代碼使用靜態類型的原因之一。

{  var x = ‘2‘;  var y = 5;  x = 2;  x + y;}

測試案例   另外: 字串與數字類型間相互轉換 比方說，你必須將字串轉換為數字，parseInt與parseFloat是最好的方法嗎？讓我們來看看。

parseFloat("100")+"100"// 整型parseInt("100", 10)"100"|0"100" >> 0"100" << 0// 僅適用於正數"100" >>> 0

 

parseInt 測試  ~ parseFloat 測試  Firefox對位操作進行了最佳化，啟動並執行代碼比parseInt和+運算速度快約99％。而Chrome顯然對位元運算符沒有偏愛，他們比parseInt函數還慢62％。 parseFloat比+運算子在兩種瀏覽器（Firefox 28％，Chrome 39％）上都要快。 因此，如果你在寫Node/Chrome或Firefox的應用程式？我認為，一般使用parseInt函數是正確的。  ＃2不要重新構造對象 重組對象不便宜，應該避免它：  不要使用delete運算子 刪除操作比分配一個null屬性慢很多。分配null在兩個瀏覽器都快99％，但它不能修改對象的結構，但刪除可以。 編輯：我認為這裡有點誤導，這並不意味著你不應該使用delete操作符，delete運算子有它自己的使用方式，它可以防止對象的記憶體流失。 delete vs null   不要以後再添加屬性 盡量不要在以後再添加屬性，最好從一開始就定義對象的架構。這在Firefox中快100％，在Chrome中快89％。 動態屬性VS預先定義結構    ＃3字串聯連 字串聯連是一個非常昂貴的操作，但是應該用什麼方法呢？當然不是Array.prototype.join。 +=運算子似乎比+快很多，他們在兩種瀏覽器上比String.prototype.concat和Array.prototype.join都更快。Array.prototype.join是最慢的，符合市場預期。 字串串連測試  ＃4正確的使用Regex 使用RegExp.prototype.exec是沒有必要，不是嗎？ 然而，RegExp.prototype.test和String.prototype.search之間是有效能差異的，讓我們來看看哪個方法更快： Regex的方法 RegExp.prototype.exec比String.prototype.match快了不少，但他們是不完全一樣的東西，它們的區別超出了本文的範圍，看這個問答。  RegEx.prototype.test更快，可能是因為它不返回找到匹配的索引。 String.prototype.search應僅用於找到所需的匹配的索引。 然而，你不應該使用Regex來尋找另一個字串的位置，你可以使用String.prototype.indexOf方法。 String.prototype.search VS String.prototype.indexOf  另一個有趣的基準是String.prototype.indexOf VS RegExp.prototype.test，我個人預計後者要快，這是在Firefox中發生的事情，但在Chrome中，事實並非如此。 RegExp.prototype.test在Firefox中快32％，而在Chrome中String.prototype.indexOf快33％。在這種情況下，你自己選擇喜歡的方式吧。  ＃5限制聲明/傳遞變數的範圍（範圍） 假如你調用一個函數，瀏覽器必須做一些所謂的範圍尋找，它的昂貴程度取決於它要尋找多少範圍。盡量不要依辣全域/高範圍的變數，盡量使局部範圍變數，並將它們傳遞給函數。更少的範圍尋找，更少的犧牲速度。 這個測試告訴我們，從局部範圍內傳遞和使用變數比從更高的聲明範圍尋找變數快，無論是Chrome和Firefox。 內部範圍VS高範圍VS全域  ＃6你不需要所有的東西都用jQuery 大多數開發人員使用jQuery做一些簡單的任務，我的意思在一些場合你沒有必要使用jQuery，你覺得用$.val()始終是必要的嗎？就拿這個例子：

$(‘input‘).keyup(function() {    if($(this).val() === ‘blah‘) { ... }});

這是學習如何使用JavaScript修改DOM的最重要原因之一，這樣你可以編寫更高效的代碼。 用純JavaScript100％完成同樣的功能100%的速度更快，這是JSPerf基準測試

$(‘input‘).keyup(function() {  if(this.value === ‘blah‘) { ... }});

轉載自：http://ourjs.com/detail/54d9a6f2232227083e00002c

原文地址：medium.com

讓我們寫快速的JavaScript,JS效能最佳化小竅門