实现JavaScript高性能的数据存储


Posted in Javascript onDecember 11, 2016

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对象之间互相引用,这样造成的情况更严重一些,即使刷新,内存也不会减少。这就是严格意义上说的内存泄露了。

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

Javascript 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
浅析javascript函数表达式
Feb 10 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
探索Javascript中this的奥秘
Dec 11 #Javascript
实例浅析js的this
Dec 11 #Javascript
解析js如何获取css样式
Dec 11 #Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 #Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 #Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
基于JavaScript实现随机颜色输入框
Dec 10 #Javascript
You might like
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
PHP基础知识介绍
2013/09/17 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
如何实现JS函数的重载
2006/09/22 Javascript
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Three.js加载外部模型的教程详解
2017/11/10 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python编程入门的一些基本知识
2015/05/13 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python之多进程与多线程的使用
2021/02/23 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
项目合作意向书范本
2014/04/01 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js