分享几个Javascript 的性能优化点

Javascript 的性能优化点

a、慎用Eval 谨记:有“eval”的代码比没有“eval”的代码要慢上 100 倍以上。主要原因是:JavaScript 代码在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用 var 申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是 undefined,并将那些以 function 定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。但是,如果你使用了“eval”,则“eval”中的代码(实际上为字符串)无法预先识别其上下文,无法被提前解析和优化,即无法进行预编译的操作。所以,其性能也会大幅度降低。

 

b、推荐尽量使用局部变量 JavaScript 代码解释执行,在进入函数内部时,它会预先分析当前的变量,并将这些变量归入不同的层级(level),一般情况下:
局部变量放入层级 1(浅),全局变量放入层级 2(深)。如果进入“with”或“try – catch”代码块,则会增加新的层级,即将“with”或“catch”里的变量放入最浅层(层 1),并将之前的层级依次加深。变量所在的层越浅,访问(读取或修改)速度越快,尤其是对于大量使用全局变量的函数里面。

 

c、字符串数组方式拼接避免在IE6下的开销

 代码如下 复制代码
var tips = 'tip1'+'tip2'; 

这是我们拼接字符串常用的方式,但是这种方式会有一些临时变量的创建和销毁,影响性能,尤其是在IE6下,所以推荐使用如下方式拼接:

 代码如下 复制代码

var tip_array = [],tips;  tip_array.push('tip1');  tip_array.push('tip2');  tips = tip_array.join(''); 

当然,最新的浏览器(如火狐 Firefox3+,IE8+ 等等)对字符串的拼接做了优化,性能略快于数组的“join”方法。

 

以上仅列出三种常见的优化方法,仅抛砖以引玉石,更多的javascript优化点,比如避免隐式类型转换, 缩小对象访问层级,利用变量优化字符串匹配等大家可以继续深入挖掘;

时间: 2024-08-31 16:33:38

分享几个Javascript 的性能优化点的相关文章

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

本文我们来讨论一下JavaScript性能优化. Firefox拥有目前最快的JavaScript解析器 SpiderMonkey,有各种各样的让JavaScript的速度更快的努力,其中一个是asm.js. Asm.js是JavaScript是由Emscripten产生的一个子集,它为C/C++编绎成的JavaScript代码做了很多优化,编译型后的代码很难看,这就是为什么你不能自己写优化后的代码,但它运行非常快.我建议你阅读一下这篇文章 好了,我们的目标是写速度更快的JavaScript代码

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

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

JavaScript代码性能优化总结篇_javascript技巧

下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

JavaScript代码性能优化总结(推荐)_javascript技巧

下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

有关javascript的性能优化 (repaint和reflow)_基础知识

复制代码 代码如下:  repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染. reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显. 何时发生:. DOM元素的添加.修改(内容).删除( Ref

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中.为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择. 本文从加载.上下文.解析.编译.执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识.   什么是高性能的 JavaScript 代码? 尽管目前没有高性能代码的绝对定义,但却存在一个以用户为中心的性能模型,可以用作参考:RAIL模型. 响应 如果你的应用程序能

javascript性能优化之事件委托实例详解_javascript技巧

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

javascript性能优化之DOM交互操作实例分析_javascript技巧

本文实例讲述了javascript性能优化之DOM交互操作技巧.分享给大家供大家参考,具体如下: 在javascript各个方面,DOM毫无疑问是最慢的一部分.DOM操作与交互要耗费大量时间,因为它们往往需要重新渲染整个页面或者某一部分.理解如何优化与DOM的交互可以极大提高脚本完成的速度. 1.最小化DOM更新 看下面例子: var list = document.getElementById("ul"); for (var i=0; i < 10; i++){ var ite

javascript 如何做性能优化

问题描述 javascript 如何做性能优化 请问大家,javascript如何能做到到性能优化该从哪里去开始,去做这个事情呢? 解决方案 http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 解决方案二: javaScript的性能优化 解决方案三: 首先你应该找到程序中的热区,也就是说耗时最多,调用频繁的地方. 这样才可以做到有的放矢.如果你优化好热区,性能会提高很大,相反,如果你优化的不是热区,即便本身写得再好,因为那些地