实现JavaScript高性能的数据存储

 更新时间:2016年12月11日 09:51:12   作者:leslie·Zhao  
本文主要对JavaScript的数据存储,产生性能问题的原因,内存泄露的几种情况等做了简要分析介绍,需要的朋友可以看下

1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员。

一般来说:[字面量,局部变量]运行速度>[数组,对象成员]

2.内部属性包含了一个函数被创建的作用域中对象的集合。这个集合被称为作用域链。

3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象)。

所以多次调用同一个函数会导致创建多个执行环境。

4.函数执行过程

每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据。该过程搜索执行环境的作用域链。正是这种搜索过程影响了性能。

5.标识符解析的性能

全局变量总是存在于执行环境作用域的最末端。局部变量是第一顺位解析。

经验法则:如果某个跨作用域的值在函数中被引用一次以上,那么就把他存储到局部变量中。

如:

function initUI(){
 var bd=document.body;
 //后面有多次doucument这个全局对象的调用
}
//->优化后
function initUI(){
 var doc=document;
  bd=doc.body;
 //把doucument这个全局对象的引用存储到局部变量doc中
 
}

6.改变作用域链

一般来说,一个执行环境的作用域链不会改变的。

<1>with可以临时改变作用域链

width用来给对象的所有属性创建一个变量

function initUI(){
 with(document){
 var bd=body; 
 }
}

当代码执行到with时,执行环境的作用域链被临时改变了。一个新的变量对象呗创建,它包含了参数指定对象的所有属性。这个对象呗推入作用域链的首位,所以这时候所有的局部变量处于的哥第二个作用域链对象中,因此访问代价更高了。

<2>try-catch

try语句发生错误的时候,执行过程会自动跳转到catch中。然后把异常对象推入一个变量对象并置于作用域的首位

注意:一旦catch子语句执行完毕,作用域链就会返回到之前的状态。

7.闭包引发的性能问题

闭包是JavaScript最强大的特性之一。

由于闭包包含了执行了与环境作用域链相同对象的引用,函数的活动对象不会被销毁,造成更多的内存开销。

关注的性能点:频繁访问跨作用域的标识符时,每次访问都会带来性能损失。

Start:19:41:45 2015-11-21 引用自by Aaron:http://www.cnblogs.com/aaronjs/p/3370176.html

8.内存泄露

内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。在C++中,因为是手动管理内存,内存泄露是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存,正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。

内存泄露的几种情况

  • 循环引用
  • Javascript闭包
  • DOM插入顺序

一个DOM对象被一个Javascript对象引用,与此同时又引用同一个或其它的Javascript对象,这个DOM对象可能会引发内存泄漏。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用,引用DOM元素的对象或DOM对象的引用需要被赋值为null。

具体的就深入讨论了,这里的总结

  • JS的内存泄露,无怪乎就是从DOM中remove了元素,但是依然有变量或者对象引用了该DOM对象。然后内存中无法删除。使得浏览器的内存占用居高不下。这种内存占用,随着浏览器的刷新,会自动释放。
  • 而另外一种情况,就是循环引用,一个DOM对象和JS对象之间互相引用,这样造成的情况更严重一些,即使刷新,内存也不会减少。这就是严格意义上说的内存泄露了。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JS实现的简单tab切换功能完整示例

    JS实现的简单tab切换功能完整示例

    这篇文章主要介绍了JS实现的简单tab切换功能,结合完整实例形式分析了javascript基于事件响应实现页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • JavaScript获取网页表单action属性的方法

    JavaScript获取网页表单action属性的方法

    这篇文章主要介绍了JavaScript获取网页表单action属性的方法,涉及javascript操作表单属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • OpenLayers3加载常用控件使用方法详解

    OpenLayers3加载常用控件使用方法详解

    这篇文章主要为大家详细介绍了OpenLayers3加载常用控件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 实例分析Array.from(arr)与[...arr]到底有何不同

    实例分析Array.from(arr)与[...arr]到底有何不同

    这篇文章通过实例主要给大家分析介绍了关于Array.from(arr)与[...arr]到底有何不同的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • JavaScript字符串的json的自定义加密解密函数示例

    JavaScript字符串的json的自定义加密解密函数示例

    JavaScript自定义函数中使用String.fromCharCode函数将输入字符串中每个字符的Unicode编码加1,然后将加密后的字符拼接成一个新字符串返回,调用JSON.stringify函数转换json成一个普通字符串
    2023-12-12
  • JS实现的网页上的颜色拾色器

    JS实现的网页上的颜色拾色器

    这篇文章主要介绍了JS实现网页上的颜色拾色器,需要的朋友可以参考下
    2016-04-04
  • js使用cookie记录用户名的方法

    js使用cookie记录用户名的方法

    这篇文章主要介绍了js使用cookie记录用户名的方法,通过完整实例形式分析了JavaScript针对cookie的创建、赋值及删除等操作技巧,以及通过cookie记录用户登录信息的方法,需要的朋友可以参考下
    2015-11-11
  • JS连接SQL数据库与ACCESS数据库的方法实例

    JS连接SQL数据库与ACCESS数据库的方法实例

    这篇文章主要介绍了JS连接SQL数据库与ACCESS数据库的方法实例,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript实现生成GUID(全局统一标识符)

    JavaScript实现生成GUID(全局统一标识符)

    这篇文章主要介绍了JavaScript实现生成GUID(全局统一标识符),本文写成了一个GUID生成类,使用也非常方便,需要的朋友可以参考下
    2014-09-09
  • layui点击导航栏刷新tab页的示例代码

    layui点击导航栏刷新tab页的示例代码

    今天小编就为大家分享一篇layui点击导航栏刷新tab页的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论