JavaScript数据存取的性能问题
JavaScript中四种基本的数据存取位置:
字面量:只代表自身 字符串、数字、布尔值、对象、函数、数组、正则,以及null和undefined 快
本地变量:var定义的 快
数组元素:以数字作为索引 慢
对象成员:以字符串作为索引 慢
大多数情况下,从字面量和一个局部变量中存取数据的性能差异不大,而访问数组元素和对象成员的代价略高(根据地址查找堆)
一、作用域链和标识符解析
函数内部属性[[scope]]包含了被创建时所在作用域中的对象的集合,称为函数的作用域链
- function add(num1, num2){
- var sum = num1 + num2;
- return sum;
- }
若add是在全局环境下创建,那它的作用域链,就只有一个全局对象(this:window, window:object, document:object, add:function)
- var total = add(5, 10);
当add执行时,其执行环境的作用域链为 活动对象(this:window, arguments:[5, 10], num1:5, num2: 10, sum:undefined) + 上面的全局对象
标识符解析时,查找执行环境作用域链,找到即停。标识符所在的位置越深,读写速度就越慢。全局变量总是在执行环境作用域链的最末端,因此它也是最远的
如果每个某个跨作用域的值在函数中被引用了一次以上,建议把它存储到局部变量。如下:
- var bd = document.body,
- links = document.getElementsByTagName('a'),
- goBtn = document.getElementById('go-btn');
document是个全局变量,仅仅声明变量就被访问了这么多次,但每一次访问document都要遍历整个作用域链,直到最后在全局变量对象中找到,开销很大,建议用局部变量存储:
- var doc = document,
- bd = doc.body,
- links = doc.getElementsByTagName('a'),
- goBtn = doc.getElementById('go-btn');
二、对象成员和原型链
对象中有两种成员类型:实例成员 和 原型成员。实例成员直接存在于对象实例中,原型成员则从对象原型中继承而来。
- var obj = {},
- var arr = [];
- function fun(){
- //do something
- }
obj的原型链:obj ---> Object.prototype
arr的原型链:arr ---> Array.prototype --->Object.prototype
fun的原型链:fun ---> Function.prototype ---> Object.prototype
所有对象都是Object的实例,所以都会继承Object.prototype中的方法,如:hasOwnProperty、isPropertyOf、toString
arr调用toString时,要一级一级搜索原型链,直到Object.prototype。可见存在的位置越深,寻找就越慢。
搜索对象成员本身就比 从字面量或局部变量中读取数据 代价高,再加上遍历原型链,更慢。
若要多次读取同一个对象属性,最佳做法是将属性值保存到局部变量中,避免多次查找带来的性能开销。
JavaScript数据存取的性能问题的更多相关文章
- 高性能JavaScript(数据存取)
数据存取分为4各部分 存取位置 作用域及改变作用域 原型以及原型链 缓存对象成员值 存取位置 JavaScript 有4中基本的数据存取位置 字面量:字面量代表自身,不存于特定的位置.比如这个的匿名函 ...
- JS性能优化——数据存取
首先,了解几个概念: 字面量:它只代表自身,不存储在特定的位置.JavaScript中的字面量有:字符串.数字.布尔值.对象.数组.函数.正则,以及特殊的null和undefined值 本地变量:使用 ...
- 高性能JS笔记2——数据存取
数据存取性能而言: 字面量>本地变量>数组元素>对象成员 一.标识符解析的性能 标识符解析是有代价的,一个标识符的位置越深,它的读写速度也就越慢. 局部变量的读写速度是最快的,全局变 ...
- 高性能Js—数据存取
数据存取 JavaScript中四中基本的数据存取位置 字面量:不存于某个变量内 本地变量:var定义的 数组元素 对象成员 字面量.全局变量读取速度 > 数组项.对象成员 .因为局部变量存在于 ...
- Laxcus大数据管理系统2.0(5)- 第三章 数据存取
第三章 数据存取 当前的很多大数据处理工作,一次计算产生几十个GB.或者几十个TB的数据已是正常现象,驱动数百.数千.甚至上万个计算机节点并行运行也已经不足为奇.但是在数据处理的后面,对于这种在网络间 ...
- 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- JavaScript 数据访问(通译自High Performance Javascript 第二章) [转]
JavaScript 数据访问(通译自High Performance Javascript 第二章) JavaScript 数据访问(翻译自High Performance Javascript ...
- 【HANA系列】【第一篇】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第一篇]SAP HANA XS ...
- 13 个最佳 JavaScript 数据网格库
13 个最佳 JavaScript 数据网格库 转自:开源中国 www.oschina.net/translate/best-javascript-data-grid-libraries Java ...
随机推荐
- swift-字符和字符串
OC定义字符: char charValue = 'a'; swift定义字符: var charValue : Character = "a" Unicode 国际标准的文本编码 ...
- Linux:常用命令
文件压缩.解压 网络.进程 磁盘.文件使用情况 内存使用 1.文件压缩.解压 1)tar.gz文件解压: .bin.tar.gz 解压到指定目录: (指定的目录是存在的) .bin. 2)zip 文件 ...
- 实现CheckBox的三种选中状态(全选、半选、不选)在GridView中模拟树形的功能
度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...
- 04.ubuntu下kvm 命令行安装64位ubuntu报"Couldn't find hvm kernel for Ubuntu tree."的问题
1.安装ubuntu时使用的virt-install的配置: virt-install \ --name test4 \ --ram 1024 \ --disk path=/data/01_ubunt ...
- MySql in子句 效率低下优化
MySql in子句 效率低下优化 背景: 更新一张表中的某些记录值,更新条件来自另一张含有200多万记录的表,效率极其低下,耗时高达几分钟. where resid in ( ); 耗时 365s ...
- python sokct 包详解
1. getaddrinfo简介getaddrinfo可解析得到IPv6地址,而gethostbyname仅能得到IPv4地址.getaddrinfo在Python的socket包中,以下为pytho ...
- 两年来的core折腾之路几点总结,附上nginx启用http2拿来即用的配置
序:一年多没更新博客园的内容了,core已经发生了翻天覆地的变化,想起2014年这时候,我就开始了从当时还叫k的那套preview都不如的vnext搭建这套系统,陆陆续续它每一次升级,我也相应地折腾, ...
- QinQ技术浅析
作者: | 上传时间:2009-11-16 | 关键字: QinQ技术(也称Stacked VLAN 或Double VLAN)是指将用户私网VLAN标签封装在公网VLAN标签中,使报文带着两 ...
- 前端小知识点---html换行被解析为空格的相关知识
这个系列主要记录一下常被忽略但又经常产生影响的知识点,纯做个记录,方便查询 html换行被解析为空格也是常说的3像素空隙的问题,根据测试不同浏览器产生的空隙大小会不一样,Chrome,Firefox, ...
- VUE---Missing space before function parentheses
解决方法: