How to stop intense Javascript loop from freezing the browser

by

I would ditch the “each” function in favour of a for loop since it is faster. I would also add some waits using the “setTimeout” but only every so often and only if needed. You don’t want to wait for 5ms each time because then processing 3500 records would take approx 17.5 seconds.

Below is an example using a for loop that processes 100 records (you can tweak that) at 5 ms intervals which gives a 175 ms overhead.

var xmlElements = $(xmlDoc).find('Object');
var length = xmlElements.length;
var index = 0;
var process = function() {
  for (; index < length; index++) {
    var toProcess = xmlElements[index];
    // Perform xml processing
    if (index + 1 < length && index % 100 == 0) {
        setTimeout(process, 5);
    }
  }
};
process();

I would also benchmark the different parts of the xml processing to see if there is a bottleneck somewhere that may be fixed. You can benchmark in firefox using firebug’s profiler and by writing out to the console like this:

// start benchmark
var t = new Date();
// some xml processing
console.log("Time to process: " + new Date() - t + "ms");

Hope this helps.

More Related Contents:

  1. jQuery: load pages with ajax, caching, clean URLs and back button support
  2. Which is the fastest way to loop? [for curiosity]
  3. When to use Vanilla JavaScript vs. jQuery?
  4. What’s the fastest way to loop through an array in JavaScript?
  5. Access outside variable in loop from Javascript closure [duplicate]
  6. How to split a long array into smaller arrays, with JavaScript
  7. Are loops really faster in reverse?
  8. Good ways to improve jQuery selector performance?
  9. What is the cost of ‘$(this)’?
  10. Microsoft CDN for jQuery or Google CDN? [closed]
  11. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  12. Why cache jQuery objects?
  13. Closures in a for loop
  14. Best way to execute js only on specific page
  15. Iterating through/Parsing JSON Object via JavaScript
  16. Is optimizing JavaScript for loops really necessary?
  17. How to loop through array in jQuery?
  18. One big javascript file or multiple smaller files? [duplicate]
  19. How do I use Browserify with external dependencies?
  20. Sort a table fast by its first column with Javascript or jQuery
  21. Javascript (jQuery) performance measurement and best practices (not load time)
  22. Looping through Markers with Google Maps API v3 Problem
  23. Uncaught ReferenceError: $ is not defined?
  24. How to detect Ctrl+V, Ctrl+C using JavaScript?
  25. Setting query string using Fetch GET request
  26. Selecting Part of String inside an Input Box with jQuery
  27. How to build simple tabs with jQuery?
  28. Why my $.ajax showing “preflight is invalid redirect error”?
  29. Capturing result of window.onbeforeunload confirmation dialog
  30. Can you have multiple lines in an element?

Leave a Comment