веб-браузер замедляется или не отвечает после нескольких вызовов ajax - PullRequest
3 голосов
/ 24 мая 2010

Я новичок в jquery и ajax, мой недавний проект - помочь представителям (представителям) управлять предложениями клиентов онлайн. У меня есть страница, которая отображает все цитаты в большой таблице.

Мне удалось использовать ajax для извлечения и отображения цитат, связанных с конкретным представителем, после того, как я щелкнул по имени этого представителя. Но единственная проблема - скорость реакции. Первые несколько кликов в порядке и очень плавные. Но после нескольких попыток ответ становится медленным, и я даже не могу прокрутить веб-страницу вниз, а позже веб-браузер ломается ....

Пожалуйста, посмотрите на мой код AJAX. вот оно:

<!-- Data display area -->
<br /><input type="image" id="printbtn" value="Print" src="images/printer.png"/><br />

  <div id="container">
    <div id="content">

    </div>  
  </div>  
<!-- Data display area -->  

<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER--> 
<script type="text/javascript">
//<![CDATA[ 
$(function(){

$("a.repID").click(function(){ 
    $('div#loader').append("<p align='center'><img src='images/loadingbar2.gif' id='loading' /></p>"); 
 var repID = $(this).attr("title");   

$.ajax({
    type:'POST',
    url:'quote_info.php',
    data:'repID=' + repID,
    cache: false,

    success:function(data)
    {
       $("#container").html('<div id="content">' + data + '</div>');
       $("#loading").fadeOut(500, function() {$(this).remove();});
       $("#sortme").tablesorter();
       $('.tbl').fixedtableheader(); 
    }
});
return false;
});
});
</script>
<!-- AJAX FETCH QUOTES DATA + Tablesorter + FIXED TABLE HEADER-->

Обнаружена проблема, сортировщик таблиц и фиксированный заголовок в обработчике успеха вызывают проблему, но если я помещу их вне обработчика, они не будут работать, куда мне их поместить? или как мне сделать, чтобы эти две функции, большое спасибо !!!!

PHP-код на стороне сервера:

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$conn=mysql_connect("localhost","root","");
mysql_select_db("auma",$conn);

$repID = $_POST['repID'];

if ($repID == "All") {
    $whereClause = "";
} else {
    $whereClause = "WHERE repID='$repID'";
} 

$quoteinfoSQL = "SELECT q.quoteWeek, q.quoteID, q.quoteRev, q.customerName, q.repID, 
             q.quoteDesc, q.quoteValue, q.quoteProject, q.quotePM, q.quoteDR, q.quoteDS, 
             a.followUp, a.quoteStatus, a.furtherAction, a.UKConNo, a.clientRef, a.CorS  
             FROM auma_quote q 
             INNER JOIN auma_action a on a.quoteID = q.quoteID 
             $whereClause  
             ORDER BY q.quoteWeek DESC, q.quoteID DESC";



// execute the statement
$rsQuoteinfo = mysql_query( $quoteinfoSQL );

$html.= "<br />";

if ($repID == "All") {
    $html.= "<img src=\"images/users.png\" />&nbsp; Quotations from all representatives.</h6>";
} else {
    $html.= "<img src=\"images/users.png\" />&nbsp; Quotations from <b>$repID</b>.</h6>";
} 



$html.= "<br />";


$html.= "<table id=\"sortme\" class=\"tbl\">";
$html.= "<thead>";
$html.= "<tr>
         <th>Week</th>
         <th>Quote ID</th>
         <th>Rev</th>
         <th>Customer</th>
         <th>Rep ID</th>
         <th>Description</th>
         <th>Gross Value</th>
         <th>Project</th>
         <th>GP%</th>
         <th>Date Received</th>
         <th>Date Sent</th>
         <th>Follow up Action</th>
         <th>Result</th>
         <th>Further Action</th>
         <th>UK Contract No.</th>
         <th>Client Ref.</th>
         <th>Contractor or Specification</th>
         <th></th>
         </tr>";
$html.= "</thead>";
$html.= "<tbody>";

