node中使用es6/7/8(支持性与性能)


Posted in Javascript onMarch 28, 2019

前言

这几年react、vue的快速发展,越来越多的前端开始讲es6的代码运用在项目中,因为我们可以通过babel进行转译为低版本的js以便于运行在所有浏览器中,import、export、let、箭头函数等等,对于node端,当然我们也希望使用这些高级语法,但是需要提前了解到node支持哪些新的语法。

分类

所有的es6特性被分成了三个阶段/分类:

  • shipping --- v8引擎可以支持的很好,默认情况下我们是不需要设立任何的flag而可以直接运行的。
  • staged --- 这些是将要完成的新特性但是还不能被v8引擎所支持,需要使用 runtime flag: --harmony。
  • in progress --- 这些特性是最好不要使用的,因为很有可能未来会被废弃,具有不确定性。

那么那些特性是nodejs版本默认支持的呢?

node中使用es6/7/8(支持性与性能)

可以看到,我们常用的一些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不相上下,但是在写起来会更加方便,还是推荐使用的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JavaScript验证知识整理
Mar 24 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 #Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 #Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 #Javascript
详解Vue.directive 自定义指令
Mar 27 #Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 #Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 #Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 #Javascript
You might like
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
js字符串转成JSON
2013/11/07 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python 简单的多线程链接实现代码
2016/08/28 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python实现学生管理系统
2018/01/11 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
pycharm新建一个python工程步骤
2019/07/16 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
社会学专业求职信
2014/07/17 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers