web browser become slow or no response after several ajax calls
|
12:05 AM |
No comments |
web browser become slow or no response after several ajax calls
I'm totally newbie to jquery and ajax, my recently project is to help the representatives (reps) to manage customer quotations online. I have a page which displays all the quotations in a big table.
I've managed to use ajax to fetch and display the quotations which associate to a particular rep after i click that rep's name. But the only problem is the speed of response. The first few clicks are ok and very smooth. But after several tries, the response become slow and I cant even scroll down the webpage, and later on the web browser craches....
Please have a look at my ajax code. here it is:
Problem found, the tablesorter and fixed header inside the success handler are causing the problem, but if I put them outside the handler, they will not work, where should i put them? or how should i do to have that two functions, many thanks!!!!
Server side php code:
"; if ($repID == "All") { $html.= "![](\"images/users.png\")
Quotations from all representatives."; } else { $html.= " Quotations from $repID."; } $html.= "
"; $html.= "
"; echo $html; ?> Response sample from Firebug:
Quotations from NA.
Answer by Justin Niessner for web browser become slow or no response after several ajax calls
Without walking through the code in my head...I can tell you that your Javascript is more than likely presenting a memory leak.
Try tuning your Javascript code to better handle the objects its creating and you should notice an improvement. Here's an article (that links to a couple of other good articles as well) to get you started:
Resolving JavaScript Memory Leaks
Answer by Felix Kling for web browser become slow or no response after several ajax calls
Mmmh not quite sure but if you are not removing (or overwriting) #sortme or .tbl every time, then these lines might be related to your performance problem:
$("#sortme").tablesorter(); $('.tbl').fixedtableheader(); I have no insight in these functions but it could be that you bind handlers to the elements every time you do the Ajax call. Just bind them once and see if it gets better.
Update:
Maybe it is sufficient to put them outside, e.g.:
$(function() { $("#sortme").tablesorter(); $('.tbl').fixedtableheader(); $("a.repID").click(function(){...}); }); As for the tablesorter plugin, it has an update method (see examples), so you can put this inside your success method:
success: function(date) { //... $("#sortme").trigger("update"); } Answer by Mottie for web browser become slow or no response after several ajax calls
Your scripting appears to be ok, but I'm wondering if your data could possibly have any single quotes inside of it?
Answer by Daniel Trebbien for web browser become slow or no response after several ajax calls
Given just the information in your question, it's hard to know what the source of the slowdown is.
Personally I would use Firebug to "profile" the code by stepping through important lines. Set a breakpoint on the $.ajax({ line as well as in the success handler (on the $("#container").html(' line). When inside the success handler, and stopped on that first line, click the "step over" button of Firebug to see how long it takes to execute each line. Also, if there is a large time delay between the sending of the AJAX request and execution of the success handler, then your server-side script may be a major contributor to the performance degradation.
One small thing that you can do right away: move the id='loading' attribute from the tag. The $("#loading").fadeOut(500, function() {$(this).remove();}); is basically causing a element to "leak" with every call to the success handler and $('div#loader').append(".... Your success handler is not properly cleaning up.
Answer by Dolph for web browser become slow or no response after several ajax calls
You are vulnerable to SQL injection:
$repID = $_POST['repID']; [...] $whereClause = "WHERE repID='$repID'"; Answer by Gutzofter for web browser become slow or no response after several ajax calls
I had a problem with data overload with my tables. It would take up to 10 seconds to load my tables. So I used a 3rd-party data table tool. It does server-side scripting. Well worth the time to implement.
Get rid of the cdata remark tag at the start of script block. Use Firebug and see if it is loading the click event more than once. Select script tab in Firebug each time you click. I bet you have memory leak.
Answer by Daniel Trebbien for web browser become slow or no response after several ajax calls
I used the additional information that you have provided to write up a test case (http://pastebin.com/6S3RU0Fs). Using this test case, each time that I click the "click" link, the web browser process comsumes more and more memory which it does not release back to the operating system, indicating a memory leak. Commenting out line 15 causes the memory leak issue to disappear, so I'm pretty sure that the problem is in the fixedtableheader plugin.
You can still use the fixedtableheader plugin as long as you don't call fixedtableheader() multiple times. Instead, you can use the "update" functionality of the tablesorter plugin. To do this, you need to modify your PHP and Javascript somewhat.
The PHP script is altered to only output the table rows:
"; echo "" . htmlspecialchars($quoteWeek) . " "; echo "" . htmlspecialchars($quoteID) . " "; echo "" . htmlspecialchars($quoteRev) . " "; echo "" . htmlspecialchars($customerName) . " "; echo "" . htmlspecialchars($repIDs) . " "; echo "" . htmlspecialchars($quoteDesc) . " "; echo "" . htmlspecialchars($quoteValue) . " "; echo "" . htmlspecialchars($quoteProject) . " "; echo "" . htmlspecialchars($quotePM) . " "; echo "" . htmlspecialchars($quoteDR) . " "; echo "" . htmlspecialchars($quoteDS) . " "; echo "" . htmlspecialchars($followUp) . " "; echo "" . htmlspecialchars($quoteStatus) . " "; echo "" . htmlspecialchars($furtherAction) . " "; echo "" . htmlspecialchars($UKConNo) . " "; echo "" . htmlspecialchars($clientRef) . " "; echo "" . htmlspecialchars($CorS) . " "; echo "Note that I made some changes for efficiency and security:
- Use
mysql_fetch_assocrather thanmysql_fetch_arraybecause you aren't indexing columns by number. echothe HTML directly rather than building up the$htmlstring, which is echoed anyway.- Escape all user input with
mysql_real_escape_stringif it is used to build an SQL query (helps prevent SQL injection attacks). - Consistently escape all text from databases and user input with
htmlspecialcharsand/orurlencodeif it is sent back as HTML (helps prevent script injection/XSS).
Your Javascript is altered by moving the static HTML into the HTML file, calling tablesorter() and fixedtableheader() only once each on page load, using the data from the PHP script to set the inner HTML of the #sortme , and triggering the "update" event on #sortme. I have modified the test case to show you what I mean (http://pastebin.com/qFn2jRLB).
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
Popular Posts
0 comments:
Post a Comment