高性能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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
Express 配置HTML页面访问的实现
Nov 01 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
终于听上了直流胆调频
2021/03/02 无线电
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python中对列表排序实例
2015/01/04 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
公司办公室岗位职责
2014/03/19 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
防止web项目中的SQL注入
2021/12/06 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL