node搭載es5/6性能比較詳解
- 巴扎黑原創
- 2017-08-12 16:27:461250瀏覽
這篇文章主要介紹了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 = '2';
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 = '2';
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 = 'wayne'
}
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 = 'wayne'
}
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['key'] = 'value'
}
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('key', 'value');
}
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: 'wayne',
age: 21,
school: 'xjtu'
}
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)經過測試，可以發現時間分別為2396/ 2372/2427
es6語法：
var i = 0;
var start = +new Date(),
duration;
var person = {
name: 'wayne',
age: 21,
school: 'xjtu'
}
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中文網其他相關文章！