一切正常，但脚本中有LAG？

Question

我有一个JavaScript/ajax代码有点大块，我想看看是否有可能使它更有效地运行没有取出任何功能。

我的问题是，我得到一个名为'getlastupdate.php'的页面，它只有14个数字，这些数字是数据库表最后更新的日期和时间。

格式为：

• 年 - 月 - 日-HH-MM：SS

下面是一个例子：20130724082105

我拿出 '：.-'，因为我们不需要它。

我的JavaScript代码将它与另一个反复从'getlastupdate.php'获取当前日期/时间的ajax GET进行比较。如果它发现两个值不相同，它会触发另一个GET来获取行信息。

它将更新后的行信息显示在浏览器中。最后，它获取整个更新的表并将其放回表（tablesorter）中。

一切似乎正常工作，但我注意到当脚本添加新的表信息和删除旧的一些LAG？或者至少我认为这是LAG的主要原因。

下面是代码：

<link type="text/css" rel="stylesheet" href="tablesorter/qtip/jquery.qtip.min.css" /> 
<script type="text/javascript" src="tablesorter/jquery-1.10.2.min.js"></script> 
<!-- blue theme stylesheet --> 
<link rel="stylesheet" href="tablesorter/final/theme.blue.css"> 
<!-- tablesorter plugin --> 
<script src="tablesorter/final/jquery.tablesorter.js"></script> 
<!-- tablesorter widget file - loaded after the plugin --> 
<script src="tablesorter/final/jquery.tablesorter.widgets.js"></script> 


<!-- START: toastmessage Notify --> 
    <link type="text/css" href="tablesorter/final/toastmessage/jquery.toastmessage-min.css" rel="stylesheet"/> 
    <script type="text/javascript" src="tablesorter/final/toastmessage/jquery.toastmessage-min.js"></script> 
<!-- END: toastmessage Notify --> 


<script type="text/javascript" src="tablesorter/qtip/jquery.qtip.min.js"></script> 


