图片 12

js内存泄露的几种情况详细探讨,Chrome开发者工具不完全指南

Chrome开发者工具不完全指南:(三、性能篇)

2015/06/29 · HTML5 · 2
评论 ·
Chrome

原文出处:
卖烧烤夫斯基   

卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括ElementsNetworkResources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需要这几个面板功能就可以了(再加上console面板这个万精油)。它们的作用大多数情况下是帮助你进行功能开发的。然而在你开发应用级别的网站项目的时候,随着代码的增加,功能的增加,性能会逐渐成为你需要关注的部分。那么网站的性能问题具体是指什么呢?在卤煮看来,一个网站的性能主要关乎两项,一是加载性能、二是执行性能。第一项可以利用Network来分析,我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验,不过在此之前,我强烈推荐你去阅读《web高性能开发指南》这本书中的十四条黄金建议,这是我阅读过的最精华的书籍之一,虽然只有短短的一百多页,但对你的帮助确实无法估量的。而第二项性能问题就体现在内存泄露上,这也是我们这篇文章探讨的问题——通过Timeline来分析你的网站内存泄露。

虽然浏览器日新月异,每一次网站版本的更新就意味着JavaScript、css的速度更加快速,然而作为一名前端人员,是很有必要去发现项目中的性能的鸡肋的。在众多性能优化中,内存泄露相比于其他性能缺陷(网络加载)不容易发现和解决,因为内存泄露设计到浏览器处理内存的一些机制并且同时涉及到到你的编写的代码质量。在一些小的项目中,当内存泄露还不足以让你重视,但随着项目复杂度的增加,内存问题就会暴露出来。首先内存占有过多导致你的网站响应速度(非ajax)变得慢,就感觉自己的网页卡死了一样;然后你会看到任务管理器的内存占用率飙升;到最后电脑感觉死了机一样。这种情况在小内存的设备上情况会更加严重。所以,找到内存泄露并且解决它是处理这类问题的关键。

在本文中,卤煮会通过个人和官方的例子,帮助诸位理解Timeline的使用方法和分析数据的方法。首先我们依然为该面板区分为四个区域,然后对它们里面的各个功能进行逐一介绍:

图片 1

虽然Timeline在执行它的任务时会显得花花绿绿让人眼花缭乱,不过不用担心,卤煮用一句话概括它的功能就是:描述你的网站在某些时候做的事情和呈现出的状态。我们看下区域1中的功能先:

图片 2

在区域1主题是一个从左到右的时间轴,在运行时它里面会呈现出各种颜色块(下文中会介绍)。顶部有一条工具栏,从左到右,一次表示:

1、开始运行Timeline检测网页。点亮圆点,Timline开始监听工作,在此熄灭圆点,Timeline展示出监听阶段网站的执行状态。

2、清除所有的监听信息。将Timeline复原。

3、查找和过滤监控信息。点击会弹出一个小框框,里面可以搜索或者显示隐藏你要找的信息。

4、手动回收你网站内内存垃圾。

5、View:监控信息的展示方式,目前有两种,柱状图和条状图,在展示的事例中,卤煮默认选择条状图。

6、在侦听过程中希望抓取的信息,js堆栈、内存、绘图等。。。。

区域2是区域1的完全版,虽然他们都是展示的信息视图,在在区域2种,图示会变得更加详细,更加精准。一般我们查看监控视图都在区域2种进行。

区域3是展示的是一些内存信息,总共会有四条曲线的变化。它们对应表示如下图所示:

图片 3

区域4中展示的是在区域2种某种行为的详细信息和图表信息。

在对功能做了简单的介绍之后我们用一个测试用例来了解一下Timeline的具体用法。

XHTML

