====== 성능 가이드 ======
이 장에서는 다국어 개발 환경에 대한 내용을 설명한다.
  * 개요
  * 영역별 성능 개선 대상 및 내용
  * 기타 API

==== 개요  ====
성능 개선을 위한 영역은 아래와 같다.

|< 100% 150px - >|
^ 구분 ^ 비고 ^
| 서버 | WEB/WAS 서버 S/W 의 구성 역역 |
| 실행 파라미터 | xFrame5 솔루션 실행 파라미터 영역 |
| 전용 브라우저 | 전용 브라우저 환경시 적용 가능한 옵션 |
| 컴포넌트 API 및 속성 | UI 컴포넌트에 대한 API 사용법 및 성능 관련 속성 |
| 화면 유형 | 컨테이너 화면 및 포틀릿 화면 사용 |

===== 영역별 성능 점검 =====
이 장에서는 영역별 성능 점검 대상에 대해서 설명한다.
  * 영역별 성능 점검 대상 및 내용
  * 성능 측정 API 및 파라미터

==== 서버 ====
성능 개선을 위한 방식중 캐쉬 및 압축에 대해서 아래와 같은 항목에 대한 점검이 필요하다.
|< 100% 200px - 200px >|
^ 구분 ^ 비고 ^ 비고 ^
| TOMCAT 서버  | <WRAP>
톰캣 서버에 HTTP GET 방식 파일 압축 기능 설정
<code>
compression="on"
compressionMinSize="2048"
noCompressionUserAgents="gozilla, traviata"
compressableMimeType="text/html,text/xml,text/plain,text/jvascript,text/css,application/javascript"
</code>
</WRAP> | 톰캣 서버 설정 문서 참조  |

==== 실행 파라미터 ====
성능 개선을 위한 실행 파라미터중 아래와 같은 항목에 대한 점검이 필요하다.

|< 100% 200px - 200px >|
^ 구분  ^ 비고  ^ 비고  ^
| XTRAN_COMPRESS\\ 파라미터 | XDataSet5 방식 사용시 서버로부터 수신되는 데이터에 대한 압축 처리 여부 지정용 파라미터이다. | |
| USE_CACHE\\ 파라미터 | <WRAP>
엔진에 의해서 동적 방식(AJAX 방식)으로 로드되는 화면 관련 파일에 대한 브라우저 캐쉬 사용 여부를 설정한다.

적용 대상 파일
  * xframe5.html 파일에 지정되지 않은 엔진 스크립트 파일
  * 글로벌 모듈 리스트 파일 및 글로벌 모듈 파일 글로벌 데이터셋 리스트 파일 및 글로벌 데이터셋 파일
  * 화면 XML 파일 및 JavaScript 파일 화면 loadjs API를 통해서 로드되는 스크립트 파일

미적용 대상 파일
  * 엔진에서 사용하는 CSS 파일 및 이미지 파일
  * 화면에서 사용하는 이미지 파일
</WRAP> | |
| USE_PICKLIST_CACHE\\ 파라미터 | <WRAP outdent>
  * 코드 파일에 대한 캐쉬 사용 여부를 설정한다.
  * 코드 파일 캐쉬는 USE_CACHE 와 다르게 브라우저 캐쉬를 사용하지 않고, 코드 내용 자체를 xFrame5 엔진 메모리내에 캐쉬하는 방법을 사용한다.
  * 따라서 브라우저 종료시 캐쉬된 내용은 삭제된다.
  * 처음 코드 파일을 AJAX 방식으로 로드시 캐쉬 처리 여부는 USE_CACHE 및 CACHE_TYPE 파라미터에 따라 동작한다.
</WRAP> | |
| CACHE_TYPE\\ 파라미터 | <WRAP>
USE_CACHE/USE_PICKLIST_CACHE 파라미터 true 인 경우, 아래와 같은 캐쉬 처리 방식을 제공한다.
  * 0: 브라우저 기본 방식
  * 1: 서버 파일 수정 시각 이용 방식

