快速的JavaScript，JS性能优化

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((‘input’).keyup(function() { if((this).val() === ‘blah’) { … }
});

　　这是学习如何使用JavaScript修改DOM的最重要原因之一，这样你可以编写更高效的代码。

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

$(‘input’).keyup(function() {
if(this.value === ‘blah’) { … }
});

　　原文地址： medium.com

快速的JavaScript，JS性能优化相关推荐

Node.js性能优化
你不知道的Node.js性能优化 - 知乎 https://zhuanlan.zhihu.com/p/50055740 你不知道的Node.js性能优化 "当我第一次知道要写这篇文章的时候, ...
javascript的性能优化tips
谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for ...
你不知道的Node.js性能优化，读了之后水平直线上升
本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 D ...
JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》
本篇博文来源于网络 226 人赞同了该文章原文作者:IMWeb jerryOnlyZRJ 原文链接:网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区 ...
JavaScript 的性能优化：加载和执行
概览无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
js性能优化--学习笔记
<高性能网站建设进阶指南>: 1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的:把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法:比如for循环中的.len ...
Next.js性能优化之ISR渲染入门和原理探索
前言术语说明: SSR -- 服务端渲染 SSG -- 静态生成 ISR -- 增量静态化 Date Fetch 函数 -- 本文特指服务端数据获取的几种函数 getStaticProps . ge ...
JS性能优化之文档碎片-document.createDocumentFragment
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新 ...
我总结的js性能优化的小知识
阅读目录前言避免全局查找定时器字符串连接避免with语句数字转换成字符串浮点数转换成整型各种类型转换多个类型声明插入迭代器使用直接量使用DocumentFragment优化多次 ...

快速的JavaScript，JS性能优化

快速的JavaScript，JS性能优化相关推荐

最新文章

热门文章