Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

JavaScript DOM manipulation is slow

So I admit this is a very isolated situation. But I inherited a project as work that is essentially a massive tables of data, some data is a parent and other data is a child being represented as rows in said table. Our servers are reporting information and we take that information and export some JSON and then render the table with that info using some AJAX. We use the tree-tables library to make collapsible rows and create the relationship between the data in the table rows.

All rows render be default in their collapsed (closed) state, they wanted an option to click a toggle to show all/hide all or expand all those rows and or hide all those rows .

We accomplish this with this little bit of code

$('.toggle').click(function () {
        if($(this).text() == "show all") {
            $('#ertsTable').treetable('expandAllParents');
            $(this).text("hide all");
        } else if ($('.toggle').text() == "hide all") {
            $("#ertsTable").treetable('collapseAll');
            $(this).text('show all');
        }
    });

The problem is we are now manipulating thousands of DOM elements and it locks up the browser. I would like to actually off load the duty of rending such massive data to the back-end as apposed to having the client side handle it, but alas that is not going to happen. They need to get this iteration out the door and we will come back to the table to hash out a better way to do all this in the future.

So is there a better way to handle this javascript so its not such a resource hog?