javascript — скользящая сетка слишком медленная даже для загрузки 1000 записей

Я совершенно новичок в использовании 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++;
}



?>

Из предложений в комментариях я получил проблему с узким местом при выполнении SQL-запросов в php. SQL-запросы отнимают слишком много времени, что приводит к задержке. Мне нужны эти значения при заполнении данных столбца в slickgrid ($ sql4, $ sql5, $ sql6,)