jQuery清空标签内容--防止内存泄露

  写jQuery代码是,经常会做清空一个标签内容的操作。那么你是怎么做的呢?比如

<div id="box">
    <p>星期一</p>
    <p>星期二</p>
    <p>星期三</p>
    <p>星期四</p>
    <p>星期五</p>
    <p>星期六</p>
    <p>星期天</p>
</div>

  我们要清除掉box中的所有元素。

  你可能会好不犹豫的写下代码:

$('#box').html('');

  首先必须承认,这么写能实现清空box的效果。

  但是,这么写不好。因为这么写有可能会引起内存泄露。

  何谓内存泄露?就是你的程序由于某种原因,占用了过多的内存空间,并且,在你不需要使用这些内存空间之后,仍然无法释放掉这些内存空间;当你由此占用的空间越来越多,达到一定程度后,就有可能引起程序崩溃;此所谓内存泄露。

  那问题来了,这个$obj.html('')方法为啥会引起内存泄露?(ps:这里的$obj表示一个jQuery对象)

  $obj.html('')只清空该对象的内部元素,但是不会清楚注册在内部元素上的事件。

  比如上例中,如果div#box里的p标签上还注册有事件,那么这些事件代码当然要占用内存。如果你使用$('#box').html('')来清空所有的p,那么box的内容确实被清空了,但是注册在这些p标签上的事件代码并没有被清理掉,这些事件代码仍然保留在内存里,并且无法得到释放。

  解决之道:使用empty()

$('#box').empty();

  empty()会清空一切,包括那些被清理掉的元素身上注册的事件,这样就防止发生内存泄露。

  ps:你可能会说,现在内存动不动都4G,8G,你要是因为这卡了,是你电脑太烂。你非要这么说,我也无话可说。不过话说回来了,有更好的,正确的,为啥不用呢?勿以善小而不为嘛

  

posted @ 2018-11-03 23:45  天天向上吧  阅读(9091)  评论(0编辑  收藏  举报