ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.03k stars 1.2k forks source link

Gridster.destroy() increases memory use #280

Open dasmall opened 10 years ago

dasmall commented 10 years ago

I'm seeing increased memory usage via Chrome DevTools' Heap Snapshot feature when I call Gridster.destroy() on the example markup on the site.

Are there any solid means by which I can definitely free up memory when clearing a grid?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="jquery.coords.js"></script>
<script type="text/javascript" src="jquery.collision.js"></script>
<script type="text/javascript" src="jquery.draggable.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="jquery.gridster.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.gridster.css"/>
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

            <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
            <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
            <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

            <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

            <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
            <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
        </ul>
    </div>
    <script>
        $(function(){ //DOM Ready

            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140]
            });

            gridster = $(".gridster ul").gridster().data('gridster');

        });
    </script>
</body>
</html>

In my tests I'll see memory use rise 0.1MB with that simple example. With my production dashboard the jump is even greater and has caused Chrome to crash.

bondt commented 9 years ago

Did you try clearning the nulling gridster ?