javascript - 即使加载 1000 条记录，光滑的网格也太慢了

Question

我对使用 slickgrid 还很陌生，我正在尝试使用它加载 1200 条记录。加载数据所花费的时间大约为 6 秒(这相当长)。如何减少服务器的加载时间？我在 SO 中看到了一些示例示例，但没有一个对我有帮助。

一种方法是先加载前 100 条记录，然后在底部加载剩余的元素。我怎样才能做到这一点？

这是我的代码:

<script>

var grid;
var columns = [
{ id: "Class", name: "Class", field: "Class", formatter: alignFormatter1},
{ id: "Number", name: "Number", field: "Number", formatter: alignFormatter2},
{ id: "Subject", name: "Subject", field: "Subject",formatter: alignFormatter3},
{ id: "Student", name: "Student", field: "Student", formatter: alignFormatter4},
{ id: "Date", name: "Date", field: "Date", formatter: alignFormatter5},
 ];

 function dayFormatter(row, cell, value, columnDef, dataContext) {
  //return value + ' days';
}

  function dateFormatter(row, cell, value, columnDef, dataContext) {
  //return value.getMonth() + '/' + value.getDate() + '/' + value.getFullYear();
}

function alignFormatter1(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 32px;'>"+dataContext.Class+"</span>";
}

function alignFormatter2(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 22px;'>"+dataContext.Number+"</span>";
}

function alignFormatter3(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 10px;'>"+dataContext.Subject+"</span>";
}

function alignFormatter4(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 32px;'>"+dataContext.Student+"</span>";
}

function alignFormatter5(row, cell, value, columnDef, dataContext) {
  return "<span style='margin-left: 95px;'>"+dataContext.Date+"</span>";
}

var options = {
enableCellNavigation: true,
enableColumnReorder: true,
multiColumnSort: true,
editable: true
};


$(function () {

var MS_PER_DAY = 24 * 60 * 60 * 1000;
var data = [];

var listdata = <?php echo json_encode($storeData)?>;
console.log(listdata);

for (var i = 0; i < listdata.length; i++) {

  data[i] = {
    Class:  listdata[i][0],
    Number: listdata[i]['1'],
    Subject: listdata[i]['2'],
    Student: listdata[i]['3'],
    Date: listdata[i]['4'],
  };

}



grid = new Slick.Grid("#myGrid", data, columns, options);

grid.setSelectionModel(new Slick.CellSelectionModel());
grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: false }) );
grid.registerPlugin(checkboxSelector); 

grid.onSort.subscribe(function (e, args) {
  var cols = args.sortCols;
  data.sort(function (dataRow1, dataRow2) {
    for (var i = 0, l = cols.length; i < l; i++) {
      var field = cols[i].sortCol.field;
      var sign = cols[i].sortAsc ? 1 : -1;
      var value1 = dataRow1[field], value2 = dataRow2[field];
      var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
      if (result != 0) {
        return result;
      }
    }
    return 0;
  });
  grid.invalidate();
  grid.render();
});
})
</script>

<script type="text/javascript">

var awidth,aheight,newheight;
awidth=$(window).width();
aheight=$(window).height();
newheight=aheight*0.9-150;
newheight = newheight | 0;
document.getElementById('myGrid').setAttribute("style","height:"+newheight+"px;");

</script>

注意:根据评论的建议，将php编码加起来

 <?php 

$sql        = "SELECT * FROM university_marks WHERE 1 ".$where. "ORDER BY Date desc";
//echo $sql;
$searchdetails = mysql_query( $sql );
$num_rows = mysql_num_rows($searchdetails);



    $storeData = array();
    $i= 0;
    while ($row = mysql_fetch_array($searchdetails)) {

        $storeData[$i][] = $row['ID'];
        $storeData[$i][] = $row['1'];
        $storeData[$i][] = $row['2'];
        $storeData[$i][] = $row['3'];
        $storeData[$i][] = $row['4'];
        $storeData[$i][] = $row['5'];

 $sql4    = "SELECT * FROM `faculty_address` WHERE id = $id and address!= '' ";
            $adddetails4 = mysql_query($sql4);
            $facultydetails4 = mysql_fetch_assoc($adddetails4);
            $num_rows5 = mysql_num_rows($adddetails4);
            if($num_rows5 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }

 $sql5        = "SELECT * FROM `students_attendence` WHERE id = '".$id."' AND ID_course='".$course."'";
            $adddetails5 = mysql_query($sql5);
            $csipdetails5 = mysql_fetch_assoc($adddetails5);
            $num_rows6 = mysql_num_rows($adddetails5);
            if($num_rows6 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }       

 $sql6        = "SELECT * FROM `students_marks` WHERE CA_ID = $id AND column1!= '' AND column2 !='' AND column3 !='' ";
            $adddetails31 = mysql_query($sql31);
            $studetails31 = mysql_fetch_assoc($adddetails31);
            $num_rows41 = mysql_num_rows($adddetails31);
            if($num_rows41 > 0){
            $storeData[$i][] ='Filled';
                }
            else{
                $storeData[$i][] ='Notfilled';
            }   

        $i++;
    }



?>

根据评论中的建议，我在 php 中执行 sql 查询时遇到了瓶颈问题。 SQL 查询占用太多时间，导致延迟。我需要这些值来填充 slickgrid 中的列数据($sql4、$sql5、$sql6、)

Answer 1

在此澄清一下，这不是 SlickGrid 问题。

初步确定问题所在的最佳方法是在 Chrome 中加载页面，打开开发人员工具 (ctrl-shift-I) 并检查“网络”选项卡。这将向您显示页面加载中的页面源时间。

看来问题确实出在服务器端，如果您要检索 1200 条记录，然后对每条记录运行 3 个查询，那么您将对数据库运行 3600 个单独的查询。难怪需要6秒! 正如@Eakethet 所建议的那样，花一些时间学习一些基本的 SQL 并将所有这些重写为一个查询。您可能还需要添加一些数据库索引以加快相关数据的查找。如果完成所有这些，您应该能够在 500 毫秒内获得响应。