while($quoteinfoRow = mysql_fetch_array($rsQuoteinfo)){
    $quoteWeek = $quoteinfoRow['quoteWeek'];
    $quoteRev = $quoteinfoRow['quoteRev'];
    $customerName = htmlspecialchars($quoteinfoRow['customerName']);
    $repIDs= $quoteinfoRow['repID'];
    $quoteID= $quoteinfoRow['quoteID'];
    $quoteDesc = htmlspecialchars($quoteinfoRow['quoteDesc']);
    $quoteValue = htmlspecialchars($quoteinfoRow['quoteValue']);
    $quoteProject = htmlspecialchars($quoteinfoRow['quoteProject']);
    $quotePM = $quoteinfoRow['quotePM'];
    $quoteDR = $quoteinfoRow['quoteDR'];
    $quoteDS = $quoteinfoRow['quoteDS'];
    $followUp = htmlspecialchars($quoteinfoRow['followUp']);
    $quoteStatus = htmlspecialchars($quoteinfoRow['quoteStatus']);
    $furtherAction = htmlspecialchars($quoteinfoRow['furtherAction']);
    $UKConNo = $quoteinfoRow['UKConNo'];
    $clientRef = $quoteinfoRow['clientRef'];
    $CorS = htmlspecialchars($quoteinfoRow['CorS']);

    $html.= "<tr>";
    $html.= "<td>$quoteWeek</td>";
    $html.= "<td>$quoteID</td>";
    $html.= "<td>$quoteRev</td>";
    $html.= "<td>$customerName</td>";    
    $html.= "<td>$repIDs</td>";
    $html.= "<td>$quoteDesc</td>";
    $html.= "<td>$quoteValue</td>";
    $html.= "<td>$quoteProject</td>";
    $html.= "<td>$quotePM</td>";
    $html.= "<td>$quoteDR</td>";
    $html.= "<td>$quoteDS</td>";
    $html.= "<td>$followUp</td>";
    $html.= "<td>$quoteStatus</td>";
    $html.= "<td>$furtherAction</td>";
    $html.= "<td>$UKConNo</td>";
    $html.= "<td>$clientRef</td>";
    $html.= "<td>$CorS</td>";

    $html.= "<td align=\"center\"><a href=\"quotedetails.php?quoteID=$quoteID&amp;customerName=$customerName\" ><input type=\"image\" src=\"images/edit.png\" /></a></td>";

    $html.= "</tr>";
}  // while



$html.= "</tbody>";
$html.= "</table>";
$html.= "<br />";
echo $html;


?>

Пример ответа от Firebug:

<br /><img src="images/users.png" />&nbsp; Quotations from <b>NA</b>.</h6>
<br />
<table id="sortme" class="tbl">
<thead>
<tr>

         <th>Week</th>

         <th>Quote ID</th>

         <th>Rev</th>

         <th>Customer</th>

         <th>Rep ID</th>

         <th>Description</th>

         <th>Gross Value</th>

         <th>Project</th>

         <th>GP%</th>

         <th>Date Received</th>

         <th>Date Sent</th>

         <th>Follow up Action</th>

         <th>Result</th>

         <th>Further Action</th>

         <th>UK Contract No.</th>

         <th>Client Ref.</th>

         <th>Contractor or Specification</th>

         <th></th>

         </tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>Q42389</td>
<td>0</td>
<td>Worldwide Procurement Services Ltd</td>
<td>NA</td>
<td>1 x Motor (Z011.274)</td>
<td>£2,954</td>
<td>COM: 649862</td>
<td>spares net</td>
<td>2010-02-28</td>
<td>2010-03-03</td>
<td></td>
<td>ORDERED</td>
<td></td>
<td>28824</td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q42389&amp;customerName=Worldwide Procurement Services Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
<tr>
<td>1</td>
<td>Q41883</td>
<td>1</td>
<td>Ital (International Trading Alliance) Ltd</td>
<td>NA</td>
<td>1xSAM10.1E75</td>
<td>£2,059</td>
<td>COM: 553697</td>
<td>25% net</td>
<td>2010-01-05</td>
<td>2010-01-08</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align="center"><a href="quotedetails.php?quoteID=Q41883&amp;customerName=Ital (International Trading Alliance) Ltd" ><input type="image" src="images/edit.png" /></a></td>
</tr>
</tbody>
</table>
<br />

Ответы [ 7 ]

2 голосов
/ 24 мая 2010

Вы уязвимы для SQL-инъекций :

$repID = $_POST['repID'];

[...]

$whereClause = "WHERE repID='$repID'";
2 голосов
/ 24 мая 2010

Мммх, не совсем уверен, но если вы не удаляете (или не перезаписываете) #sortme или .tbl каждый раз, тогда эти строки могут быть связаны с вашей проблемой производительности:

