首頁 > web前端 > js教程 > node搭載es5/6性能比較詳解

node搭載es5/6性能比較詳解

巴扎黑
發布: 2017-08-12 16:27:46
原創
1262 人瀏覽過

這篇文章主要介紹了node中使用es5/6以及支持性與性能對比,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧

前言

這幾年react、vue的快速發展,越來越多的前端開始講es6的程式碼運用在在專案中,因為我們可以透過babel進行轉譯為低版本的js以便於運行在所有瀏覽器中,import、export、let、箭頭函數等等,對於node端,當然我們也希望使用這些高級語法,但需要提前了解到node支援哪些新的語法。

分類

所有的es6特性被分成了三個階段/分類:

  • shipping --- v8引擎可以支援的很好,預設情況下我們是不需要設立任何的flag而可以直接運行的。

  • staged --- 這些是將要完成的新特性但是還不能被v8引擎所支持,需要使用 runtime flag: --harmony。

  • in progress --- 這些特性是最好不要使用的,因為很有可能未來會被廢棄,具有不確定性。

那麼那些特性是nodejs版本預設支援的呢?

在網站node.green 上,提供了非常棒的對於不同版本node對新功能的支援情況。

  

可以看到,我們常用的一些es6語法,node的支援已經很好了,因為目前node的最新版本已經是6.11.2 了,這是推薦使用的版本,而最新的版本已經達到了8.3.0 。

所以我們在node端寫es6語法時,大部分是可以直接使用的。但是對於es7/8的特性,目前還不能很好的支援。

哪些特性是在開發中呢?

新的特性在不斷地添加到v8引擎中去, 一般的說, 還是期待他們到最新的v8引擎中的,儘管不知道是什麼時候。

你可以透過grepping來列出所有的in progress的特性,也就是使用 --v8-options 參數。 值得注意的是, 這些還是相容性不好的特性,所有需要謹慎的使用他們。

性能 

es6是大勢所趨,我們不僅需要了解其特性的兼容性,還要早性能上做到心中有數,下面我們可以對es5和es6在node上跑來比較時間。

區塊層級作用域

es5測試:


#
var i = 0;
var start = +new Date(),
  duration;

while (i++ < 1000000000) {
  var a = 1;
  var b = &#39;2&#39;;
  var c = true;
  var d = {};
  var e = [];
}

duration = +new Date() - start;
console.log(duration)
登入後複製

多次測試,耗時分別為11972 /11736/11798 

es6測試:


let i = 0;
let start = +new Date(),
  duration;

while (i++ < 1000000000) {
  const a = 1;
  const b = &#39;2&#39;;
  const c = true;
  const d = {};
  const e = [];
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過多次測試, 耗時分別為11583/11674/11521。

在這一方面使用es6語法略快。

class

es5語法


#
var i = 0;
var start = +new Date(),
  duration;

function Foo() {;
  this.name = &#39;wayne&#39;
}

Foo.prototype.getName = function () {
  return this.name;
}

var foo = {};

while (i++ < 10000000) {
  foo[i] = new Foo();
  foo[i].getName();
}

duration = +new Date() - start;

console.log(duration)
登入後複製

經過測試,耗時分別為 2030/2062/1919ms。

es6語法:

注意: 因為我們這裡只是測試class,所以兩者都是用var來宣告變量,也就是單一變數原則。


var i = 0;
var start = +new Date(),
  duration;
  
class Foo {
  constructor() {
    this.name = &#39;wayne&#39;    
  }
  getName () {
    return this.name;
  }
}


var foo = {};

while (i++ < 10000000) {
  foo[i] = new Foo();
  foo[i].getName();
}

duration = +new Date() - start;

console.log(duration)
登入後複製

經過三輪測試,結果分別是 2044/2129/2080, 由此可見,兩者在速度上幾乎是沒有區別的。

4.x的node版本在運行es6程式碼相比於es5程式碼是非常慢的,但是現在使用node的6.11.2版本來運行es6程式碼和運行es5程式碼相比,兩者是一樣快的,可見node對於新特性的運行速度得到了極大改善。

map

es5語法:


#
var i = 0;
var start = +new Date(),
  duration;

while (i++ < 100000000) {
  var map = {};
  map[&#39;key&#39;] = &#39;value&#39;
}

duration = +new Date() - start;
console.log(duration)
登入後複製

運行5次,結果分別為: 993/858/ 897/855/862

es6語法:


var i = 0;
var start = +new Date(),
  duration;

while (i++ < 100000000) {
  var map = new Map();
  map.set(&#39;key&#39;, &#39;value&#39;);
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過幾輪測試,耗時分別為: 10458/10316/10319。 即es6的Map在運行時間上是es5的10倍以上,所以在node環境下我們最好少使用Map語法。

範本字串

es5語法:


#
var i = 0;
var start = +new Date(),
  duration;

var person = {
  name: &#39;wayne&#39;,
  age: 21,
  school: &#39;xjtu&#39;
}

while (i++ < 100000000) {
  var str = &#39;Hello, I am &#39; + person.name + &#39;, and I am &#39; + person.age + &#39; years old, I come from &#39; + person.school; 
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過測試,可以發現時間分別為2396/ 2372/2427

es6語法:


var i = 0;
var start = +new Date(),
  duration;

var person = {
  name: &#39;wayne&#39;,
  age: 21,
  school: &#39;xjtu&#39;
}

while (i++ < 100000000) {
  var str = `Hello, I am ${person.name}, and I am ${person.age} years old, I come from ${person.school}`;
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過測試,可以發現耗時分別為  2978/3022/3010。

經過計算,使用es6的語法耗時是es5語法的約1.25倍。 因此,盡量減少在node端使用模板字串,如果大量使用,顯然耗時是非常嚴重的。

箭頭函數

es5語法:


#
var i = 0;
var start = +new Date(),
  duration;

var func = {};

while (i++ < 10000000) {
  func[i] = function (x) {
    return 10 + x;
  }
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過測試,發現耗時分別為1675/1639 /1621。

es6語法:


var i = 0;
var start = +new Date(),
  duration;

var func = {};

while (i++ < 10000000) {
  func[i] = (x) => 10 + x
}

duration = +new Date() - start;
console.log(duration)
登入後複製

經過測試,發現耗時分別為 1596/1770/1597。

即使用箭頭函數的運行速度和使用es5方式的箭頭函數在運行速度上是一致的,並且使用es6的箭頭函數寫起來更加方便,所以推薦使用,我們可以直接使用。

總結

在node端使用es6還是不錯的,對於常見的class、let、箭頭函數等等在速度上和es5不相上下,但是在寫起來會比較方便,還是推薦使用的。

以上是node搭載es5/6性能比較詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板