<!DOCTYPE html> <html> <head>
<title></title> <style type=”text/css”> div{ height:
20px; widows: 20px; font-size: 26px; font-weight: bold; } </style>
</head> <body> <div id=”div1″> HELLO WORLD0
</div> <div id=”div2″> HELLO WORLD2 </div> <div
id=”div3″> HELLO WORLD3 </div> <div id=”div4″> HELLO
WORLD4 </div> <div id=”div5″> HELLO WORLD5 </div>
<div id=”div6″> HELLO WORLD6 </div> <div id=”div7″>
HELLO WORLD7 </div> <button id=”btn”>click me</button>
<script type=”text/javascript”> var k = 0; function x() { if(k
>= 7) return; document.getElementById(‘div’+(++k)).innerHTML = ‘hello
world’ } document.getElementById(‘btn’).addEventListener(‘click’, x);
</script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
            height: 20px;
            widows: 20px;
            font-size: 26px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="div1">
        HELLO WORLD0
    </div>
    <div id="div2">
        HELLO WORLD2
    </div>
    <div id="div3">
        HELLO WORLD3
    </div>
    <div id="div4">
        HELLO WORLD4
    </div>
    <div id="div5">
        HELLO WORLD5
    </div>
    <div id="div6">
        HELLO WORLD6
    </div>
    <div id="div7">
        HELLO WORLD7
    </div>
    <button id="btn">click me</button>
    <script type="text/javascript">
        var k = 0;
        function x() {
            if(k >= 7) return;
            document.getElementById(‘div’+(++k)).innerHTML = ‘hello world’
        }
        document.getElementById(‘btn’).addEventListener(‘click’, x);
    
    </script>
</body>
</html>

新建一个html项目,然后再Chrome中打开它,接着按F12切换到开发者模式,选择Timeline面板,点亮区域1左上角的那个小圆圈,你可以看到它变成了红色,然后开始操作界面。连续按下button执行我们的js程序,等待所有div的内容都变成hello
world的时候再次点击小圆圈,熄灭它,这时候你就可以看到Timeline中的图表信息了,如下图所示:

图片 4

在区域1中,左下角有一组数字2.0MB-2.1MB,它的意思是在你刚刚操作界面这段时间内,内存增长了0.1MB。底部那块浅蓝色的区域是内存变化的示意图。从左到右,我们可以看到刚刚浏览器监听了4000ms左右的行为动作,从0~4000ms内区域1中列出了所有的状态。接下来我们来仔细分析一下这些状态的具体信息。在区域2种,滚动鼠标的滚轮,你会看到时间轴会放大缩小,现在我们随着滚轮不断缩小时间轴的范围,我们可以看到一些各个颜色的横条:

图片 5

在操作界面时,我们点击了一次button,它耗费了大约1ms的时间完成了从响应事件到重绘节目的一些列动作,上图就是在789.6ms-790.6ms中完成的这次click事件所发生的浏览器行为,其他的事件行为你同样可以通过滑动滑轮缩小区域来观察他们的情况。在区域2种,每一种颜色的横条其实都代表了它自己的独特的意义:

图片 6

每次点击都回到了上面的图一样执行若干事件,所以我们操作界面时发生的事情可以做一个大致的了解,我们滑动滚轮把时间轴恢复到原始尺寸做个总体分析:

图片 7

可以看到,每一次点击事件都伴随着一些列的变化:html的重新渲染,界面重新布局,视图重绘。很多情况下,每个事件的发生都会引起一系列的变化。在区域2种,我们可以通过点击某一个横条,然后在区域4种更加详细地观察它的具体信息。我们以执行函数x为例观察它的执行期的状态。

图片 8

随着在事件发生的,除了dom的渲染和绘制等事件的发生之外,相应地内存也会发生变化,而这种变化我们可以从区域3种看到:

图片 9

在上文中已经向大家做过区域3的介绍,我们可以看到js堆在视图中不断地再增长,这时因为由事件导致的界面绘制和dom重新渲染会导致内存的增加,所以每一次点击,导致了内存相应地增长。同样的,如果区域3种其他曲线的变化会引起蓝色线条的变化,这是因为其他(绿色代表的dom节点数、黄色代表的事件数)也会占有内存。因此,你可以通过蓝色曲线的变化形势来确定其他个数的变化,当然最直观的方式就是观察括号中的数字变化。js内存的变化曲线是比较复杂的,里面参杂了很多因素。我们所列出来的例子实际上是很简单的。目前相信你对Timeline的使用有了一定的认识,下面我们通过一些Google浏览器官方的实例来更好的了解它的作用(因为观看示例都必须FQ,所以卤煮把js代码copy出来,至于简单的html代码你可以自己写。如果可以FQ的同学就无所谓了!)

(官方测试用例一)
查看内存增长,代码如下:

JavaScript

