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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript实现分页效果
Mar 28 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
微信小程序开发实现的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 向访客和爬虫显示不同的内容
2009/11/09 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JS 继承实例分析
2008/11/04 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript实现简单的计算器
2020/01/16 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现页面导航层级指示效果
2020/08/25 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
大学生实习思想汇报
2014/01/12 职场文书
党员公开承诺书范文
2014/03/25 职场文书
学生检讨书范文
2014/10/30 职场文书
2016年中秋祝酒词
2015/11/26 职场文书