几次ajax调用后，Web浏览器变慢或无响应

时间：2010-05-24 12:45:44

标签： jquery ajax performance

我是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-->

问题发现，成功处理程序中的tablesorter和固定标头导致问题，但如果我把它们放在处理程序之外，它们将无法工作，我应该把它们放在哪里？或者我该如何做到这两个功能，非常感谢!!!!

服务器端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 个答案:

答案 0 :(得分：2)

嗯，不太确定，但如果你不是每次都删除（或覆盖）#sortme或.tbl，那么这些行可能与你的性能问题有关：< / p> 

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

我对这些函数没有任何了解，但可能是每次执行Ajax调用时都将处理程序绑定到元素。只需将它们绑定一次，看看它是否会变好。

<强>更新

将它们放在外面可能就足够了，例如：

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

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

至于tablesorter插件，它有一个更新方法（请参阅examples），因此您可以将其放在success方法中：

success: function(date) {
    //...
    $("#sortme").trigger("update"); 
}

答案 1 :(得分：2)

您很容易受到 SQL injection ：

的攻击 
$repID = $_POST['repID'];

[...]

$whereClause = "WHERE repID='$repID'";

答案 2 :(得分：1)

没有仔细阅读我头脑中的代码......我可以告诉你，你的Javascript很可能会造成内存泄漏。

尝试调整您的Javascript代码以更好地处理其创建的对象，您应该注意到改进。这篇文章（也链接到其他一些好文章）可以帮助您入门：

Resolving JavaScript Memory Leaks

答案 3 :(得分：1)

鉴于您问题中的信息，很难知道减速的来源是什么。

就我个人而言，我会使用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("...时“泄漏”。您的成功处理程序未正确清理。

答案 4 :(得分：0)

您的脚本似乎没问题，但我想知道您的data内部是否有任何单引号？

答案 5 :(得分：0)

我的表遇到了数据重载问题。加载我的表需要10秒钟。所以我使用了3rd-party data table tool。它执行服务器端脚本。值得花时间实施。

在脚本块的开头删除cdata remark标记。使用Firebug并查看它是否多次加载click事件。每次单击时选择Firebug中的脚本选项卡。我打赌你有内存泄漏。

答案 6 :(得分：0)

我使用了您提供的其他信息来编写测试用例（http://pastebin.com/6S3RU0Fs）。使用此测试用例，每次单击“单击”链接时，Web浏览器进程会释放越来越多的内存，而不会释放回操作系统，这表示内存泄漏。注释第15行会导致内存泄漏问题消失，所以我很确定问题出在fixedtableheader插件中。

只要不多次调用fixedtableheader()，您仍然可以使用fixedtableheader插件。相反，您可以使用tablesorter插件的“更新”功能。为此，您需要稍微修改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），则始终使用数据库和用户输入转义所有文本。

通过将静态HTML移动到HTML文件中来改变您的Javascript，仅在页面加载时调用tablesorter()和fixedtableheader()，使用PHP脚本中的数据来设置内部HTML #sortme <tbody>，并在#sortme上触发“更新”事件。我修改了测试用例以向您显示我的意思（http://pastebin.com/qFn2jRLB）。

相关问题
最新问题