Easyui datagrid is slow in loading big data and provides an optimization solution.

Table control is often used during project development. JQGRID or easyui datagrid is usually used.

I chose JQGIRD when I first came into contact. The reason is that it is easy to use and has higher performance than easyui datagrid. However, in the future development process, it is found that JQGIRD's help documentation is too poor, difficult to modify, and the interface is not very friendly. Try easyui datagrid again during development.

When using easyui datagrid, it is found that the data loading efficiency is not very poor. According to the test, loading 300 pieces of data in IE8 is obviously slow. Loading 2000 pieces of data takes about 60 seconds for another person to crash, and the test results in google browser are less than a few seconds. I often hear about the efficiency of easyui datagrid, And I tested it myself to find it really unbearable.

I had to go to Baidu and google to solve the problem and found an article about the change.

1. // This is the case for version 1.3.3 and the Code for other versions.
2. Vertex (_1e0).html (_ 1e4. join (""));

   Changed:

   1. $ (_ 1e0) [0]. innerHTML = _ 1e4. join (""); I found a similar place to modify it. The test results are the same. It has no effect. It may be different from the author's version. My version is 1.3, and my version is 1.33.

      After a long time, I had to continue debugging and tracking myself. After hard work, we finally found the real killer that caused the slowness. The code that causes real slowness is 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 );
      }

      
      

      The Code clearly shows that the height of the two rows in the table is compared above, and the height is assigned to each row.

      Solution: the murderer finds the solution. How can this problem be solved? The author directly blocks 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 );

      */
      }
      

      
      

      Okay, after shielding. Let's test the efficiency. Test 10 thousand records. The test code snippets are as follows:

      Var obj = {'Total': 100, 'rows ': [{id: '1', name: '1'}, {id: '2', name: '2'}]};
      For (var I = 0; I <10000; I ++ ){
      Var row = ({id: 'id' + I, name: '1 '});
      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 );
      

      
      

      Now there are 10000 records. IE8 only takes less than 10 seconds to load. Change to 3000 records, as long as 1 ~ Loading completed in 2 seconds.

      Conclusion: Direct blocking of the damn height code. Hey, there are surprises. EASYUI version: 1.3