var x = []; function createSomeNodes() { var div, i = 100, frag =
document.createDocumentFragment(); for (;i > 0; i–) { div =
document.createElement(“div”); div.appendChild(document.createTextNode(i

  • ” – “+ new Date().toTimeString())); frag.appendChild(div); }
    document.getElementById(“nodes”).appendChild(frag); } function grow() {
    x.push(new Array(1000000).join(‘x’));
    createSomeNodes();//不停地在界面创建div元素 setTimeout(grow,1000); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var x = [];
 
function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i–) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " – "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join(‘x’));
    createSomeNodes();//不停地在界面创建div元素
    setTimeout(grow,1000);
}

通过多次执行grow函数,我们在Timeline中看到了一张内存变化的图:

图片 10

通过上图可以看出js堆随着dom节点增加而增长,通过点击区域1中顶部的垃圾箱,可以手动回收一些内存。正常的内存分析图示锯齿形状(高低起伏,最终回归于初始阶段的水平位置)而不是像上图那样阶梯式增长,如果你看到蓝色线条没有回落的情况,并且DOM节点数没有返回到开始时的数目,你就可以怀疑有内存泄露了。

下面是一个用异常手段展示的正常例子,说明了内存被创建了又如何被回收。你可以看到曲线是锯齿型的上下起伏状态,在最后js内存回到了初始的状态。(官方示例二)
  js代码如下:

JavaScript

var intervalId = null, params; function createChunks() { var div, foo,
i, str; for (i = 0; i < 20; i++) { div =
document.createElement(“div”); str = new Array(1000000).join(‘x’); foo =
{ str: str, div: div }; div.foo = foo; } } function start() { if
(intervalId) { return; } intervalId = setInterval(createChunks, 1000); }
function stop() { if (intervalId) { clearInterval(intervalId); }
intervalId = null; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var intervalId = null, params;
 
function createChunks() {
    var div, foo, i, str;
    for (i = 0; i < 20; i++) {
        div = document.createElement("div");
        str = new Array(1000000).join(‘x’);
        foo = {
            str: str,
            div: div
        };
        div.foo = foo;
    }
}
 
function start() {
    if (intervalId) {
        return;
    }
    intervalId = setInterval(createChunks, 1000);
}
 
function stop() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = null;
}

执行start函数若干次,然后执行stop函数,可以生成一张内存剧烈变化的图:

图片 11

还有很多官方实例,你可以通过它们来观察各种情况下内存的变化曲线,在这里我们不一一列出。在这里卤煮选择试图的形式是条状图,你可以在区域1中选择其他的显示方式,这个全靠个人的爱好了。总而言之,Timeline可以帮助我们分析内存变化状态(Timeline直译就是时间轴的意思吧),通过对它的观察来确定我的项目是否存在着内存泄露以及是什么地方引起的泄露。图表在展示上虽然很直观但是缺少数字的精确,通过示图曲线的变化我们可以了解浏览器上发生的事件,最主要的是了解内存变化的趋势。而如果你希望进一步分析这些内存状态,那么接下来你就可以打开Profiles来干活了。这将是我们这个系列的下一篇文章要介绍的。

1 赞 9 收藏 2
评论

图片 12

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

1、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。

复制代码 代码如下:

<div id=”myDiv”>
<input type=”button” value=”Click me” id=”myBtn”>
</div>
<script type=”text/javascript”>
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
document.getElementById(“myDiv”).innerHTML = “Processing…”;
}
</script>

应改成下面

复制代码 代码如下:

<div id=”myDiv”>
<input type=”button” value=”Click me” id=”myBtn”>
</div>
<script type=”text/javascript”>
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
btn.onclick = null;
document.getElementById(“myDiv”).innerHTML = “Processing…”;
}
</script>

或者采用事件委托

复制代码 代码如下:

<div id=”myDiv”>
<input type=”button” value=”Click me” id=”myBtn”>
</div>
<script type=”text/javascript”>
document.onclick = function(event){
event = event || window.event;
if(event.target.id == “myBtn”){
document.getElementById(“myDiv”).innerHTML = “Processing…”;
}
}
</script>

2、

复制代码 代码如下:

