高性能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 相关文章推荐
javascript 使td内容不换行不撑开
Nov 29 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
Feb 11 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
vue mounted组件的使用
Jun 18 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
了解重排与重绘
May 29 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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中用数组的方法设置cookies
2011/04/21 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python3中sys.argv的实例用法
2020/04/24 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
志愿者活动总结
2014/04/28 职场文书
党员教师一句话承诺
2014/05/30 职场文书