node中使用es5/6以及支持性与性能对比


Posted in Javascript onAugust 11, 2017

前言

这几年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对新特性的支持情况。

node中使用es5/6以及支持性与性能对比

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

参考文章:

https://nodejs.org/en/docs/es6/

http://node.green/

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

Javascript 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
Angular简单验证功能示例
Dec 22 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
JSON对象转化为字符串详解
Aug 11 #Javascript
JS中Swiper的使用和轮播图效果
Aug 11 #Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 #Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 #Javascript
js 奇葩技巧之隐藏代码
Aug 11 #Javascript
echart简介_动力节点Java学院整理
Aug 11 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
一个简单实现多条件查询的例子
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
我的javascript 函数链之演变
2011/04/07 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
React 组件间的通信示例
2018/06/14 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python reduce()函数的用法小结
2017/11/15 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
大学生村官典型材料
2014/01/12 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
社区工作者感言
2014/03/02 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技