高性能Javascript笔记 数据的存储与访问性能优化

局部变量也就可以理解为在函数内部定义的变量，很明显访问局部变量要比域外的变量要快，因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章)。变量在作用域链的位置越深，访问所需要的时间就越长，全局变量总是最慢的，因为它们位于作用域链的最后一个变量对象。

每种数据类型的访问都需要付出点性能代价，对于直接量和局部变量基本都能消费得起，而访问数组项和对象成员则要代价高点。下图显示了不同浏览器，分别对这四种数据类型进行了200'000次操作所用的时间。

由上图可以看出，要想优化代码的性能，那么尽量使用直接量和局部变量，限制数组项和对象成员的访问次数(将对象成员用一个局部变量来保存)。

首先我们需要了解一下对象成员的访问过程。其实函数就是一个特殊的对象，所以对象成员的访问跟函数的内部变量的访问都差不多，都是基于链的查找，前者是原型链，后者是作用域链，只是怎么个链法有点差别而已。

对象成员包含属性和方法，如果该成员是一个函数就称为方法，否则就称为属性。
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对象与原形的关系如下：

访问book对象成员toString的过程是这样的，当book.toString()被调用时，后台对成员进行名为”toString”的搜 索，首先从实例book本身开始，如果在book发现名为”toString”的成员，则搜索结束，否则继续向__proto__指向的原型对象搜索，如 果在Object的原形对象都找不到该成员，则表示该成员未定义。通过这种方式，book就可以访问它的原型对象所拥有的每个属性或方法。

对象的另一高级用法就是模拟类和继承类，我喜欢叫这样用法的对象为对象类。继承对象类主要就是依靠原型链来完成的，这个知识点太多需要另外详细 说明。通过上面的对象成员搜索过程，访问对象成员的速度，随着原型链的越深，搜索的速度就越慢。下图就显示了对象成员在原型链中所处的深度与访问时间的关 系：

由上图可清楚的知道，每深入原型链一层都会增加性能的损失，所以像那种遍历对象成员的操作开销很大。还有另外一种常用且损耗性能的做法就是嵌套对象 成员(如window.location.href)，像这种最好的做法就是减少点的次数了。比如location.href就比 window.location.href快。

好了,总结起来就一句话：一个属性或方法在原型链的位置越深，访问它的速度就越慢。解决办法就是：将经常使用的对象成员，数组项和域外的变量存入局部变量中，然后访问这个局部变量。

赞 (0)

相关推荐

  • 实现JavaScript高性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

  • 利用php实现一周之内自动登录存储机制（cookie、session、localStorage）

    cookie.session.localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧. 1.cookie用来存储用户相关数据,存储的位置在用户本地: 首先是登录界面定义: <form action="server.php" method="post"> <input type="text" name="username" class=&qu

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • JavaScript笔记之数据属性和存储器属性

    在javascript中,对象的属性分为数据属性和存储器属性两种: 两种属性的区别 我们使用Object.defineProperty()先来直观的感受一下这两者的不同. 使用Object.defineProperty()对数据属性进行设置的方法如下 var obj = {}; Object.defineProperty(obj, "prop", { value: 1, writable: true, //可写性 enumerable: true, //可枚举性 configurabl

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • cookie解决微信不能存储localStorage的问题

    在开发基于微信的Web页面时,发现有些机型不能存储信息到localStorage中,或者是页面一旦关闭,存储的信息也失效了. 用cookie来替代localStorage,存储一些简单的数据.上网查找了一下,发现w3school上已有不错的解决方案. 设置cookie: function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) do

  • javascript创建和存储cookie示例

    什么是cookie?cookie是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值. cookie使用场景: 名字cookie当访问者首次访问页面时,他或她也许会填写他/她们的名字.名字会存储于 cookie 中.当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词.而名字则是从 cookie 中取回的. 密码cookie当访问者首次

  • JavaScript中localStorage对象存储方式实例分析

    本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

  • 在localStorage中存储对象数组并读取的方法

    频繁ajax请求导致页面响应变慢.于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse(); $.ajax({ type: "get", async: "true", url: "", data: {}, dataType: "jsonp", success: func

随机推荐