일반적으로 많은양의 데이터 목록을 출력할 경우, 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 시간을 측정해보았습니다. 



    평균 "200 ms~ 400 ms" 시간대로 스크롤 이벤트를 발생시키면서 데이터 로드가 진행되는것을 확인할 수 있습니다.


    스크롤이 캐싱된 데이터를 넘기면, 로딩바가 출력되면서 재호출이 진행되는 부분을 제외하고는 아주 만족스러운 기능입니다.

    캐싱하고자 하는 수 기존 출력되었던 데이터유지등에 관한 속성도 지원이 되는듯 하다.

    "Ext.data.BufferedStore" 의 config 속성을 확인해보면서 각자 적용해보도록 하세요.


    "데이터 버퍼스토어" 에 대하여 장/단점을 한가지씩 작성해보았습니다. ▽

    장점

    한페이지에 전체 데이터 목록을 불러와 보이는 것처럼 구현되는 기능(시간향상에 도움)

    단점

    캐싱된 데이터 이상의 페이지를 스크롤 이동하게되면 로딩바가 생기는것이 아쉽

    하지만, 마우스로 스크롤바 특정 위치 클릭시에만 발생되는 문제일뿐, 일반적인 스크롤을 할때에는 아무런 증상이 나타나지 않음


    지금까지 그리드의 많은양의 데이터 출력에 대한 퍼포먼스 향상에 대해서 알아보았습니다.




    신고
    Posted by 몽고
    • dw
      2015.06.29 15:44 신고

      데이터 그리드 헤더에 gridFilters를 적용하려고하는데요. 혹시 gpl 버전에는 라이브러리가 지원되지않나요 ?? 잘안되요

      • BlogIcon 몽고
        2015.06.30 10:55 신고

        GPL 버전과 유료버전에 대한 API 지원에 대한 차이는 없는걸로 알고 있습니다.

        gridfilters 사용결과 잘 동작이 되고 있습니다..

        도큐먼트사이트에서 gridfilters 검색 후, 제공되는 샘플코드 실행결과 이상없이 동작되고 있습니다..


    • 2015.06.30 15:41

      비밀댓글입니다

      • BlogIcon 몽고
        2015.06.30 15:43 신고

        ^^ 저도 다알지못해서요
        저도 질문주실때마다 찾아서 샘플링해보고 되는지확인할뿐입니다ㅎ

    • dw
      2015.06.30 16:07 신고

      ㅎㅎㅎ 네 감사합니다. 혹시 티스토리에 회원가입할수 있는 초대권 혹시 있으시면 부탁좀 드려도될까용

      karone111@naver.com

      • BlogIcon 몽고
        2015.06.30 16:08 신고

        아직초대장이 발급되지않았습니다;;ㅎ

티스토리 툴바