[jqGrid] gridview 를 반드시 써야하는 이유!!

* 테스트 환경 

- Windows 7 64bit

- STS 3.2.0 ( VMware vFabric tc Server Developer Edition v2.7 )

- 크롬 27.0.1

- IE 10

- IE 9 (IE 10 개발자도구)

- IE 8 (IE 10 개발자도구)

- IE 7 (IE 10 개발자도구)

- jQuery 1.9.0

- jQuery ui 1.10.3

- jqGrid 4.5.2

 

개요

다음은 jQuery 의 Grid 플러그인인 jqGrid 의 gridview 옵션 적용시 성능 차이에 대한 결과를 리포트하는데 목적이 있습니다. jqGrid의 WIKI에서 말하고 있는 gridview에 대한 검증 차원도 있습니다. 

gridview : In the previous versions of jqGrid including 3.4.X, reading a relatively large data set (number of rows >= 100 ) caused speed problems. The reason for this was that as every cell was inserted into the grid we applied about 5 to 6 jQuery calls to it. Now this problem is resolved; we now insert the entry row at once with a jQuery append. The result is impressive - about 3 to 5 times faster. What will be the result if we insert all the data at once? Yes, this can be done with a help of gridview option (set it to true). The result is a grid that is 5 to 10 times faster. Of course, when this option is set to true we have some limitations. If set to true we can not use treeGrid, subGrid, or the afterInsertRow event. If you do not use these three options in the grid you can set this option to true and enjoy the speed.

link -> http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

준비

0. jqGrid Demo 사이트에서 샘플코드를 이용하여 테스트 준비

1. JSON 테스트를 위한 코드 준비

HTML

<div id="jsonSpeed"></div>

<table id="jsonGrid"></table>

Script

<script>

jQuery("#jsonGrid").jqGrid({

url:'../data/data.json',

datatype: "json",

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

    colModel:[

    {name:'id',index:'id', width:55},

    {name:'invdate',index:'invdate', width:90},

    {name:'name',index:'name asc, invdate', width:100},

    {name:'amount',index:'amount', width:80, align:"right"},

    {name:'tax',index:'tax', width:80, align:"right"},

    {name:'total',index:'total', width:80,align:"right"},

    {name:'note',index:'note', width:150, sortable:false}

    ],

    rowNum: -1,

        gridview:true,

    rownumbers:true,

    rowList:[10,20,30],

    sortorder: "desc",

gridComplete : function() {

var tm = jQuery("#jsonGrid").jqGrid('getGridParam','totaltime');

$("#jsonSpeed").html("Render time: "+ tm+" ms ");

},

    caption:"JSON Example"

});

</script>

2. XML 테스트를 위한 코드 준비

HTML

<div id="xmlSpeed"></div>

<table id="xmlGrid"></table>

Script

<script>

jQuery("#xmlGrid").jqGrid({

    url: '../data/data.xml',

datatype: "xml",

colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],

    colModel:[

    {name:'id',index:'id', width:55},

    {name:'invdate',index:'invdate', width:90},

    {name:'name',index:'name asc, invdate', width:100},

    {name:'amount',index:'amount', width:80, align:"right"},

    {name:'tax',index:'tax', width:80, align:"right"},

    {name:'total',index:'total', width:80,align:"right"},

    {name:'note',index:'note', width:150, sortable:false}

    ],

    rowNum: -1,

        gridview:true,

    rownumbers:true,

    rowList:[10,20,30],

    sortorder: "desc",

gridComplete : function() {

var tm = jQuery("#xmlGrid").jqGrid('getGridParam','totaltime');

$("#xmlSpeed").html("Render time: "+ tm+" ms ");

},

caption: "XML example"

});

</script>

 

3. 데이터 수(10, 100, 200, 500, 1000)에 따라 5번 수행하여 평균값을 이용하여 브라우저별 비교 실행 : (code minimization 은 생략)

data	10	100	200	500	1000
XML	3 KB	21 KB	41 KB	102 KB	204 KB
JSON	3 KB	27 KB	53 KB	133 KB	265 KB

결과

마치며

위의 테스트는 작성 코드나 테스트 데이터에 의해 차이가 있을 수 있습니다. 테스트 결과 크롬 뿐만 아니라 IE7, IE8, IE9, IE10 에서 모두 gridview 옵션을 적용시 적게는 3배에서 심지어는 10배 이상의 속도차를 보이는 결과도 있었습니다. 또한 데이터 타입이 json 인 경우에는 1000개의 데이터 모두 브라우저에 상관없이 1초 이내로 들어오는 것을 확인했습니다. 

jqGrid 의 Doc에서 말하는 것처럼 treeGrid, subGrid, afterInsertRow event 의 경우를 제외하고는 꼭 사용하여 뛰어난 반응속도를 얻었으면 합니다. 이것이 jqGrid 에서 gridview 옵션을 꼭 사용해야 하는 이유입니다.

참고

• jqGrid (http://www.trirand.com/blog/)

• jqGrid Demo (http://www.trirand.com/blog/jqgrid/jqgrid.html)