var a=document.getElementById(“#xx”);
var b=document.getElementById(“#xxx”);
a.r=b;
b.r=a;

复制代码 代码如下:

var a=document.getElementById(“#xx”);
a.r=a;

对于纯粹的 ECMAScript 对象而言,只要没有其他对象引用对象
a、b,也就是说它们只是相互之间的引用,那么仍然会被垃圾收集系统识别并处理。但是,在
Internet Explorer 中,如果循环引用中的任何对象是 DOM 节点或者 ActiveX
对象,垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中,直到浏览器关闭。
3、

复制代码 代码如下:

var elem = document.getElementById(‘test’);
elem.addEventListener(‘click’, function() {
alert(‘You clicked ‘ + elem.tagName);
});

这段代码把一个匿名函数注册为一个DOM结点的click事件处理函数,函数内引用了一个DOM对象elem,就形成了闭包。这就会产生一个循环引用,即:DOM->闭包->DOM->闭包…DOM对象在闭包释放之前不会被释放;而闭包作为DOM对象的事件处理函数存在,所以在DOM对象释放前闭包不会释放,即使DOM对象在DOM
tree中删除,由于这个循环引用的存在,DOM对象和闭包都不会被释放。可以用下面的方法可以避免这种内存泄露

复制代码 代码如下:

var elem = document.getElementById(‘test’);
elem.addEventListener(‘click’, function() {
alert(‘You clicked ‘ + this.tagName); // 不再直接引用elem变量
});

4、

复制代码 代码如下:

function bindEvent()
{
var obj=document.createElement(“XXX”);
obj.onclick=function(){
//Even if it’s a empty function
}
}

闭包非常容易构成循环引用。如果一个构成闭包的函数对象被指定给,比如一个
DOM
节点的事件处理器,而对该节点的引用又被指定给函数对象作用域中的一个活动(或可变)对象,那么就存在一个循环引用。
DOM_Node.onevent -<function_object.[[scope]] -<scope_chain
-<Activation_object.nodeRef -<DOM_Node。

形成这样一个循环引用是轻而易举的,而且稍微浏览一下包含类似循环引用代码的网站(通常会出现在网站的每个页面中),就会消耗大量(甚至全部)系统内存。
解决之道,将事件处理函数定义在外部,解除闭包

复制代码 代码如下:

function bindEvent()
{
var obj=document.createElement(“XXX”);
obj.onclick=onclickHandler;
}
function onclickHandler(){
//do something
}

或者在定义事件处理函数的外部函数中,删除对dom的引用(题外,《JavaScript权威指南》中介绍过,闭包中,作用域中没用的属性可以删除,以减少内存消耗。)

复制代码 代码如下:

function bindEvent()
{
var obj=document.createElement(“XXX”);
obj.onclick=function(){
//Even if it’s a empty function
}
obj=null;
}

5、

复制代码 代码如下:

a = {p: {x: 1}};
b = a.p;
delete a.p;

执行这段代码之后b.x的值依然是1.由于已经删除的属性引用依然存在,因此在JavaScript的某些实现中,可能因为这种不严谨的代码而造成内存泄露。所以在销毁对象的时候,要遍历属性中属性,依次删除。

  1. 自动类型装箱转换
    别不相信,下面的代码在ie系列中会导致内存泄露

复制代码 代码如下:

var s=”lalala”;
alert(s.length);

s本身是一个string而非object,它没有length属性,所以当访问length时,JS引擎会自动创建一个临时String对象封装s,而这个对象一定会泄露。这个bug匪夷所思,所幸解决起来相当容易,记得所有值类型做.运算之前先显式转换一下:

复制代码 代码如下:

var s=”lalala”;
alert(new String(s).length);

7、某些DOM操作
IE系列的特有问题
简单的来说就是在向不在DOM树上的DOM元素appendChild;IE7中,貌似为了改善内存泄露,IE7采用了极端的解决方案:离开页面时回收所有DOM树上的元素,其它一概不管。

您可能感兴趣的文章:

  • 解决JS内存泄露之js对象和dom对象互相引用问题
  • JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
  • 解决js函数闭包内存泄露问题的办法
  • 浅谈js
    闭包引起的内存泄露问题
  • JavaScript避免内存泄露及内存管理技巧
  • 容易造成JavaScript内存泄露几个方面
  • 关于js内存泄露的一个好例子
  • Javascript
    闭包引起的IE内存泄露分析
  • 权威JavaScript
    中的内存泄露模式
  • 总结JavaScript在IE9之前版本中内存泄露问题