高性能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 08 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 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调用Google translate_tts api实现代码
2013/08/07 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
jQuery的文档处理程序详解
2016/05/10 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
js运动事件函数详解
2016/10/21 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
python日志记录模块实例及改进
2017/02/12 Python
python机器学习实战之树回归详解
2017/12/20 Python
python判断设备是否联网的方法
2018/06/29 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python利用7z批量解压rar的实现
2019/08/07 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
python和php哪个更适合写爬虫
2020/06/22 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
党员思想汇报范文
2013/12/30 职场文书
运动会方阵口号
2014/06/07 职场文书
武侯祠导游词
2015/02/04 职场文书