How to avoid browser crashes when using ajax requests

Why use ajax anyways?

Using ajax requests on your website can be very useful when you would like to load content asynchronously after the page has finished loading. Ajax can help decrease the TTFB (time to first byte) because some parts of the website’s logic can be taken out of the main synchronous request and instead loaded afterwards. However if not used correctly ajax requests can slow down the browser and in the worst case completely crash a website. Since you want to always offer a smooth and fast user experience you should make sure to follow best practices. This quick tip shows you two ways to reduce the amount of browser resources needed and therefore speed up your website.

Avoid DOM manipulations in loops

One thing you should always remember is that you want to make sure to use the least amount of DOM manipulations possible. So imagine you are sending an ajax request to the database to get an array of data and then for each array element you want to create a new HTML element in the DOM. Check out this example of how it should not be done:

$.ajax(
{
type: "POST",
url: "/app/ajax/some.php",
dataType: "json",
data: {foo:bar}
}).success(function(data)
{
$.each(data, function(key, val)
{
$('someElement').append('<div>' + val.name + '</div>');});});});


In this example the data coming from the server will be added to the DOM one by one. We create a loop by using $.each and append a new element to the DOM for each loop. Since every DOM manipulation needs a certain amount of resources you can imagine that when performing hundreds or even more DOM manipulations this can slow down the whole website and in some cases even crash the whole site.

Instead you want to make sure to combine all the data from your database and then only add one single command for adding the data to the DOM. Check out this example to better understand it:


$.ajax(
{
type: "POST",
url: "/app/ajax/some.php",
dataType: "json",
data: {foo:bar}}).success(function(data)
{
var content = null;
$.each(data, function(key, val)
{
content += '<div>' + val.name + '</div>';});
$('someElement').html(content);});


By combining all the data you would like to asynchronously add to your website and only do one single DOM manipulation you can drastically reduce the amount of browser resources needed which will result in a faster and smoother user experience.

Make sure your ajax requests don’t pile up

Another problem which might lead to a browser crash is this: in some cases you might use ajax to regularly reload specific parts of your website. For example you might build a chat function using ajax (not recommended) and therefore need to check the database every few seconds to see if a new comment has been added which you would then display in the chat. You would probably set an interval of for example two seconds so that every two seconds an ajax request will be send to the server which would fetch the data from your database.

Sounds good however you might run into a problem: if your ajax request suddenly takes an unusual high amount of time – for example because of a server slowdown or because of a week internet connection – you will end up with multiple ajax requests at the same time. So since you have set an interval to two seconds the browser won’t care about your ajax request not being completed yet and send another request. Your ajax requests would start piling up which will more and more slow down the browser and might end in your website crashing. If you experience this problem and you are using jQuery there is quick fix to make sure you only send ajax requests once all requests have finished. By using $.active you can find out the number of currently active ajax requests. So before starting a new ajax requests you can simply check whether the previous requests have finished.


if(!$.active)
{
$.ajax(
{
type: "POST",
url: "/app/ajax/some.php",
dataType: "json",
data: {foo:bar}}).success(function(data)
{
var content = null;
$.each(data, function(key, val)
{
content += '<div>' + val.name + '</div>';});
$('someElement').html(content);});}


By making sure $.active is zero you can ensure that no ajax requests will pile up and slow down your whole website. In the worst case (if a previous request is still running) the next ajax request will simply be dumped and the content will only be updated in the next interval loop.