교육-16

Grid - Expression

Grid의 expr 구문이 많은 경우 성능에 많은 영향을 줌 따라서 최소화 및 간결하게 작성해야 한다
데이터가 많은 경우 데이터 변경 및 스크롤 시 Grid영역이 다시 표현되므로 성능저하 원인

• Expr 사용 최소화 및 단순화
  • Grid에서 Expr 사용은 성능에 가장 큰 영향을 줌

Expr이 하나라도 있는 경우 패이지 이동(스크롤,키 이동) 등 전반적으로 영향을 미침

• Expr -> Dataset Bind처리
  • 그리드 수식 컬럼 등을 expr형태로 표현하는 경우 Dataset의 수식 컬럼을 만들어 사용
    예) 조회 후 callback 함수에서 수식 컬럼을 만들어 주는 스크립트를 추가

Enableevent

Dataset Enableevent 사용시 주의사항

• Dataset의 Enableevent 사용 시 주의사항 (미사용)
  • 아래와 같이 setColumn 메서드를 사용하게 되면 Dataset의 oncolumnchanged이벤트가 발생한다

• Dataset의 Enableevent 사용 시 주의사항 (사용)

Enableredraw

Grid Contents를 Dynamic하게 생성 시 Enableredraw 사용

• Grid의 Enableredraw 사용 시 참고사항
  • Grid에 변경이 발생하면 화면을 자동으로 다시 그릴 지 설정하는 속성이다
  • Enableredraw 사용여부에 따라 속도 차이가 많이 발생함

통신 후 간결화

데이터를 조회 및 저장 후 실제 서비스 수행시간 대비 응답속도가 느린 경우 점검사항
서비스 시작, 끝 callback 이후 수행 문장 별 수행시간 등을 로그로 남겨 원인 추적

대량 데이터 처리

대량의 데이터는 처리에 따른 대기 시간으로 사용자의 불편함과, 다량의 데이터 메모리 적재 한계, 대량 데이터는 페이징, 분할전송, 조회조건 제한 등 사전에 문제가 되지 않도록 개발방향 검토

데이터셋을 이용한 파일 전송

파일 전송은 File up/down 컴포넌트 사용 권장
데이터셋을 이용하는 경우 일괄 처리에 따른 PC 및 서버 비용 증가

• File up/down 기능

  • 파일 전송은 Filter up/down 컴포넌트 사용 권장

• Dataset 이용 시 주의사항

  • 데이터셋을 이용하여 파일 전송하는 경우 데이터셋 처리과정에서 PC 및 서버 비용증가
  • 사이즈 제약에 따른 오류발생

• 상용제품 사용

  • 파일 전송 프로그램 도입 사용

대용량의 파일 사이즈를 전송하는 경우 서버 리소스 부족에 다른 장애 발생가능, 즉 파일 사이즈 제약필요

Open창 제약사항

WRE 실행환경의 경우 application.open 즉 HTML5의 window.open을 사용한 경우 엔진 재로딩 및 파싱 단순 open창은 브라우저 기능(html)실행 권장

가급적, 브라우저 내부에서 실행되도록 창을 구성하거나, MDI 형태로 구성하도록 권장하며 Open창은 최소로 사용하도록 한다

Resize, Visible

화면 size변경, visible 속성 변경 또는 동적으로 컨텐츠를 생성하는 경우 브라우저는 해당 시점마다 redraw 및 reflow 발생, 즉 과도한 컨텐츠의 경우 이런 동작이 반복되는 경우 성능에 영향을 미침

이벤트 내 과도한 스크립트

이벤트 내에서 과도하게 많은 스크립트가 수행되면, 이로 인한 체감 성능이 떨어짐
특히, 그리드 및 데이터셋 등의 이벤트 내에서 점검이 필요하며, 다수의 이벤트가 중복되지 않게 주의

IE8 스크립트 중단 메시지

