17

I am building a mobile app using jquery mobile, jquery and php back-end. My problem is in certain pages I am sending and receiving multiple ajax requests which are visibly slowing down the performance and causes memory leaks which leads to the crashing of app in low network connections

What are the possible ways of optimizing the ajax requests?

note:- I am sending some ajax requests periodically(like once in a second) Some ajax are sent based on events

  • Can you please post your Code here? – Chandresh M Oct 15 '15 at 07:16
  • @Chandresh Its quite big mate, I am just looking for general guidelines and ideas –  Oct 15 '15 at 07:17
  • 1
    "*like once in a second*" That's a lot. Do you need to poll that frequently? If you request more and more without them completing, the browser will throttle your requests, perhaps resulting in a buildup of queued requests. You might want to double-check that code for memory leaks. Also, maybe look into using web sockets if you need to update so quickly. – Alexander O'Mara Oct 15 '15 at 07:22
  • It is a social app actually so naturally it have to get info from the partner periodically, that's why we are sending those frequent requests, also the project is almost complete and i am just bug fixing we cannot change the working framework or technologies (like websocket) used so only looking for workaround measures –  Oct 15 '15 at 07:27
  • 2
    Long-polling your server like that can end up causing problems and a significant overhead. You should consider using [NodeJS](https://nodejs.org/en/) and [socket.io](http://socket.io/) to handle the broadcast of events and data, and use PHP to help initialize the UI. This will at least resemble real-time interactions a little better, and let Node handle the heartbeat on its own. – maiorano84 Oct 21 '15 at 22:24
  • If your application's Use case is real time than try meteor framework. It has built in support for cordova and development is relatively fast. – kishan Oct 27 '15 at 05:29

8 Answers8

26

First off, correctly written Ajax code does not leak memory. So, if you actually have a leak, that is likely caused by incorrectly written code, not by using Ajax.

Then, there are a number of optimizations you can consider.

  1. Combine multiple requests to your server into one larger request. This saves roundtrips to the server, saves bandwidth, saves battery and increases performance.

  2. Don't poll every second. Be smarter about how often you poll your server.

  3. Lengthen the polling interval to vary it based on likely activity, switch to "long polling" or switch to a webSocket so you can do server push with no polling.

  4. Analyze what is causing excessive memory consumption and fix bugs or redesign to curtail that. There is no reason that lots of Ajax calls should "leak" memory. It will chew up battery life, but need not leak memory if coded correctly.

Oh, and don't hesitate to pull up some high scale social web apps that already exist, open the debugger, switch to the network tab and study the heck out of what they are doing. You may as well learn from high scale apps that already have solved this issue.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
3

Long Polling Is Better Than Polling

If you poll in a set interval it is probably better if you set a timeout on server-side and wait to return a message until a given number of loops. This makes especially sense for SPA. However if you poll, you should increase the time intervall with every empty response you get.

Group Requests By Events, Not By Entity

Let's say you poll every 10 seconds, to retrieve new messages. Moreover you poll every 10 seconds to retrieve more notifications. Instead of doing two requests you should only do one ajax request and return one big json response, which you then use to modify DOM elements on the client side.

Use Server-Sent Events Or Sockets If Possible

Sockets or Server-Sent Events will result in much less requests and will only notify you if something actually happened on the server side. Here is a good comparison.

Community
  • 1
  • 1
oshell
  • 8,923
  • 1
  • 29
  • 47
2

Here are few things you can do

Firstly

  • Get rid of all the memory leaks. Put your application in to a sandbox and give it the toughest time you can to record any memory leaks. Investigate them and correct your code.

Then

  • Reduce the number of requests. Carefully research on the best thresholds in your application and only trigger your requests at theses. Try to batch your requests and put them in to a single request whenever possible.

  • Use GET requests whenever possible. They are comparably simple and would act fast. This step is important for an application which triggers a lot of requests in its operation.

  • Choose the data format carefully. It could be plain text, JSON or XML. Figure out the one that have the lowest impact on your application and switch to that appropriately. Configure your server to use data compression if possible.

  • Optimize the server. Use proper Expire or Cache-Control headers for the content being servers. Use ETags if possible.

  • Try putting your content on a CDN. This may place the resources in a geographically closer location to the user and make your application work faster.

Charlie
  • 22,886
  • 11
  • 59
  • 90
1

Also, If you want to make a chat server or send fast messages to the server, you should use webSockets like socket.io .

Noctisdark
  • 350
  • 3
  • 17
1

There are mainly 3 steps for optimization (minimize) jQuery AJAX calls:

  • Either pass the done callback function as an argument when calling your function
  • return the jqXhr object from the function, and assign the done callback
  • Alternatively switch to using jQuery.ajax() instead, and pass the entire options object

Please refer this link : How to optimize (minimize) jQuery AJAX calls

Community
  • 1
  • 1
Joe Mike
  • 1,150
  • 1
  • 9
  • 16
0

You can use the cache feature of the Ajax call for this that helps you to get all data in first during the request and stored in cache and from next time no Ajax request happened and data manipulation done using cached data only.

Also, you can only optimize Ajax call request and response time by reducing the amount of data requested and sent while Ajax call. This can be done only by removing unwanted data during Ajax call.

Other than that, all optimization depends on code and database logic. To increase performance and reduce app crashing, optimized code and database logic helps you.

Kamal Negi
  • 1
  • 3
0
  1. Create variable with ajax callback and use it
  2. Each second you create new xhr request instance, that will be in memory until done callback executes.Better way is to create new ajax request on previous ajax complete, that means you will have only one xhr request instance at time.

  3. After data send to server, clean your object data, for example:

    array.length = 0; object = null; image.src = ""; file = null;

Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
0

As @jfriend00 said, Ajax requests don't generate memory leaks issues...

this is what your code probably do!

The best way to do what you need is to open a Socket Layer with your Data Layer Service, so, instead of a polling, you can be notified when a domain-model change occurs.

Checkout at Socket.io...

If you don't want to implement a Socket Layer, I think there aren't many way to increase performances...

One thing that, in addition - of course - to the code improvement operations (refactoring, ecc.), in my opinion, you can do is to implement a "Tail Management System"...

  • Study how Promises work (es6, jQuery, Q, bluebird)
  • Create A QueueService, a simple Javascript Class that knows how to serialize all (Ajax) tasks (promises);
  • Interpose the QueueService between Controllers and Data Layer Access Services
  • Implement a simple lightweight CacheSystem that prevents unnecessary AjaxRequests!
Hitmands
  • 13,491
  • 4
  • 34
  • 69