讓咱們寫快速的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正確的使用正則表達式

 

使用RegExp.prototype.exec是沒有必要，不是嗎？

 

然而，RegExp.prototype.test和String.prototype.search之間是有性能差別的，讓咱們來看看哪一個方法更快：

 

正則表達式的方法

 

RegExp.prototype.exec比String.prototype.match快了很多，但他們是不徹底同樣的東西，它們的區別超出了本文的範圍，看這個 問答。 

 

RegEx.prototype.test更快，多是由於它不返回找到匹配的索引。 String.prototype.search應僅用於找到所需的匹配的索引。

 

然而，你不該該使用正則表達式來查找另外一個字符串的位置，你可使用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