js性能优化之--数据访问选取

在javascript里有4种数据存储的方式:

直接量:仅表示自己,不存储于某特定的位置,没有指向

变量:js中使用var关键字创建并存储信息

数组:具有数字索引,存储一个数组对象

对象:具有字符串索引,存储一个js对象

在代码中访问数据都会造成一定的操作负担,毋庸置疑,电脑的每一次操作都会占用性能

而对于4中存储的访问照成的性能负担都是有差异的

以下使用一张图表表示对不用数据类型进行200000次读操作的时间(引用自《高性能的javascript》)

尽管不能代表全部,但总体来说,通过这些数据可以发现,

在访问直接量和变量的时候所耗费的性能会远远低于访问数组和对象所耗费的性能,

所以,我们在写js程序的时候,可以使用直接量和变量的就不要使用数组和对象存储,

一小段js也许看不出什么差异,但一整个程序下来,可以挽回的性能就不是一个小数了

作用域优化:

作用域是javascript中的一个重要的知识点,懂的此处可忽略往下看,是每一个javascript开发者都应该掌握的

先来看一个例子:

var a="hellow"
function a(){
    var a = "world"
}
console.log(a)        //hellow

以上程序打印出来的是“hellow”,相信所有人都看得出来这个结果

可是,有没有想过这是为什么?

这里面就涉及了作用域的问题

当js开始运行时,会有一个全局执行环境一般指向window对象

每一个函数都已一个自己的执行环境,每个执行环境都有一个与之关联的变量对象

当执行流进入该执行环境时,该执行环境的变量对象将处于激活状态并建立该执行环境下的作用域链,当函数执行完后执行环境销毁

当前的执行环境对象将处于作用域链的最前端

以上打印出来的hellow是因为console.log(a)处于全局执行环境下,作用域链中找不到函数中的变量

同样的,如果在a方法中执行打印,则会打印出world,这是因为作用域链是从前端开始逐级搜索,当在a的执行环境下搜索到该变量后

便停止了继续搜索,所以才找到了world这个结果,而hellow这个结果在作用域链的后面,被忽略

以上的说法比较含糊,不必较真,这里是想说关于作用域的优化,略过

OK,浅浅理解了下作用域,接着聊

当进入一个执行环境后

每次js引擎对作用域链的逐级搜索都会耗费一定的性能

所以,我们在编码的时候要注意的是,尽量让需要的值或对象放在该执行环境下作用域的最前沿

一个好的经验法则是:用局部变量存储本地范围之外的变量值,如果它们在函数中的使用多于一次(高性能的javascript)

var ui = "ui";
function UI(){
    console.log(ui+"是谁");
    console.log(ui+"是alex");
}UI();

如以上的代码

UI函数执行流程:

第一个console.log

先搜索当前执行环境对象,找不到ui值,继续往作用域上级搜索

找到window对象,发现ui值,搜索结束

第二个console.log

先搜索当前执行环境对象,找不到ui值,继续往作用域上级搜索

找到window对象,发现ui值,搜索结束

函数结束

通过作用域的知识,我们可以对这个函数进行优化:

var ui = "ui";
function UI(){
    var copy = ui;
    console.log(copy +"是谁");
    console.log(copy +"是alex");
}UI();

UI函数执行流程:

赋值,

先搜索当前执行环境对象,找不到ui值,继续往作用域上级搜索

找到window对象,发现ui值,搜索结束,进行赋值操作

第一个console.log

先搜索当前执行环境对象,找到copy值,搜索结束

第二个console.log

先搜索当前执行环境对象,找到copy值,搜索结束

优化结束

当一个函数中需要大量使用到执行环境之外的对象数据时,使用这种方式将节省大量的性能损耗

不对之处请指正

个人原创,转载请注明来源

博客:http://www.cnblogs.com/alex-web/

注:小疯纸的yy

时间: 2024-07-29 02:26:36

js性能优化之--数据访问选取的相关文章

性能优化之数据存储&DOM编程

数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

JS性能优化

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

js 性能优化 篇一

JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内置优化引擎,将JS编译成本地代码的浏览器,其它浏览器也陆续实现了JS的编译过程.但是,即使到了编译执行JS的新阶段,仍然会存在低效率的代码.)以下总结一些可以改进代码的整体性能的方法. 1.注意作用域 记住一点,随着作用域中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.所以,访问全局变量

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

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

你不知道的Node.js性能优化,读了之后水平直线上升

本文由云+社区发表 "当我第一次知道要这篇文章的时候,其实我是拒绝的,因为我觉得,你不能叫我写马上就写,我要有干货才行,写一些老生常谈的然后加上好多特技,那个 Node.js 性能啊好像 Duang~ 的一下就上去了,那读者一定会骂我,Node.js 根本没有这样搞性能优化的,都是假的." ------ 斯塔克·成龙·王 1.使用最新版本的 Node.js 仅仅是简单的升级 Node.js 版本就可以轻松地获得性能提升,因为几乎任何新版本的 Node.js 都会比老版本性能更好,为什么

js性能优化-事件委托(2)

<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>js性能优化</title> <script type="text/javascript" src="script/jquery.js"></script></head><body><ul id='lis

js性能优化-事件委托

js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>js性能优化&l

js性能优化文章集锦

总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html 我所经历的JS性能优化http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html DOM性能瓶颈与Javascript性能优化http://www.cnb

JS性能优化——数据存取

首先,了解几个概念: 字面量:它只代表自身,不存储在特定的位置.JavaScript中的字面量有:字符串.数字.布尔值.对象.数组.函数.正则,以及特殊的null和undefined值 本地变量:使用var 定义的数据单元 数组元素:存储在JavaScript数组对象内部,以数字作为索引 对象成员:存储在JavaScript对象内部,以字符串作为索引. 每一种数据存储的位置都有不同的读写消耗.大多数情况下,从一个字面量和局部变量中存取数据的性能差异是微不足道的.访问数组元素和对象成员的代价则要高