IE8 웹 브라우저의 경우 한번의 스크립트 수행 시 5백만 개 이상의 명령을 수행하는 경우 경고 메시지 출력, 메시지 출력을 방지하기 위해서는 스크립트가 과도하게 수행되지 않도록 처리 필요

디자인 처리(IE9)

IE9 이하 사용자를 위한 디자인 참고사항
WRE 실행환경에 해당됨

• Round 처리 최소화
  • IE9이하에서 CSS 처리시 bordertype의 round로 설정 시 성능에 영향을 줄 수 있으므로 round 처리는 최소화 한다
• Alpha 사용 최소화
  • IE9이하에서 CSS 처리시 Alpha값을 처리할 경우 성능에 영향을 줄 수 있으므로 가급적 사용을 제한한다
    예)#11111111 => #111111ff

사용자의 브라우저 버전은 IE 10이상 사용을 권장

통신방식

통신방식은 동기/비동기 방식을 선택하여 사용 가능하나, 비동기 방식을 권장함

• 동기(transaction) 통신은 통신 후 메인 thread가 locking되고 응답 후 처리를 함

  • 이로 인해 통신 요청 후 응답이 오기까지 어플리케이션이 대기상태에 빠짐
  • 화면 로딩 시 동기통신을 사용하여 서비스 호출 시 응답시간이 지연되는 경우 백지현상 발생
  • 폼의 onload이벤트에서 서비스 호출 시 비동기 통신 권장
  • 동기/비동기를 동시에 호출하는 경우 동기통신의 응답결과에 영향을 받음

• 통신의 경우 움직이는 이미지 등 대기 이미지가 보여지지 않는 현상이 발생하므로 비동기 권장

• 1초가 소요되는 동기통신을 5개 호출하는 것보다 5개를 비동기로 요청하는것이 더 빠른 응답결과를 보임

  • 1개의 요청으로 1개의 Dataset이 아닌 1:n 형태로 서비스를 구성

주로 개발 시에는 테스트 데이터 량이 적어 동기통신의 경우에도 큰 영향이 없으나, 실제 운영환경에 적용 시 주요이슈 문제 중 하나

통신방식(SSV)

NEXACRO는 XML, SSV, Binary(NRE 전용) 통신포멧 지원

• 개발자 도구 또는 네트워크 분석 툴 등으로 확인을 위해서는 XML통신이 식별이 쉬울 수 있으나, 사용자 테스트 서버 및 운영서버에서는 SSV통신을 권장

• SSV 통신은 CSV통신과 유사한 형태로 XML이 불필요한 TAG를 제거하므로 적은 네트워크 비용 사용

  • 또한 XML파싱 보다 빠른 성능

송신은 transaction API, 수신은 서버 API인 PlatformResponse에서 통신 방식을 지정한다
서버 framework 구성 시 request 방식에 따라 reponse방식을 지정하면 효율적이다
(즉, client가 SSV이면 server도 SSV, client가 XML이면 server도 XML)

SSV 통신 포멧인 X-API의 설정 값 변경이 아닌 String연산을 통해 response해야 성능향상 효과를 볼 수 있다

• X-API을 통해 데이터 포멧을 설정할 수 있음
  • X-API를 이용하여 SSV포멧을 만들게 되면 내부 처리과정에서 Dataset 등을 생성하게 되는데 이 과정에서 많은 시간이 소요됨
• SSV 통신을 통한 성능 개선을 하기 위해서는 기본 Java의 String 연산으로 출력하도록 로직 구현

대용량 데이터

대용량 데이터 처리시 Chunked 방식 적용

• Server Service구현을 FirstRow방식 즉, Chunked방식 구현
• Client의 Dataset 속성에서 progressload를 true 설정
  단(IE8,9는 해당 옵션 동작 안함)

Chunked 된 데이터를 수신중에 onload 이벤트가 발생하면 DSLoadEventInfo의 reason 속성값에 1이 전달된다
데이터를 모두 수신하여 이벤트가 발생하면 DSLoadEventInfo의 reason 속성값에 0이 전달된다

Gzip(압축)

