Я довольно новичок в javascript и jQuery, поэтому прошу прощения за любые неправильные слова в моем описании проблемы.
Фон : у меня есть сайт, на котором я использую плагин Datatables для jQuery для отображения в реальном времени отображения таблицы SQL.Запрос SQL обрабатывается в ASP.NET и возвращается клиенту в виде объекта JSON.Прямо сейчас я показываю только ~ 500 записей.
После того, как плагин datatables проанализировал объект JSON, я выполняю некоторое условное форматирование ячеек таблицы - следовательно, если я правильно понимаю эту концепцию, могут возникнуть серьезные манипуляции с DOM.Я читал, что это может быть причиной большого количества утечек памяти, но я также подумал, что jQuery довольно хорошо справлялся со своей задачей.
Я использую таймер setInterval для периодического обновления данных, чтобы они отображали изменения в реальном времени.
Моя проблема : потребление памяти моим сайтом вышло из-под контроля.При каждом вызове AJAX (~ каждые 2 секунды) использование памяти для страницы может возрасти до 2 МБ.Чтобы уменьшить это, я установил плагин idle для jQuery, чтобы определить, когда пользователь активен на сайте - и я уменьшаю количество вызовов AJAX до ~ 1 раз в час, когда пользователь находится в режиме ожидания.Я слышал, что это может дать больше места для браузера, чтобы выполнить сборку мусора.
Я обнаружил, что память активно работает постоянно, с небольшим падением каждые 4 или 5 вызовов, когда это выглядит как сборка мусора.выполняетсяПамять не поднимается, когда вызовы AJAX уменьшаются, когда пользователь находится в режиме ожидания.Ниже я вставил урезанную версию своего кода (исключая некоторые несоответствующие фрагменты).Я уверен, что это не самый чистый код - но если бы кто-то мог предоставить указатель на то, что может быть причиной потребления памяти - или как я мог бы уменьшить потребление, это было бы очень полезно.
Заранее спасибо!
//TIMER
var updateFreq = 5000;
var timer;
setIdleTimeout(5000); // 5 seconds
setAwayTimeout(50000); // 10 seconds
document.onIdle = function() {
clearInterval(timer);
updateTable(3600000); //update once an hour
//if (typeof (CollectGarbage) == "function") { CollectGarbage(); }
}
document.onAway = function() {
clearInterval(timer);
updateTable(3600000); //update once an hour
//if (typeof (CollectGarbage) == "function") { CollectGarbage(); }
}
document.onBack = function(isIdle, isAway) {
clearInterval(timer);
updateTable(5000); //update once every two seconds
}
//END TIMER
var oTable;
var oSettings;
$(document).ready(function() {
oTable = $("#production_table").dataTable({
"sDom": '<"TT"T><"tab"t><"F"fip>',
"iDisplayLength": -1,
"sAjaxSource": 'Data.ashx',
// "sScrollY": y - 217,
//"sScrollX": "100%",
"bJQueryUI": true,
"bDeferRender": true,
// "bStateSave": true,
"aaSorting": [[16, 'desc']],
"sPaginationType": "full_numbers",
// "bAutoWidth": false,
"fnDrawCallback": function(oSettings) {
addFormat();
try {
$('td').disableTextSelect();
}
catch (err) {
}
},
"fnServerData": function(sSource, aoData, fnCallback) {
$.ajax({
dataType: 'json',
type: "GET",
cache: false,
url: sSource,
data: aoData,
success: fnCallback
})
},
"fnInitComplete": function(oSettings, json) {
//alert('DataTables has finished its initialisation.');
// addFormat();
//$('td').disableTextSelect();
},
// "bProcessing": true,
"aoColumns": [
{ "mDataProp": null, "bSortable": false },
{ "mDataProp": "serial", "sClass": "serial" },
{ "mDataProp": "us", "sClass": "us" },
{ "mDataProp": "type", "sClass": "type" },
{ "mDataProp": "compartment", "sClass": "compartment" },
{ "mDataProp": "leg", "sClass": "leg", "bVisible": false },
{ "mDataProp": "comp", "sClass": "comp", "bVisible": false },
{ "mDataProp": "patient", "sClass": "patient", "bVisible": false },
{ "mDataProp": "dob", "sClass": "dob", "bVisible": false },
{ "mDataProp": "surgeon", "sClass": "surgeon", "bVisible": false },
{ "mDataProp": "surgery", "sClass": "surgery", "bVisible": false }
//I've truncated this section slightly...
]
});
updateTable(updateFreq);
});
function updateTable(uF) {
// Update the table using the fnReloadAjax call method
timer = setInterval(function() {
var iStart = oSettings._iDisplayStart;
oSettings = oTable.fnSettings();
oTable.fnReloadAjax();
//oTable.fnDisplayStart(oSettings, iStart, true);
}, uF);
}