$("#sortme").tablesorter();
$('.tbl').fixedtableheader();

У меня нет понимания этих функций, но может случиться так, что вы привязываете обработчики к элементам каждый раз, когда делаете вызов Ajax. Просто свяжите их один раз и посмотрите, станет ли лучше.

Обновление:

Может быть, достаточно выставить их снаружи, например ::1016*

$(function() {
    $("#sortme").tablesorter();
    $('.tbl').fixedtableheader();

    $("a.repID").click(function(){...});  
});

Что касается плагина tablesorter, у него есть метод обновления (см. examples ), так что вы можете поместить его в свой метод success:

success: function(date) {
    //...
    $("#sortme").trigger("update"); 
}
1 голос
/ 24 мая 2010

Учитывая только информацию в вашем вопросе, трудно понять, каков источник замедления.

Лично я бы использовал Firebug , чтобы «профилировать» код, проходя через важные строки. Установите точку останова в строке $.ajax({, а также в обработчике успеха (в строке $("#container").html('<div id="content">' + data + '</div>');). Находясь внутри обработчика успеха и останавливаясь на этой первой строке, нажмите кнопку «перешагнуть» в Firebug, чтобы увидеть, сколько времени требуется для выполнения каждой строки. Кроме того, если между отправкой AJAX-запроса и выполнением обработчика успеха имеется большая задержка, ваш серверный сценарий может стать основным фактором снижения производительности.

Одна маленькая вещь, которую вы можете сделать прямо сейчас: переместите атрибут id='loading' из тега <img> в тег <p>. $("#loading").fadeOut(500, function() {$(this).remove();}); в основном вызывает утечку элемента <p> при каждом вызове обработчика успеха и $('div#loader').append(".... Ваш обработчик успеха не очищает должным образом.

1 голос
/ 24 мая 2010

Не пробираясь по коду в моей голове ... Я могу сказать вам, что ваш Javascript, скорее всего, представляет утечку памяти.

Попробуйте настроить свой код Javascript, чтобы лучше обрабатывать создаваемые им объекты, и вы должны заметить улучшение. Вот статья (которая также содержит ссылки на несколько других хороших статей), чтобы вы могли начать:

Устранение утечек памяти в JavaScript

0 голосов
/ 26 мая 2010

Я использовал предоставленную вами дополнительную информацию для написания контрольного примера (http://pastebin.com/6S3RU0Fs).. При использовании этого контрольного примера каждый раз, когда я нажимаю ссылку "щелкнуть", процесс веб-браузера потребляет все больше и больше памяти который он не возвращает обратно в операционную систему, указывая на утечку памяти. Комментирование строки 15 приводит к исчезновению проблемы утечки памяти, поэтому я почти уверен, что проблема в плагине fixedtableheader . 1005 *

Вы по-прежнему можете использовать плагин fixedtableheader, если вы не вызываете fixedtableheader() несколько раз. Вместо этого вы можете использовать «обновление» функциональности плагина tableorter. Для этого вам нужно немного изменить свой PHP и Javascript.

PHP-скрипт изменен для вывода только строк таблицы:

<?php
header('Content-Type: text/html; charset=ISO-8859-1');
$conn=mysql_connect("localhost","root","");
mysql_select_db("auma",$conn);

$repID = $_POST['repID'];

if ($repID == "All") {
    $whereClause = "";
} else {
    $whereClause = "WHERE repID='" . mysql_real_escape_string($repID, $conn) . "'";
} 

$quoteinfoSQL = "SELECT q.quoteWeek, q.quoteID, q.quoteRev, q.customerName, q.repID, 
             q.quoteDesc, q.quoteValue, q.quoteProject, q.quotePM, q.quoteDR, q.quoteDS, 
             a.followUp, a.quoteStatus, a.furtherAction, a.UKConNo, a.clientRef, a.CorS  
             FROM auma_quote q 
             INNER JOIN auma_action a on a.quoteID = q.quoteID 
             $whereClause  
             ORDER BY q.quoteWeek DESC, q.quoteID DESC";



// execute the statement
$rsQuoteinfo = mysql_query( $quoteinfoSQL, $conn );


while($quoteinfoRow = mysql_fetch_assoc($rsQuoteinfo)){
    $quoteWeek = $quoteinfoRow['quoteWeek'];
    $quoteRev = $quoteinfoRow['quoteRev'];
    $customerName = $quoteinfoRow['customerName'];
    $repIDs= $quoteinfoRow['repID'];
    $quoteID= $quoteinfoRow['quoteID'];
    $quoteDesc = $quoteinfoRow['quoteDesc'];
    $quoteValue = $quoteinfoRow['quoteValue'];
    $quoteProject = $quoteinfoRow['quoteProject'];
    $quotePM = $quoteinfoRow['quotePM'];
    $quoteDR = $quoteinfoRow['quoteDR'];
    $quoteDS = $quoteinfoRow['quoteDS'];
    $followUp = $quoteinfoRow['followUp'];
    $quoteStatus = $quoteinfoRow['quoteStatus'];
    $furtherAction = $quoteinfoRow['furtherAction'];
    $UKConNo = $quoteinfoRow['UKConNo'];
    $clientRef = $quoteinfoRow['clientRef'];
    $CorS = $quoteinfoRow['CorS'];

    $html.= "<tr>";
    echo "<td>" . htmlspecialchars($quoteWeek) . "</td>";
    echo "<td>" . htmlspecialchars($quoteID) . "</td>";
    echo "<td>" . htmlspecialchars($quoteRev) . "</td>";
    echo "<td>" . htmlspecialchars($customerName) . "</td>";    
    echo "<td>" . htmlspecialchars($repIDs) . "</td>";
    echo "<td>" . htmlspecialchars($quoteDesc) . "</td>";
    echo "<td>" . htmlspecialchars($quoteValue) . "</td>";
    echo "<td>" . htmlspecialchars($quoteProject) . "</td>";
    echo "<td>" . htmlspecialchars($quotePM) . "</td>";
    echo "<td>" . htmlspecialchars($quoteDR) . "</td>";
    echo "<td>" . htmlspecialchars($quoteDS) . "</td>";
    echo "<td>" . htmlspecialchars($followUp) . "</td>";
    echo "<td>" . htmlspecialchars($quoteStatus) . "</td>";
    echo "<td>" . htmlspecialchars($furtherAction) . "</td>";
    echo "<td>" . htmlspecialchars($UKConNo) . "</td>";
    echo "<td>" . htmlspecialchars($clientRef) . "</td>";
    echo "<td>" . htmlspecialchars($CorS) . "</td>";

    echo "<td align=\"center\"><a href=\"" . htmlspecialchars("quotedetails.php?quoteID=" . urlencode($quoteID) . "&customerName=" . urlencode($customerName)) . "\" ><input type=\"image\" src=\"images/edit.png\" /></a></td>";

    echo "</tr>";
}  // while

Обратите внимание, что я внес некоторые изменения для повышения эффективности и безопасности:

  • Используйте mysql_fetch_assoc вместо mysql_fetch_array, потому что вы не индексируете столбцы по номеру.
  • echo HTML, а не сборка строки $html, которая все равно повторяется.
  • Сбросить весь пользовательский ввод с помощью mysql_real_escape_string, если он используется для построения SQL-запроса (помогает предотвратить атаки с использованием SQL-инъекций).
  • Последовательно экранируйте весь текст из баз данных и пользовательского ввода с помощью htmlspecialchars и / или urlencode, если он отправляется обратно как HTML (помогает предотвратить внедрение скриптов / XSS).

Ваш Javascript изменяется, перемещая статический HTML в файл HTML, вызывая tablesorter() и fixedtableheader() только один раз при загрузке страницы, используя данные из скрипта PHP для установки внутреннего HTML #sortme <tbody> и запуск события "update" в #sortme. Я изменил тестовый пример, чтобы показать вам, что я имею в виду (http://pastebin.com/qFn2jRLB).

0 голосов
/ 24 мая 2010

У меня была проблема с перегрузкой данных в моих таблицах. Для загрузки моих таблиц потребуется до 10 секунд. Поэтому я использовал стороннюю таблицу данных . Он выполняет скрипты на стороне сервера. Стоит потратить время на реализацию.

Избавьтесь от тега примечания cdata в начале блока скрипта. Используйте Firebug и посмотрите, загружает ли он событие click более одного раза. Выбирайте вкладку скрипта в Firebug при каждом нажатии. Могу поспорить, у вас утечка памяти.

0 голосов
/ 24 мая 2010

Ваш сценарий, кажется, в порядке, но мне интересно, может ли ваш data иметь какие-либо одиночные кавычки внутри него?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...