브라우저에서 제공하는 gzip방식을 이용하여 패킷 사이즈 절감
약 70%의 압축률을 보이나 이미지 등은 제외한 텍스트 형식을 js만 적용

주의 : gzip을 중복해서 사용하는 경우 포맷 오류 발생

KeepAlive

일정 개수의 서버 세션(Connect)를 유지하여, 커넥션 시간을 단축
네트워크 성능이 좋은 경우에는 의미가 없으나, 성능 저하 및 SSL통신과 같은 인증이 필요한 경우 필요

• KeepAlive는 HTTP 1.1 스펙으로 서버와 한번 맺은 세션을 지속할지 여부를 결정
  • NRE 및 WRE는 Request 시 기본 KeepAlive를 사용

• 이미 열려있는 세션을 활용하므로 세션 오픈 종료에 따른 시간 단축
  • 사용하지 않는 세션을 유지해야 하므로 서버 측 관리 비용이 증가
  • 상당수의 웹 서버는 KeepAlive를 on하여 사용
• 네트워크 성능이 좋은 경우 크게 의미가 없으나, 그렇지 못한 경우 KeepAlive 사용여부 확인 필요
• SSL통신을 사용할 경우 커넥션 시 마다 인증처리를 하므로 KeepAlive를 사용은 성능향상 효과 기대

NRE의 경우 xadl의 usehttpkeepalive 속성으로 변경이 가능하다
다만, framework js등은 기본적으로 keepalive로 동작된다

Etag

Etag는 Last-modified와 같이 브라우저 캐시에 저장된 파일과 웹 서버의 파일과 일치 여부를 식별(Object의 동일성을 식별하는데 사용하는 값)

• HTTP1.1에서 파일 캐쉬의 비교 대상은 Etag 또는 Last-modified
• Etag는 Last-modified와 같이 브라우저의 캐쉬에 저장된 파일과 웹 서버의 파일이 서로 일치하는지 식별하는 방법 중 하나
• Etag는 node, time, size등의 조합으로 구성
  • 서버 측의 변경을 통해 조합의 변경 가능
• Etag를 사용하는 여러 개의 웹 서버를 운영 중이라면 Etag 값은 동일해야 함
  • 만약 웹 서버의 Etag값이 다른 경우 다시 다운로드 됨

메모리 누수

사례로 본 누수현상 및 해결방법

• IE브라우저 Reload 반복 시 메모리 증가
  • Window 7에서 IE11 사용 시 reload를 반복하는 경우 메모리 증가 현상
    예) Application개발 시 메뉴 이동을 reload기능으로 호출하는 방식으로 구현
  • 메뉴 이동은 html page(application)의 reload기능이 아닌 Application 내에서 이동하도록 구현

결론적으로 MS의 공식적인 답변은 "웹 브라우저 특성상 스크립트나 HTML 코드를 100% 완벽하게 관리해 주지 않는다"이다

외부모를 사용을 위해 WebBrowser 컴포넌트를 사용한 경우

• WebBrowser 컴포넌트 초기화
  • 넥사크로 제품에서 외부모듈을 연동하기 위해 WebBrowser 모듈을 이용하게 되는데 WebBrowser 자체 버그로 인해 메모리가 누적되는 현상
  • 문제 해결을 위해 폼 unload시 추가 스크립트 작성 필요

rMateChart 사용 시 Div방식으로 구현

• rMateChart 사용 시 참고
  • rMateChart는 크게 WebBrowser과 Div방식으로 구현이 가능함
  • WebBrowser의 경우 nexacroBrowser과 HTML5환경에서 모두 동작 가능함
    (단, 모바일 및 메모리를 많이 차지하며, WebBrowser 가지고 있는 메모리 누수현상 발생)
  • Div방식으로 개발을 하는 경우 메모리 사이즈가 작고, 모바일 환경에서도 잘 표현됨
    (단, WRE 환경만 지원함)
• NRE의 경우 rMateChart 최신버전 패치 및 WebBrowser 실행버전을 IE11(최신버전) 실행