Browser Crashes with Large JavaScript Application - Performance Issues

Other Questions JavaScript
1

I’m working on a web application that has become really large and I’m running into performance problems. The page contains around 3000 interactive elements that need click handlers, plus multiple nested collapsible sections using Bootstrap. The total page size is close to 1MB.

The main issue is that after users interact with the page for some time, their browser starts to freeze and sometimes crashes completely. I’m wondering what I can do to improve performance and prevent these crashes, or if I need to redesign the entire approach.

For instance, I’m currently attaching events like this:

$(".add-btn").click(function () {
    increaseValue($(this).closest("table-row"));
});

Would it be better to use event delegation instead:

$(document).on("click", ".add-btn", function() {
    increaseValue($(this).closest("table-row"));
});

Any suggestions would be helpful.

2

I’ve dealt with similar browser crashes in enterprise applications, and the problem usually stems from memory accumulation rather than just DOM size. Your event delegation approach is correct, but there’s another critical issue you should investigate - are you properly unbinding events when elements get dynamically removed or updated? In my experience, applications that crash after extended use often have event listeners that pile up over time. Every time you modify the DOM without cleaning up associated handlers, you’re creating phantom references that prevent garbage collection. This gradually eats up memory until the browser gives up. Another thing to check is whether you’re storing large objects in closures within those event handlers. JavaScript engines struggle to release memory when closures hold references to heavy data structures. Consider moving your data handling logic outside the event callbacks and using data attributes or lightweight identifiers instead of storing full objects in the DOM scope.

3

Event delegation is definitely the right direction, but you’re dealing with a fundamental architecture problem here. I ran into something similar with a dashboard that had grown organically over time. The real issue isn’t just the event handlers - it’s that you’re trying to manage 3000 interactive elements simultaneously in the DOM.

What worked for me was implementing virtual scrolling or pagination to only render visible elements. Even with proper event delegation, having that many DOM nodes creates memory pressure that will eventually cause crashes. Consider breaking your interface into smaller chunks that load on demand.

Also check if you’re creating memory leaks by not properly cleaning up references when elements are removed. Use browser dev tools to monitor memory usage over time - if it keeps climbing during normal usage, you’ve got leaks that need addressing before any other optimizations will matter.

4

yeah event delegation will help but honestly 1MB page size is gonna kill performance no matter what. try lazy loading those collapsible sections - dont render them until user actually clicks to expand. also consider using vanilla js instead of jquery for better performance, especially with that many elements. browsers just werent meant to handle 3k interactive elements at once