JavaScript避免内存泄露及内存管理技巧_javascript技巧

本文实例讲述了JavaScript避免内存泄露及内存管理技巧,非常实用。分享给大家供大家参考之用。具体方法如下:

本文内容源自谷歌WebPerf(伦敦WebPerf集团),2014年8月26日。

一般来说,高效的JavaScript Web应用必须流畅,快速。与用户交互的任何应用程序,都需要考虑如何确保内存有效使用,因为如果消耗过多,页面就会崩溃,迫使用户重新加载。而你只能躲在角落哭泣。

自动垃圾收集是不能代替有效的内存管理的,特别是在大型,长时间运行的Web应用程序中。本文中,我们将演示如何通过Chrome的DevTools对内存进行有效的管理。

并了解如何解决性能问题,如内存泄漏,频繁的垃圾收集暂停,和整体内存膨胀,那些真正让你耗费精力的东西。

Addy Osmani在他的PPT中展示了很多会在Chrome V8中产生内存泄漏的示例:

1) Delete一个Object的属性会让此对象变慢(多耗费15倍的内存)

var o = { x: 'y' };
delete o.x; //此时o会成一个慢对象
o.x; //

var o = { x: 'y' };
o = null; //应该这样

2) 闭包

在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。

var a = function() {
 var largeStr = new Array(1000000).join('x');
 return function() {
  return largeStr;
 }
}();

3) DOM泄露

当原有的COM被移除时,子结点引用没有被移除则无法回收。

var select = document.querySelector;
var treeRef = select('#tree');

//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf');
var body = select('body');

body.removeChild(treeRef);

//#tree不能被回收入,因为treeRef还在
//解决方法:
treeRef = null;

//tree还不能被回收,因为叶子结果leafRef还在
leafRef = null;

//现在#tree可以被释放了。

4) Timers计(定)时器泄露

定时器也是常见产生内存泄露的地方:

for (var i = 0; i < 90000; i++) {
 var buggyObject = {
  callAgain: function() {
   var ref = this;
   var val = setTimeout(function() {
    ref.callAgain();
   }, 90000);
  }
 }

 buggyObject.callAgain();
 //虽然你想回收但是timer还在
 buggyObject = null;
}

5) 调试内存

Chrome自带的内存调试工具可以很方便地查看内存使用情况和内存泄露:

在 Timeline -> Memory 点击record即可:

希望本文所述对大家javascript程序设计的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 内存管理
, 内存泄露
技巧
如何避免内存泄露、android避免内存泄露、java如何避免内存泄露、java避免内存泄露、避免内存泄露,以便于您获取更多的相关知识。

时间: 2024-12-03 12:54:13

JavaScript避免内存泄露及内存管理技巧_javascript技巧的相关文章

关于js内存泄露的一个好例子_javascript技巧

我把别人的例子改了一下,觉得这样写更紧凑!套用别人的原话,当一个DOM对象包含一个Js对象的引用(例如一个Event Handler), 而这个Js对象又持有对这个DOM对象的引用时,一个环状引用就行成了,于是在ie下就出现了内存泄露.点击"运行代码"并打开任务管理器看内存变化.分别在ie8和ff下测试,差距不用多说. 运行代码 复制代码 代码如下: <html>  <head>    <title>Memory leak</title>

JavaScript内存管理介绍_javascript技巧

简介 低级语言,比如C,有低级的内存管理基元,想malloc(),free().另一方面,JavaScript的内存基元在变量(对象,字符串等等)创建时分配,然后在他们不再被使用时"自动"释放.后者被称为垃圾回收.这个"自动"是混淆并给JavaScript(和其他高级语言)开发者一个错觉:他们可以不用考虑内存管理. 内存生命周期 不管什么程序语言,内存生命周期基本一致: 1.分配你所需要的内存 2.使用它(读.写) 3.当它不被使用时释放   ps:和"把

内存跟踪,内存泄露,内存

这个坑其实很大很大...... 虽然这名字很长,但其实就是一码事,试问你做内存跟踪不是为了看泄露?试问你看到了泄露和碎片不回去优化?哈哈 理论知识咱不具备,所以现实点,从实践出发好了. 我一向干点啥事,都是被勾引的,先是要解决问题,然后又觉得不够过瘾,就变成优化问题本身.这回的任务原本是内存泄露,我东一榔头,西一锤子的,却是满世界乱敲,敲到最后,原来的问题早湮灭了,剩下的,只是自己的问题而已. 内存问题由来已久,最早做c++的时候,包装的很好,这个东西其实不明显,因为多半是new和delete,

浅析JavaScript 调试方法和技巧_javascript技巧

javascript简称JS,是网页的前端开发语言,直接运行在浏览器上,以前我刚开始学的时候,并不懂这个,所以我每次开发或调试它,都是在vs.net里面,现在想想,实在是太痛苦了,其实JS是执行在浏览器的,而不是执行在服务器的,所以根本没必要在网页开发软件里搞,直接在浏览器中即可调试 浏览器开发者工具 我个人最喜欢Chrome开发者工具. 虽然Safari和Firefox无法达到Chrome那么高的标准,但它们也在逐渐改善.在Firefox中,可以将Firebug和Firefox开发者工具组合使

JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解_javascript技巧

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!以下内容大部分是来自原文,我在原文的基础

silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)_javascript技巧

案例背景: 整个功能其实就是从数据库取出数据,然后在界面上播放,简单地说就是类似网上在线看视频,听音乐,只不过我取的是字符串数据,而他们取的是流文件数据.把整体数据分成十份,十个线程同时向数据库取数据(并发提高速度)放在十个队列中,另外一个线程从队列中取数据拿出来到界面上播放,可以拖动播放进度,停止,暂停,重新播放,控制播放速度.恩,功能听起来似乎很简单,做起来也不是很难.但是后面发现的一些问题,以及顺着这些问题往下挖掘,挖掘了一些我认为值得记住的东西. 关键东西: 1. siliverligh

Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用方法,请看下面的文章javascript indexOf函数使用说明JavaScript indexOf忽略大小写_javascript技巧

javascript实现下雪效果【实例代码】_javascript技巧

原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

基于JavaScript实现瀑布流效果(循环渐近)_javascript技巧

1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container