<script type="text/javascript"> 
var comper; 
function checkComper() { 
var SvInfo; 

    var onResponse = function(comperNow) { // comperNow is the latest date/time var 
    //check if comper has been set/first time method is called 
    if (comper === undefined) { 
     comper = comperNow; 
     return; 
    } 

    if (comper !== comperNow) { 


var Vinfoo; 
$.get("getlastupdate2.php", function(primaryAddType){ 
// alert("Data: " + primaryAddType); 
    Vinfoo = primaryAddType; 


// show a message to the visitor ----> 
//alert(Vinfoo); 
    $().toastmessage('showNoticeToast', Vinfoo); 


}); 
$('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! 

// and update comper to show the date/time from comperNow 
comper = comperNow; 
} 
}; 
$.get('getlastupdate.php', onResponse); 

} 
var tid = setInterval(checkComper, 2000); // repeat myself 

$(function() { 

$('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. <-- CUSTOM TOOLTIP 

var $table = $("table.tablesorter"); 
$("#append").click(function(e) { 
e.preventDefault(); 
$.get('updatetable.php', function(data) 
{ 
$table 
.find('tbody') 
.html('') 
.append(data); 
$table.trigger("update", [true]); 

$('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. <-- CUSTOM TOOLTIP 

}); 
}); 

    // call the tablesorter plugin 
$("table.tablesorter").tablesorter({ 
    theme: 'blue', 

    // hidden filter input/selects will resize the columns, so try to minimize the change 
    widthFixed : true, 

    //sortList: [[2,0],[1,0]], 

    // initialize zebra striping and filter widgets 
    widgets: ["saveSort", "zebra", "filter"], 

// headers: { }, 

    widgetOptions : { 

     // If there are child rows in the table (rows with class name from "cssChildRow" option) 
     // and this option is true and a match is found anywhere in the child row, then it will make that row 
     // visible; default is false 
     filter_childRows : false, 

     // if true, a filter will be added to the top of each table column; 
     // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false" 
     // if you set this to false, make sure you perform a search using the second method below 
     filter_columnFilters : true, 

     // css class applied to the table row containing the filters & the inputs within that row 
     filter_cssFilter : 'tablesorter-filter', 

     // class added to filtered rows (rows that are not showing); needed by pager plugin 
     filter_filteredRow : 'filtered', 

     // add custom filter elements to the filter row 
     // see the filter formatter demos for more specifics 
     filter_formatter : null, 

     // add custom filter functions using this option 
     // see the filter widget custom demo for more specifics on how to use this option 
     filter_functions : null, 

     // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately 
     // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus 
     filter_hideFilters : false, // true, (see note in the options section above) 

     // Set this option to false to make the searches case sensitive 
     filter_ignoreCase : true, 

     // if true, search column content while the user types (with a delay) 
     filter_liveSearch : true, 

     // jQuery selector string of an element used to reset the filters 
     filter_reset : 'button.reset', 

     // Delay in milliseconds before the filter widget starts searching; This option prevents searching for 
     // every character while typing and should make searching large tables faster. 
     filter_searchDelay : 300, 

     // if true, server-side filtering should be performed because client-side filtering will be disabled, but 
     // the ui and events will still be used. 
     filter_serversideFiltering: false, 

     // Set this option to true to use the filter to find text from the start of the column 
     // So typing in "a" will find "albert" but not "frank", both have a's; default is false 
     filter_startsWith : false, 

     // Filter using parsed content for ALL columns 
     // be careful on using this on date columns as the date is parsed and stored as time in seconds 
     filter_useParsedData : false 

    } 

    }); 

    // External search 
    // buttons set up like this: 
    // <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button> 
    $('button.search').click(function(){ 
    /*** first method *** data-filter-column="1" data-filter-text="!son" 
     add search value to Discount column (zero based index) input */ 
    var filters = [], 
     col = $(this).data('filter-column'), // zero-based index 
     txt = $(this).data('filter-text'); // text to add to filter 

    filters[col] = txt; 
    // using "table.hasFilters" here to make sure we aren't targetting a sticky header 
    $.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9 

    /** old method (prior to tablsorter v2.9 *** 
    var filters = $('table.tablesorter').find('input.tablesorter-filter'); 
    filters.val(''); // clear all filters 
    filters.eq(col).val(txt).trigger('search', false); 
    ******/ 

    /*** second method *** 
     this method bypasses the filter inputs, so the "filter_columnFilters" 
     option can be set to false (no column filters showing) 
    ******/ 
    /* 
    var columns = []; 
    columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ] 
    $('table').trigger('search', [ columns ]); 
    */ 

    return false; 
    }); 

}); 
</script> 

我发现LAG的来源，如果我注释掉这一行：

$('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! it will speed everything up but how do I get it to speed up or even slow down so that it doesn't lock up the current page. 

什么也加速向上的负荷，如果我注释掉这个：

var $table = $("table.tablesorter"); 
    $("#append").click(function(e) { 
    e.preventDefault(); 
    $.get('updatetable.php', function(data) 
    { 
    $table 
    .find('tbody') 
    .html('') 
    .append(data); 
    $table.trigger("update", [true]); 

// ******** +++++++++++ **************  

    $('[title!=""]').qtip({}); // <-- CUSTOM TOOLTIP THIS SLOWS DOWN THE LOADING ALSO!!!!! 

// ******** +++++++++++ **************  
    }); 
    }); 

@Abudoul SY， 这是我现在有：

<script type="text/javascript"> 
// I should be put at the top of the file (not in an Ajax Loop) 
var compileHTML = function (html) { 
     var div = document.createElement("div"); 
     div.innerHTML = html; 
     var fragment = document.createDocumentFragment(); 
     while (div.firstChild) { 
      fragment.appendChild(div.firstChild); 
     } 
     return fragment 
    }; 

var comper; 
function checkComper() { 
var SvInfo; 

    var onResponse = function(comperNow) { // comperNow is the latest date/time var 
    //check if comper has been set/first time method is called 
    if (comper === undefined) { 
     comper = comperNow; 
     return; 
    } 

    if (comper !== comperNow) { 


var Vinfoo; 
$.get("getlastupdate2.php", function(primaryAddType){ 
// alert("Data: " + primaryAddType); 
    Vinfoo = primaryAddType; 


// show a message to the visitor ----> 
//alert(Vinfoo); 
    $().toastmessage('showNoticeToast', Vinfoo); 


}); 
$('#append').trigger('click'); // UPDATE THE TABLE BUT IT TAKES 3-4 SEC. AND I NEED IT TO SPEED UP! 

// and update comper to show the date/time from comperNow 
comper = comperNow; 
} 
}; 
$.get('getlastupdate.php', onResponse); 

} 
var tid = setInterval(checkComper, 2000); // repeat myself 

$(function() { 

     $(document).ready(function() 
     { 
     $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. <-- CUSTOM TOOLTIP 
     }) 

var $table = $("table.tablesorter"); 
//Keeping a reference variable to 
var $tableContents = $table.find('tbody'); 


$("#append").click(function(e) { 
e.preventDefault(); 
$.get('updatetable.php', function(data) 
{ 
$table 

//When ajax is done 
var compiledHtml = window.compileHTML(data); 
$tableContents.html(compiledHTML); 
$table.trigger("update", [true]); 


     $(document).ready(function() 
     { 
     $('[title!=""]').qtip({}); // A bit better. Grab elements with a title attribute that isn't blank. <-- CUSTOM TOOLTIP 
     }) 

}); 
}); 

    // call the tablesorter plugin 
$("table.tablesorter").tablesorter({ 
    theme: 'blue', 

    // hidden filter input/selects will resize the columns, so try to minimize the change 
    widthFixed : true, 

    //sortList: [[2,0],[1,0]], 

    // initialize zebra striping and filter widgets 
    widgets: ["saveSort", "zebra", "filter"], 

    headers: { 8: { sorter: false, filter: false } }, 

    widgetOptions : { 

     // If there are child rows in the table (rows with class name from "cssChildRow" option) 
     // and this option is true and a match is found anywhere in the child row, then it will make that row 
     // visible; default is false 
     filter_childRows : false, 

     // if true, a filter will be added to the top of each table column; 
     // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false" 
     // if you set this to false, make sure you perform a search using the second method below 
     filter_columnFilters : true, 

     // css class applied to the table row containing the filters & the inputs within that row 
     filter_cssFilter : 'tablesorter-filter', 

     // class added to filtered rows (rows that are not showing); needed by pager plugin 
     filter_filteredRow : 'filtered', 

     // add custom filter elements to the filter row 
     // see the filter formatter demos for more specifics 
     filter_formatter : null, 

     // add custom filter functions using this option 
     // see the filter widget custom demo for more specifics on how to use this option 
     filter_functions : null, 

     // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately 
     // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus 
     filter_hideFilters : false, // true, (see note in the options section above) 

     // Set this option to false to make the searches case sensitive 
     filter_ignoreCase : true, 

     // if true, search column content while the user types (with a delay) 
     filter_liveSearch : true, 

     // jQuery selector string of an element used to reset the filters 
     filter_reset : 'button.reset', 

     // Delay in milliseconds before the filter widget starts searching; This option prevents searching for 
     // every character while typing and should make searching large tables faster. 
     filter_searchDelay : 300, 

     // if true, server-side filtering should be performed because client-side filtering will be disabled, but 
     // the ui and events will still be used. 
     filter_serversideFiltering: false, 

     // Set this option to true to use the filter to find text from the start of the column 
     // So typing in "a" will find "albert" but not "frank", both have a's; default is false 
     filter_startsWith : false, 

     // Filter using parsed content for ALL columns 
     // be careful on using this on date columns as the date is parsed and stored as time in seconds 
     filter_useParsedData : false 

    } 

    }); 

    // External search 
    // buttons set up like this: 
    // <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button> 
    $('button.search').click(function(){ 
    /*** first method *** data-filter-column="1" data-filter-text="!son" 
     add search value to Discount column (zero based index) input */ 
    var filters = [], 
     col = $(this).data('filter-column'), // zero-based index 
     txt = $(this).data('filter-text'); // text to add to filter 

    filters[col] = txt; 
    // using "table.hasFilters" here to make sure we aren't targetting a sticky header 
    $.tablesorter.setFilters($('table.hasFilters'), filters, true); // new v2.9 

    /** old method (prior to tablsorter v2.9 *** 
    var filters = $('table.tablesorter').find('input.tablesorter-filter'); 
    filters.val(''); // clear all filters 
    filters.eq(col).val(txt).trigger('search', false); 
    ******/ 

    /*** second method *** 
     this method bypasses the filter inputs, so the "filter_columnFilters" 
     option can be set to false (no column filters showing) 
    ******/ 
    /* 
    var columns = []; 
    columns[5] = '2?%'; // or define the array this way [ '', '', '', '', '', '2?%' ] 
    $('table').trigger('search', [ columns ]); 
    */ 

    return false; 
    }); 

}); 
</script> 

Answer 1

退房代码：
每次你做一个Ajax请求你这样做：

$table 
.find('tbody') 
.html('') 
.append(data); 
$table.trigger("update", [true]); 

要它做了什么：

1. 您在HTML调用$.find标记（缓慢）
2. 您删除表格内容（导致浏览器重新绘制白色像素）
3. 你问的是浏览器的DOM来解析整个HTML表格导致多个布局后处理和重绘（危重坏）
4. 在桌子上（OK）调用触发

我认为仅仅通过处理你的数据可以更好地加快你的过程无数次，取决于你的桌子的大小。 考虑一下：

// I should be put at the top of the file (not in an Ajax Loop) 
window.compileHTML = function (html) { 
    var div = document.createElement("div"); 
    div.innerHTML = html; 
    var fragment = document.createDocumentFragment(); 
    while (div.firstChild) { 
     fragment.appendChild(div.firstChild); 
    } 
    return fragment 
}; 
//Keeping a reference variable to 
var $tableContents = $table.find('tbody') 

//When ajax is done 
var compiledHtml = window.compileHTML(data); 
$tableContents.html(compiledHtml); 
$table.trigger("update", [true]); 

编辑：如果compileHTML不起作用。 做几乎同样的事情（但不编译）的一个很好的办法是做：

//put just after $table declaration 
var $tableContents = $table.find('tbody') 

//When ajax is done 
var $html = $('<tbody/>').html(data); 
$tableContents.replaceWith($html) 
$table.trigger("update", [true]); 

编辑：

我所做的就是创建一个文档片段（DOM之外），让HTML通过compileHTML进行处理在当前页面上没有任何发生。当一切完成时。 仅将创建的新DOM树的根添加到DOM，导致只有一次重绘：“与单元和行一样多”会使浏览器看起来更稳定。

可选（不是全部）： 您的代码可能存在更多缺陷，但调查性能很难。 我会建议在Chrome/Firebug做一个时间表检查 - >打开控制台（F12或Alt键 + 转变 + 我）按 “时间表” 选项卡。
按（CTRL/CMD）+ Ë，让和更新通行证，抑制CTRL +Ë和你会看到一些柱状图，更大条的意思是你的应用程序是laggy/janky，您可以点击栏来查看所有调用函数的堆栈轨迹，从而进行优化。
希望帮助:)

Answer 2

我这唯一的结论是使输出尺寸小于400-500kb。

Answer 3

如果你想要一个“载入中...请稍候”的对话，只需要添加类似：

<div id="loading_overlay" style="z-index:10000;background-color:#000;opacity:0.5;display:none;cursor:wait;"> 
    <div style="z-index:10001;background-color:#FFF;opacity:1;cursor:auto;position:absolute;top:50%;left:50%;height:300px;width:300px;margin-top:-150px;margin-left:-150px;">Please wait, loading...</div> 
</div> 

（显然，你的实际文档中不使用内联样式，把它们放在你的外部CSS文件）

然后，只需你$.get('updatetable.php', function(data)行前添加$("#loading_overlay").show();，然后$("#loading_overlay").hide();$table.trigger("update", [true]);后（我以为是你的AJAX请求的最后一行）。

基本上，您会在AJAX请求之前显示加载对话框，然后在完成后隐藏它。

这不是解决滞后问题，但它确实显示加载对话框，以便用户知道为什么浏览器已锁定（如您所问）。