컴퓨터
11/03/25 14:31(년/월/일 시:분)
0. 결론
- jQuery DataGrid로 1000행을 표시하면 웹브라우저가 뻗는다.
- 하지만 ASP .NET의 DataGrid는 잘만 돌아간다.
- Gauce, Adobe Flex도 잘 돌아간다.
* Prototype, jQuery 등의 AJAX가 너무 무거워서 그렇다. server-side로 분담하면 안 뻗을 거다.
1. 배경 설명
- B2B 기업용 SW은 B2C와 달리, 데이터 양이 많다.
- 게다가 고객은 엑셀에 익숙해서, 엑셀 수준의 데이터 조작을 요구한다.
- 그래서 흔히 DataGrid를 쓴다.
2. DataGrid
- DB의 Table을 긁어와서 화면에 표시하는 Component다.
- Visual Basic 이후 거의 모든 언어에서 기본 제공한다.
- 특히 기업용 SW에서 매우 즐겨 사용한다.
3. 대표적인 SW
- X-Internet 계열로는 쉬프트정보통신 Gauce, 투비소프트 MiPlatform 등이 있다. ActiveX를 귀찮게 설치해야 하지만, 수천 행을 집어넣어도 버벅대지 않고 잘만 동작한다. 엑셀을 흉내낸 기능도 많아서 고객이 좋아한다.
- Adobe Flex도 있다. 덩치가 크긴 하지만 그래도 플래시는 기본으로 깔려있어서 편하다. 이것도 대용량 데이터 처리를 잘 하긴 하지만, 초기 로딩속도가 너무 느리긴 하다. 그래도 최근 3->4 버전에서는 많이 빨라졌다.
- Prototype, jQuery 등의 Javascript Library가 있다. 최근 AJAX 열풍을 타고 많이 확산되고, 특히 코드가 깔끔하게 나온다는 장점이 있으나, 최신 크롬, IE9 등의 초고속 자바스크립트 엔진으로 돌려도 너무 느리거나 대부분 뻗어버린다.
4. Benchmark
- HttpWatch로 응답 시간을 측정했다. 10회 반복해서 평균을 냈다.
- 임의의 1000행짜리, 10열짜리 테이블을 읽어들였다.
- Gauce 0.1535초
- Adobe Flex 0.3014초
- ASP .NET 1,001초
- jQuery rendering 시간
200행일때 5.2209초
400행일때 13.8282초
600행일때 26.4545초
800행일때 43.6417초
1000행일때 64.6225초
5. 뻗는 이유
- jQuery EasyUI의 경우 table 태그 곳곳에 div 태그를 삽입하여 새로 구성한다.
* EasyUI의 경우 그렇다.
* FixedTable 등, HTML DOM을 안 건드리는 것들은 느리지 않다.
before: table tr td ...
after: div table tr div td span ...
이렇게 HTML DOM을 다시 구성할 때 client-side의 overhead가 크다.
6. ASP.NET은 왜 안 뻗는가?
- 같은 HTML + Javascript 인데도 ASP .NET의 DataGrid는 뻗지 않는다.
- 왜 그런가? ASP .NET은 server-side에서 한번 HTML을 처리해서 던져주기 때문이다. 그래서 client-side에서 javascript로 처리할 일을 줄여준다.
7. 시사점
- Java 진영에도 ASP .NET처럼 server-side 실행과 client-side 실행을 분담하는 기술이 필요할 것이다.
- 이것은 Tag Library(taglib) + AJAX 를 조합하면 가능할 것이다.
- custom tag library에서 javascript까지 동적으로 작성해주면 되지 않을까?
- 아니면 Apache Velocity로 template 형태로 HTML 코드를 구성하는 것도 방법일 것 같다.
아 실험 결과값 내기 힘드네.