让咱们写快速的JavaScript,JS性能优化小窍门

时间 2019-11-13

标签咱们快速 javascript 性能优化窍门栏目 JavaScript 繁體版

原文原文链接

JavaScript已是目前最流行的语言了，它能作不少事情 - 网站界面，服务器端，游戏，操做系统，机器人等等不少不少。

不过，说实话，即便它这么疯狂流行，它的性能尚未达到它的极限。是的，它在改进，可是等到它在各个方面遇上本地应用以前，在作一个HYBIRD混合应用时，你还不得不使用一些伎俩来优化它的性能。

Firefox拥有目前最快的JavaScript解析器 SpiderMonkey,

有各类各样的让JavaScript的速度更快的努力，其中一个是asm.js. Asm.js是JavaScript是由 Emscripten产生的一个子集，它为C/C++编绎成的JavaScript代码作了不少优化，编译型后的代码很难看，这就是为何你不能本身写优化后的代码，但它运行很是快。我建议你阅读一下这篇文章

别扯了举个例子吧!

好了，咱们的目标是写速度更快的JavaScript代码，这里有让你的代码跑得更快一些的小窍门，以及更好的内存效率。请注意，我不是严格讨论DOM和Web应用程序，它是关于JavaScript的，DOM只是一部分。

眼见为实，我要添加为第一个添加jsperf测试用例，使用的是Firefox38和Chrome39测试。

＃1不要类型转换

JavaScript是动态类型，但若是你想提升速度不要使用该功能。尽可能保持变量的类型一致。这也适用于数组，尽管主要是由浏览器都进行了优化,但尽可能不要混用不一样类型的数组。这就是为什么编译成 JavaScript的C/C++代码使用静态类型的缘由之一。

{
  var x = '2';
  var y = 5;
  x = 2;
  x + y;
}

测试用例

另外: 字符串与数字类型间相互转换

比方说，你必须将字符串转换为数字，parseInt与parseFloat是最好的方法吗？让咱们来看看。

parseFloat("100")
+"100"
// 整型
parseInt("100", 10)
"100"|0
"100" >> 0
"100" << 0
// 仅适用于正数
"100" >>> 0

parseInt 测试 ~ parseFloat 测试

Firefox对位操做进行了优化，运行的代码比parseInt和+运算速度快约99％。而Chrome显然对位运算符没有偏心，他们比parseInt函数还慢62％。

parseFloat比+运算符在两种浏览器（Firefox 28％，Chrome 39％）上都要快。

所以，若是你在写Node/Chrome或Firefox的应用程序？我认为，通常使用parseInt函数是正确的。

＃2不要从新构造对象

重组对象不便宜，应该避免它：

不要使用delete运算符

删除操做比分配一个null属性慢不少。分配null在两个浏览器都快99％，但它不能修改对象的结构，但删除能够。

编辑：我认为这里有点误导，这并不意味着你不该该使用delete操做符，delete运算符有它本身的使用状况，它能够防止对象的内存泄漏。

delete vs null

不要之后再添加属性

尽可能不要在之后再添加属性，最好从一开始就定义对象的架构。这在Firefox中快100％，在Chrome中快89％。

动态属性VS预先定义结构

＃3字符串联连

字符串联连是一个很是昂贵的操做，可是应该用什么方法呢？固然不是Array.prototype.join。

+=运算符彷佛比+快不少，他们在两种浏览器上比String.prototype.concat和Array.prototype.join都更快。Array.prototype.join是最慢的，符合市场预期。

字符串链接测试

＃4正确的使用正则表达式

使用RegExp.prototype.exec是没有必要，不是吗？

然而，RegExp.prototype.test和String.prototype.search之间是有性能差别的，让咱们来看看哪一个方法更快：

正则表达式的方法

RegExp.prototype.exec比String.prototype.match快了很多，但他们是不彻底同样的东西，它们的区别超出了本文的范围，看这个问答。

RegEx.prototype.test更快，多是由于它不返回找到匹配的索引。 String.prototype.search应仅用于找到所需的匹配的索引。

然而，你不该该使用正则表达式来查找另外一个字符串的位置，你可使用String.prototype.indexOf方法。

String.prototype.search VS String.prototype.indexOf

另外一个有趣的基准是 String.prototype.indexOf VS RegExp.prototype.test，我我的预计后者要快，这是在Firefox中发生的事情，但在Chrome中，事实并不是如此。 RegExp.prototype.test在Firefox中快32％，而在Chrome中String.prototype.indexOf快33％。在这种状况下，你本身选择喜欢的方式吧。

＃5限制声明/传递变量的范围（做用域）

假如你调用一个函数，浏览器必须作一些所谓的范围查找，它的昂贵程度取决于它要查找多少范围。尽可能不要依辣全局/高范围的变量，尽可能使局部范围变量，并将它们传递给函数。更少的范围查找，更少的牺牲速度。

这个测试告诉咱们，从局部范围内传递和使用变量比从更高的声明范围查找变量快，不管是Chrome和Firefox。

内部范围VS高范围VS全局

＃6你不须要全部的东西都用jQuery

大多数开发者使用jQuery作一些简单的任务，个人意思在一些场合你没有必要使用jQuery，你以为用$.val()始终是必要的吗？就拿这个例子：

$('input').keyup(function() {
    if($(this).val() === 'blah') { ... }
});

这是学习如何使用JavaScript修改DOM的最重要缘由之一，这样你能够编写更高效的代码。

用纯JavaScript100％完成一样的功能100%的速度更快，这是JSPerf基准测试

$('input').keyup(function() {
  if(this.value === 'blah') { ... }
});

转载自：http://ourjs.com/detail/54d9a6f2232227083e00002cjavascript

原文地址：medium.comjava