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


Posted in Javascript onAugust 02, 2012

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

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

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

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

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

对象成员包含属性和方法,如果该成员是一个函数就称为方法,否则就称为属性。
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对象与原形的关系如下:

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

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

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

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

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

好了,总结起来就一句话:一个属性或方法在原型链的位置越深,访问它的速度就越慢。解决办法就是:将经常使用的对象成员,数组项和域外的变量存入局部变量中,然后访问这个局部变量。

Javascript 相关文章推荐
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
js生成word中图片处理方法
Jan 06 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
JS中的BOM应用
Feb 02 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
基于jquery的时间段实现代码
Aug 02 #Javascript
Javascript this 的一些学习总结
Aug 02 #Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 #Javascript
这些年、我收集的JQuery代码小结
Aug 01 #Javascript
JQquery的一些使用心得分享
Aug 01 #Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 #Javascript
别了 JavaScript中的isXX系列
Aug 01 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python编程之多态用法实例详解
2015/05/19 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Django框架封装外部函数示例
2019/05/28 Python
pandas分区间,算频率的实例
2019/07/04 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
皮肤科医师岗位职责
2013/12/04 职场文书
高职教师岗位职责
2013/12/24 职场文书
主管会计岗位责任制
2014/02/10 职场文书
数学国培研修感言
2014/02/13 职场文书
离婚协议书标准格式
2014/10/04 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
产品调价通知函
2015/04/20 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis