高性能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链式操作的正确使用方法
Jan 06 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Require.js的基本用法详解
Jul 03 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python2.7安装图文教程
2018/03/13 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
pyspark 随机森林的实现
2020/04/24 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
电子商务自荐书范文
2014/01/04 职场文书
问卷调查计划书
2014/01/10 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
质量保证书
2015/01/17 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
李强优秀员工观后感
2015/06/16 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
anaconda python3.8安装后降级
2021/06/11 Python