In the use of easyui datagrid, it is found that the efficiency of loading data is really not bad. After testing, IE8 is obviously slow to load 300 pieces of data, and it takes about 60 seconds to load 2,000 pieces of data, and it takes about 60 seconds for another person to crash. I usually heard about the low efficiency of easyui datagrid, but I found that it was really unbearable after testing it myself.
The author had no choice but to Baidu, google the solution, and found an article saying that the version 1.3.3 was changed
like this, and other versions are also this code
$(_1e0).html(_1e4.join("")); Change
to:
$ (_1e0)[0].innerHTML = _1e4.join(""); The author found a similar place to modify, and the result is still the same after the test. There is no effect, it may be different from the author's version, mine is version 1.3, and the author is version 1.33.
After being busy for a long time, I had to continue debugging and tracing myself. After hard work, I finally found the real murderer that caused the slowness. The code that really causes slowness is as follows:
function _58b(trs1,trs2){
for(var i=0;i<trs2.length;i++){
var tr1 = $ (trs1 [i]);
var tr2 = $ (trs2 [i]);
tr1.css("height","");
tr2.css("height","");
var _591=Math.max(tr1.height(),tr2.height());
tr1.css("height",_591);
tr2.css("height",_591);
}
};
Looking at the code, it is clear that the above is to compare the heights of the two rows in the table, and then assign the height to each row.
Solution: The murderer has been found, how to solve it? The author is directly shielding their comparison and assignment. Let the browser automatically adapt to the height.
as follows:
for (var i = 0; i < trs2.length; i++) {
/*
var tr1 = $ (trs1 [i]);
var tr2 = $ (trs2 [i]);
tr1.css("height", "");
tr2.css("height", "");
var _43f = Math.max(tr1.height(), tr2.height());
tr1.css("height", _43f);
tr2.css("height", _43f);
*/
}
Well, after blocking. Let's test efficiency. Test 10,000 records, the test code snippet is as follows:
var obj = { 'total': 100, 'rows': [{ id: '1', name: '一' }, { id: '2', name: '二'}] };
for (var i = 0; i < 10000; i++) {
var row = ({ id: 'id' + i, name: '一' });
obj.rows.push(row);
}
$('#tt').datagrid({
url: null,
pagination: true,
pageSize: 20,
pageNumber: 1,
rownumbers: true,
fitColumns: false,
columns: [[
{ field: 'id', title: 'id', width: 100 },
{ field: 'name', title: 'Name', width: 100 }
]]
});
$('#tt').datagrid('loadData', obj);
Well, now there are 10,000 records, and IE8 only takes less than 1 second to load. Change it to 3000 records, and it only takes 1~2 seconds to load.
Conclusion: Block the damn set height code directly. Hee hee, surprise. EASYUI version: version 1.3, version 1.5
http://love398146779.iteye.com/blog/2067515