[브라우저 기본 방식]
  * 브라우저 기본 방식을 사용하며, URL을 변경하지 않는다.
  * 경우에 따라서 서버 파일이 변경되었음에도, 로컬 캐쉬에 있는 파일이 사용되는 오류가 발생할 수 있다.

[서버 파일 수정 시각 이용 방식]
  * HTTP HEAD 명령을 이용하여 서버로부터 파일에 대한 수정 시각 정보를 년월일 시분까지 구하여, 파일 URL 에 추가 파라미터를 지정하는 방식이다.
  * 브라우저 기본 방식 사용시 발생할 수 있는 서버 파일 미반영 오류를 최소화 하기 위한 방식이다.
  * 하지만 파일 로드시 HTTP HEAD 명령 처리를 위한 부가적인 처리 시간이 소요되기 때문에, 적용전에 성능 점검이 필요하다.
  * |[[file://]]프로토콜을 사용하는 환경에서는 사용 적용하지 말아야 한다.
</WRAP> | |

캐쉬 관련된 가이드 문서는 아래의 URL 을 참조한다.

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching

=== 캐쉬 사용시 주의사항 ===
USE_CACHE 가 적용되지 않는 자원에 대한 캐쉬 관리 방법은 아래와 같다.

|< 100% 200px - >|
^ 구분 ^ 세부 구분  ^
| xframe5.html 파일에\\ 링크된 CSS 파일 및\\ JavaScript 파일  | <WRAP>
아래의 예시와 같이 파일 URL 뒤에 파일 버전 정보성 쿼리 문자열을 추가하여 파일 변경시 해당 값을 변경하는 방법을 이용하여 캐쉬된 내용을 갱신하는 방법을 적용한다.
(버전 관련 내용은 적용한 날짜 시각 정보를 설정할 것을 권고한다.)

CSS 파일 예시
<code>
<link rel="stylesheet" type="text/css" href="./xframe5.css?v=20200212">
</code>

JavaScript 파일 예시
<code>
<script type="text/javascript" src="./xframe5.js?v=20200212"></script>
</code>
</WRAP> |
| CSS 파일 내에\\ 정의된 이미지 파일 | <WRAP>
일반적으로 브라우저 기본 캐쉬 정책을 사용한다.

CSS 파일 내에 정의된 이미지 파일도 다음과 같이 버전 정보성 쿼리 문자열을 추가하여 파일 변경시 해당 값을 변경하는 방법을 이용하여 캐쉬된 내용을 갱신하는 방법을 적용이 가능하다.

CSS 파일내 이미지 URL 예시
<code>
._xf_combobox_button { background-image: url('image/btn_combo.png?v=20200212'); }
</code>
</WRAP> |
| 컴포넌트의 image 관련 속성  | 일반적으로 브라우저 기본 캐쉬 정책을 사용한다. |

=== 전용 브라우저 환경 ===
전용 브라우저 사용시 아래와 같은 항목에 대한 점검이 필요하다.
전용 브라우저에 대한 자세한 내용은 솔루션 설치 디렉토리 하위의 “doc” 디렉토리에
“[[http://technet.softbase.co.kr/xframe5/version/studio/prod/master/doc/92_xFrame5_Browser_Guide.pdf|92_xFrame5_Browser_Guide.pdf]]” 파일을 참조한다.

|< 100% 150px 300px - >|
^ 구분 ^ 세부 구분  ^ 설명  ^
| 로컬 모드 | 전용 브라우저 파리미터 설정 및\\ [[file://]] 프로토콜 사용 방식으로 URL 지정  | XSync 및 전용 브라우저 환경인 경우, 화면 관련 리소스를 로컬로 다운로드하여, 화면 관련 파일에 대한 네트워크 사용을 절약하여 화면 로딩 속도의 개선 효과가 나타난다. |
| --cache-dir | 전용 브라우저 캐쉬 디렉토리 파라미터 | <WRAP outdent>
  * 전용 브라우저 사용시 캐쉬/쿠키 저장 디렉토리를 지정한다.
  * 지정하지 않을 경우, 전용 브라우저는 메모리에 캐쉬를 관리하며, 브라우저 종료시 캐쉬된 내용은 없어진다.
</WRAP> | |


=== 컴포넌트 API 및 속성 ===

컴포넌트 API 및 속성을 이용하여 데이터 표시 속도 및 화면 로딩 영역에 대한 성능 개선 효과를 기대할 수 있다.

|< 100% 300px - >|
^ 구분  ^ 설명 ^
| screen.requestsubmit | <WRAP outdent>
  * 동기/비동기 파라미터에 대해서 특수한 경우가 아니면 해당 파라미터를 비동기 방식으로 지정하기를 권고한다.
  * 브라우저는 싱글 쓰레드 방식으로 스크립트가 동작하기 때문에, 동기 방식으로 지정하는 경우, 해당 통신이 완료되기 전까지 다른 동작을 수행하지 못하기 때문에 성능 저하가 발생할 수 있다.
</WRAP> |
| 그리드 horzscroll_movemode 속성 및\\ GRID_HORZSCROLL_ MOVEMODE\\ 실행 파라미터 | <WRAP outdent>
  * 그리드의 컬럼이 많은 경우, 그리드의 UI 표시 속성으로 개선하기 위한 속성으로 horzscroll_movemode 값을 1:column 으로 지정하거나,
  * 0:default 로 지정하고 GRID_HORZSCROLL_MOVEMODE 파라미터가 1 인 경우에 적용된다.
  * 픽셀 모드(2:pixel)와 다르게 컬럼 모드를 사용할 경우, 컬럼 너비를 기준으로 제일 우측에 불필요한 공백이 표시될 수 있다.
</WRAP> |
| 그리드/트리 refresh 옵션 파라미터 | <WRAP outdent>
  * 그리드 및 트리와 같이 대량의 아이템에 대한 정보를 표시하는 컴포넌트에 대한 데이터 설정 처리시 refresh 옵션 파라미터를 지정하여 호출할 경우,
  * 불필요한 UI 렌더링을 방지하여 성능 개선 효과가 나타난다.
</WRAP> |
| 탭 preload_item 속성 | <WRAP outdent>
  * UI 프레임 영역중 업무 화면을 로딩하기 위한 탭인 경우, preload_item 속성을 true 로 설정하여,
  * 미리 화면 로딩용 iframe을 생성하여, 새로운 화면 로딩 속도 향상 효과가 나타난다.
</WRAP> |
| 탭 link_loadtype 속성 | <WRAP outdent>
  * 기본적으로 탭 생성시 탭에 링크된 화면을 전부 로딩한다.
  * 탭에 링크된 화면이 많은 경우, 로딩속도가 현저히 떨어진다.
  * 화면로딩후 바로 후속처리를 하지 않는 화면은 link_loadtype 속성을 1:activate 로 설정하여,
  * 해당 탭이 활성화되었을 때에 링크화면을 로딩함으로써 초기기동시의 로딩 속도를 향상시킬 수 있다.
</WRAP> |
| 그리드 vertscrollbar_style속성 | <WRAP outdent>
  * 그리스 수직 스크롤 표시 방식에 대한 속성이다.
  * 기본값을 1:auto 로 지정하는 경우, 그리드 데이터 건수에 따라 수직 스크롤이 동적으로 표시/숨김 처리를 수행하는 처리 시간이 발생하므로, 2:always 값을 권고한다.
</WRAP> |
| 그리드 row_autoheight 속성 및\\ 그리드 컬럼 데이터부 text_wordbreak 속성 | <WRAP outdent>
  * 그리드 컬럼 데이터부의 text_wordbreak 가 true 인 컬럼 내용을 기준으로 행 높이의 자동 조절 여부를 지정하는 속성이다.
  * 불필요한 높이 계산을 방지하기 위해 필요한 컬럼에만 text_wordbreak 속성을 true 로 지정해야 한다.
</WRAP> |