Home  >  Article  >  Web Front-end  >  高性能Javascript笔记 数据的存储与访问性能优化_javascript技巧

高性能Javascript笔记 数据的存储与访问性能优化_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:51:141098browse

局部变量也就可以理解为在函数内部定义的变量,很明显访问局部变量要比域外的变量要快,因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章)。变量在作用域链的位置越深,访问所需要的时间就越长,全局变量总是最慢的,因为它们位于作用域链的最后一个变量对象。

每种数据类型的访问都需要付出点性能代价,对于直接量和局部变量基本都能消费得起,而访问数组项和对象成员则要代价高点。下图显示了不同浏览器,分别对这四种数据类型进行了200'000次操作所用的时间。

由上图可以看出,要想优化代码的性能,那么尽量使用直接量和局部变量,限制数组项和对象成员的访问次数(将对象成员用一个局部变量来保存)。

首先我们需要了解一下对象成员的访问过程。其实函数就是一个特殊的对象,所以对象成员的访问跟函数的内部变量的访问都差不多,都是基于链的查找,前者是原型链,后者是作用域链,只是怎么个链法有点差别而已。

对象成员包含属性和方法,如果该成员是一个函数就称为方法,否则就称为属性。
JavaScript中的对象是基于原形(原形本身就是一个对象)的,原形是其他对象的基础。当你实例化一个Object对象或其它JS的内置对象时(var obj=new Object() or var obj={}),实例obj的原形由后台自动创建,浏览器FF,safari,Chrome可通过obj.__proto__属性(等同于 Object.prototype)可以访问到这个原形,也正是因为这个原形,每一个实例都能共享原形对象的成员。如:
复制代码 代码如下:

var book = {   
name:"Javascript Book",   
getName = function(){     
return this.name;   
}
};
alert(book.toString()); //"[object Object]"

此代码中,book对象有两个私有成员,分别是属性name和方法getName。book对象并没有定义成员toString,但调用了也没有抛出错误,原因是book对象继承了原形对象的成员。book对象与原形的关系如下:

访问book对象成员toString的过程是这样的,当book.toString()被调用时,后台对成员进行名为”toString”的搜 索,首先从实例book本身开始,如果在book发现名为”toString”的成员,则搜索结束,否则继续向__proto__指向的原型对象搜索,如 果在Object的原形对象都找不到该成员,则表示该成员未定义。通过这种方式,book就可以访问它的原型对象所拥有的每个属性或方法。

对象的另一高级用法就是模拟类和继承类,我喜欢叫这样用法的对象为对象类。继承对象类主要就是依靠原型链来完成的,这个知识点太多需要另外详细 说明。通过上面的对象成员搜索过程,访问对象成员的速度,随着原型链的越深,搜索的速度就越慢。下图就显示了对象成员在原型链中所处的深度与访问时间的关 系:

由上图可清楚的知道,每深入原型链一层都会增加性能的损失,所以像那种遍历对象成员的操作开销很大。还有另外一种常用且损耗性能的做法就是嵌套对象 成员(如window.location.href),像这种最好的做法就是减少点的次数了。比如location.href就比 window.location.href快。

好了,总结起来就一句话:一个属性或方法在原型链的位置越深,访问它的速度就越慢。解决办法就是:将经常使用的对象成员,数组项和域外的变量存入局部变量中,然后访问这个局部变量。
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn