ExtJS 기초강좌 20 - 그리드(Grid) 많은양의 데이터 퍼포먼스 향상시키기

ExtJS 2015. 6. 20. 11:47

일반적으로 많은양의 데이터 목록을 출력할 경우, ExtJS외에도 다른 그리드제품에서 버벅이는 현상이 존재합니다.

물론, 미리 이 문제점을 감지하고 개선을 하여 부드럽게 데이터 출력을 하는 그리드제품들도 다양합니다.

ExtJS 4.2 부터 그리드에 발생되었던 BigData 부분이 개선되어 그동안의 대용량 데이터에 대한 문제점이 해결되었습니다.

그리드에 많은 양의 데이터 목록을 출력할때, 버벅이는 현상들이 나타날수 밖에 없는 이유는 기존 TABLE/TR/TD 태그만을 이용한 가볍게 디자인이 적용이 되지 않은 화면이 아닌, 각 TABLE/TR/TD 마다 스타일 적용 및 기타 디자인적인 요소가 들어가있는 코드들이 들어가다보니 느려지게 되는 현상이 발생될수밖에 없다고 본인은 생각합니다.

본격적으로 그리드에 대용량 데이터 목록을 출력해보도록 하겠습니다.

별도의 데이터가 많은 DB는 대부분 없을것입니다.

그래서 센차에서 "JSONP" 방식으로 제공을 해주는 JSON 데이터를 이용하도록 하겠습니다.

사이트URL은 아래와 같습니다. ▽

https://www.sencha.com/forum/remote_topics/index.php

해당 페이지를 가보면 RESPONSE 하는 JSON 규격은 아래와 같습니다.

대략 유추해볼 수 있는 것이 데이터의 총 갯수는 6679건으로 "totalCount" 라는 json key로 넘어왔고, 데이터 목록들은 "topics" 라는 key에 JSON ARRAY에 담겨서 내려준다라고 추측할 수 있겠습니다.

그럼 proxy -> reader config내에 totalProperty와 rootProperty의 value값은 아래처럼 작성하면 되겠습니다. ▽

rootProperty : 'topics'

totalProperty : 'totalCount'

그럼 기본적으로 샘플코드를 작성하여 기본적인 데이터 출력을 시켜보도록 하겠습니다.

▶ 샘플코드

Ext.onReady(function(){
	Ext.create('Ext.grid.Panel',{
		title : 'Grid Paging Example',
		width : 500,
		height : 300,
		columns : [{
			text : '제목',
			flex : 1,
			dataIndex : 'title'
		},{
			text : '포럼타이틀',
			flex : 1,
			dataIndex : 'forumtitle'
		},{
			text : '작성자명',
			flex : 1,
			dataIndex : 'username'
		},{
			text : '댓글수',
			flex : 1,
			dataIndex : 'replycount'
		}],
		store : Ext.create('Ext.data.Store',{
			//pageSize : 6679,
			autoLoad : true	,
			fields : ['title','forumtitle','username','replycount'],
			proxy : {
				type : 'jsonp',
				api : {
					read : 'https://www.sencha.com/forum/remote_topics/index.php'
				},
				reader : {
					rootProperty : 'topics',
					totalProperty : 'totalCount'
				}
			}
		}),
		renderTo : Ext.getBody()
	})
})

위 코드를 실행하게 되면, 한페이지에 기본적으로 25개의 row를 출력하게 되고, 대략 응답시간은 "288 ms" 정도 걸렸습니다. 조회된 데이터목록의 수가 적기 때문입니다. ▽

우리의 목표는 페이징처리로 데이터를 나뉘어서 출력해줄것이 아니고, 한 페이지에 모든 데이터목록을 출력시켜주기 위함이므로, 현재 totalCount 값을 pageSize config

데이터 스토어의 autoLoad config 상단에 주석처리되어있는 pageSize : 6679 를 해지해 줍니다.

다시 호출해보도록 하겠습니다.

전체페이지 응답을 받아오는데 '1.77 s' 가 걸렸습니다.

그만큼 데이터 양이 많아지므로 응답을 받아오는 시간도 길어지고, 그리드내에 응답값을 파싱하기위한 작업 역시, 시간이 걸립니다.

데이터로딩 및 화면에 출력시키기 위한 시간을 단축시키고자 Sencha 에서 대안한 방식이 바로, 버퍼를 이용하여 미리 한페이지 출력 시, 이후페이지에 대한 조회를 미리한 후, 캐싱처리를 하는 방식을 사용하였습니다.

데이터스토어의 일부만 변경하였으므로, 일부코드만 작성해보도록 하겠습니다.

▶ 샘플코드


//Store -> BufferedStore 로 변경
Ext.create('Ext.data.BufferedStore',{
        //pageSize 100개로 단축
	pageSize : 100,
	autoLoad : true	,
	fields : ['title','forumtitle','username','replycount'],
	proxy : {
		type : 'jsonp',
		api : {
			read : 'https://www.sencha.com/forum/remote_topics/index.php'
		},
		reader : {
			rootProperty : 'topics',
			totalProperty : 'totalCount'
		}
	}
})

위 코드에서 2개가 변경되었습니다.

기존 "Ext.data.Store" 클래스를 "Ext.data.BufferedStore" 로 변경해주었고,

pageSize (한페이지당 호출할 수를 지정하는 config) 를 이용하여 한번에 100개씩 출력시키도록 변경해준 다음, 실행화면을 보고, Network 시간을 측정해보았습니다.