如何写出高效的JavaScript JS性能优化窍门

本文我们来讨论一下JavaScript性能优化。

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') { ... }
});

时间: 2024-11-27 16:16:58

如何写出高效的JavaScript JS性能优化窍门的相关文章

stb前端开发js性能优化总结

  js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使

分享几个Javascript 的性能优化点

Javascript 的性能优化点 a.慎用Eval 谨记:有"eval"的代码比没有"eval"的代码要慢上 100 倍以上.主要原因是:JavaScript 代码在执行前会进行类似"预编译"的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义.但是,如果你使用

JS性能优化笔记搜索整理_javascript技巧

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

js性能优化技巧_javascript技巧

性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

JavaScript脚本性能优化注意事项_javascript技巧

循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则有很大讲究.我在测试中有些很有意思的情况,见附录.最后得出的结论是: 如果是循环变量递增或递减,不要单独对循环变量赋值,应该在它最后一次读取的时候使用嵌套的++

客户端js性能优化小技巧整理_javascript技巧

下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

写出高效jquery代码的19条指南

 讨论jQuery和javascript性能的文章并不罕见.然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验 首先,在脑子里牢牢记住jQuery就是javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个javascript新手,我建议您阅读 <给JavaScript初学者的24条最佳实践> ,这是一篇高质量的javascript教程

js性能优化 如何更快速加载你的JavaScript页面_javascript技巧

确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

写出高效jquery代码的19条指南_jquery

首先,在脑子里牢牢记住jQuery就是javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践.首先,如果你是一个javascript新手,我建议您阅读 <给JavaScript初学者的24条最佳实践> ,这是一篇高质量的javascript教程,接触jQuery之前最好先阅读.当你准备使用jQuery,我强烈建议你遵循下面这些指南:1.缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码 代码如下: // 糟糕 h = $('#element').heigh