0

We have a PHP web application that relies on javascript and jquery. We have a create/read/update/delete page where users can edit content. The content is added/edited/deleted using AJAX, so there's no full page reload.

After 1-2 hours of working on the same page, the page is loading very slow and the browser freezes.

How can I debug and fix this issue? I guess there's a javascript function that keeps running. Is there a way to find this kind of bugs? Is there a js debug tool that can help me in this case?

UPDATE

On each add, 44 empty divs are added to the body. May this create a serious performance penalty? I tested locally and with 10 000 empty divs the website was working ok, but with 100 000 it was very slow.

Pascut
  • 3,291
  • 6
  • 36
  • 64
  • use the very comprehensive tools provided in most browsers these days (e.g. Chrome is very good) to profile your application. Start adding console logging, watch your network tab for performance of ajax queries, and that queries are ending and not too many running together, check that elements are added/removed correctly, use the JS, memory and CPU profilers to check performance. etc. etc. Without seeing any code no-one can give you direct help. Use the tools at your disposal to do some detailed debugging. – ADyson Nov 22 '17 at 10:53

1 Answers1

0

Debugging Javascript is very simple if you are using any modern browser such as Chrome.

You can press F12 on Chrome to bring up the inspector then you can goto the console which serves you all the javascript logs. To debug the specific program, you can add console.log()'s to your code and debug in that way.

Generally this problem could be that you're filling up the web page with DOM elements without clearing some of the older ones. If you have a list of several thousand DOM elements the browser can work slowly.

However without any code I can't really provide you with a better answer.

Classified
  • 560
  • 1
  • 7
  • 21
  • I can't provide code because we have lots of js files. So I have no idea where is the problem. But from your suggestion I'm thinking about clearing the browser cache/session from time to time. Too many DOM elements sound like a serious problem. Thanks for your advice. – Pascut Nov 22 '17 at 10:37
  • try to see in network tab if any network calls are made. – user7325973 Nov 22 '17 at 10:56
  • 2
    Just for the sake of clarity, it's worth to note that however many great coders say that they too mostly rely on console.log when debugging javascript, actually it is not exactly a debugging tool. Check this this too: https://stackoverflow.com/a/66431/1038431 – Laszlo T Nov 22 '17 at 11:08
  • On each create ajax call, 44 empty divs are added to the body. May this create a serious performance penalty? I tested locally and with 10 000 empty divs the website was working ok, but with 100 000 it was very slow. – Pascut Nov 22 '17 at 12:26
  • HTML only creates performance issues on the client side, and will in no way or form affect the server. Again using the network tab in the Google Chrome Inspector will shine light on load times and so on - I recommend you try and use that for some performance debugging. – Classified Nov 24 '17 at 08:11