넥사크로 성능향상 가이드
docs.tobesoft.com
공통영역
ㅡ컨넥션 시간을 최소화 파일 다운개수 최소한으로 js최적
Gernerate로는 기본제공 안되니까 Deploy 에서 추가로 처리해줘야 함 js파일들 merge compress
ㅡ최초 접속페이지를 이미지처리해서 사용자 체감속도 줄여주자
ㅡjs html로딩될 때 js내부엔진파일 다운로드 받는 defer옵션을 통해 성능을 향상시키자.
defer옵션은 IE브라우저 10부터 사용가능하다.
ㅡ화면개수는 5개~7개(화면 컬럼 데이터 건수도 영향)
ㅡ
ㅡ운영시에는 개발 디버깅 스크립트 지우자.
_trace()엔진라이브러리 소스를 이용한다.
오버라이딩해서 엔진이 처리하는 모든 트레이스 소스를 지운것과 같은효과를 내는 것이다.
ㅡ스타일은 최적화해서 적당히 쓰자.
ㅡ공통함수는 엔진에 올려놓고 쓰자.
코딩방법
방법1. 날코딩 널처리, 날자가져요기, 저장 공통로직 라이브러리 파일 분리가 없는 기본 공부용 코
방법2. Lib에 놓고 include해서 가져다 쓰는 방법. 하나의 폼에서 라이브러리성 파일 사용하려면 utility js파일 인클루드 또다른 파일에서도 .xjs 인클루드 하게됨 화면늘어날때마다 함수가 중첩해서 올라온다 (==폼단위로 붙어서) 메모리 영향을 준다.
해당 폼에서만 쓸 경우에 사용할 수 있다.
방법3. 전체 폼에서 함께 써야하는(==utility성 데이터) 경우 프레임워크에 저장해서 엔진에서 제공하는 함수처럼 쓰는 방법
ㅡ공통코드 구현하는 방법 2가지
폼이 로딩하는 시점에 가져오기 or 글로벌데이터로 가져다놓고 쓰는 방법(코드성데이터가 잘 안바뀌는 경우)
로딩이 느려지는 두가지 이유( 탭 로딩 전체가져오기 & 동기처리)
ㅡ공통코드 구현 : 비동기와 ds 한번에 받아오기
화면처리가 늦어지는 이유 2:
탭 컴포넌트가 있을 때
폼로딩될 때 가져오는 공통코드 동기방식으로 작성했을 때
공통코드 관리방식 2 :
폼로딩시점 onload시점 ds가져오는 방법(수시로 바뀌는 데이터일 때)
로딩할 때 글로벌ds로 가져와서 쓰는 방법 (코드성 데이터가 잘 안바뀔 때)
ㅡ화면 단순화 및 분할 컨버젼 할 때 디자인 화면성능을 고려해서 바꿔야 (로딩시점 백단에서 폼뜰때로)
패킷화면이 순차적인 처리라면 한번에 띄워줄 필요 없으니까 화면을 간소화한다. 안보이는 페이지 백단에서 가져와서 로딩시간을 줄여줄 수 있다.
ㅡ탭페이지 프리로드 (화면처리가 늦는 이유 2개 중 하나)
탭뜰 때 폼 로딩 끝나는 시점 onload이벤트가 발생하는데 직접 그린건 모든 탭 가져와야 로딩됐다고 신호보냄
url연결은 첫페이지만 로딩되면 로딩됐다고 신호보냄 so 이 방법으로 연결해야
다른페이지 접근 해야하는 경우 preload 속성 건드리지 말고 (로딩속도 느려짐) 로직으로 풀어야 함
(미리 히든컬럼으로 가져오면 된다)
ㅡ div 에도 동기비동기 속성에 따라 div 연결 페이지 로딩 순서 바이벤트 순서
div url방식 속성이 아닌 스크립트에서 바꿔야 함
async false 동기방식
async true 페이지 호출 하고 (서버페이지가)로딩 되기 전에 바로 (화면이 먼저 올라옴)다음줄을 읽음 - 사용자 체감속도가 올라감
ㅡ 그리드의 Expression 최소한으로 사용하자. (바인딩으로 안될때만)
: 기능구현은 편하지만 성능저하 특히 데이터많은 스크롤의 경우
ds(바인딩==로직처리 이벤트)이용할 수 있으면 먼저 사용해야 함
예) ds 의 text 속성을 expr:Count*Price 로 하기보다 bild:Amt 로 설정.
즉, ds의 이벤트 onvaluechanged
익스프레션을 쓰면 동작 내부구조 마우스가 그리드 위를 움직이면 내부 엔진이 동작하고 ,
바인딩하면 마우스 움직여도 내부 엔진이 작동하지 않음
ㅡ DS의 enableevent 속성
ds 의 setColumn쓰면 내부 엔진이 작동함 그걸 멈추는 작업 반드시 해줘야 함 set_enableevent(false) 를 사용할 것.
ㅡ 그리드의 enableredraw 속성도 마찬가지이다.
프로퍼티 set_ 바인딩아니라 그리드 컨텐츠 동적 변경하려고 할 때 row높이 조절하고 싶을 때 컨텐츠 변경되면 내부 이벤트가 계속 동작하니까 동일하게 false설정해야 함
ㅡ그리드속성 fastvscrolltype
ㅡ 통신 후 간결화
데이터를 서버에서 데이터처리를 다 해온 후에 콜백으로 호출하는 것은 비권장
콜백 디스플레이 정도로 쓰는게 좋지만
그래도 콜백에서 로직처리를 해야한다면 최대한 단순화해야한다.
ㅡ대량 데이터 처리 그리드는 모든 데이터 한번에 가져와서 스크롤로 보는데 가능한 페이징 처리하는게 좋음 화면에 조회 건수 제약줘서 줄여야 사용자 브라우저 환경은 차이나니까
* 그리드 페이징 처리는 고객지원센터 샘플
ㅡDS을 이용한 파일전송은 쓰지 않는다.
전송방법 3
파일 up, down 기능 구현 컴포넌트를 사용(컨버전시 바꿔야 함) /
ds이용방법 blod로 받아 서버로 올림(비권장) 한방에 전달하는 방식 outofmemory..서버죽음. 용량제한 걸어서(100-200Mb) 사용하거나 (마이플랫폼 컨버전의 경우 이 이것만 가능했음 컨버젼시 첫번째로 바꿔야 함) /
상용제품
ㅡOpen창(ChildeForm) 제약사항 모달을 쓰자.
모달이 보달리스보다 속도면에서 추가 엔진라이브러리 부르지 않아서 나아
ㅡresize, visible 내부엔진 동작 성능고려하자
ㅡ스크립트 중복 없게 정리하자
ㅡIE8제약사항 고려 html5로 운영할 때 가장 최신버전 11을 쓰는 것을 권장...
ㅡ디자인처리 IE9 이상 써야.. Alpha값 쓰면 동작은 하지만 느려
ㅡ통신 비동기써야,
ㅡ통신방식 XML, SSV, Binary 속성 옵션창 자동으로 바뀜 ssv 십만건 데이터 가져올 때 제일 빠름 wre로 운영한다는 전제하에
xml통신 서비스는 ssv로 바꾸려면 property 옵션만 바꾸면 자동 포맷 바뀜 (poc 프리세일때보다 속도 좀 느려짐)
ssv포맷은 문자열의 조합 xapi 없어도 사용가능 다이렉트로 데이터 불러와서 가져오는 데 반해서비스를 만들땐 xapi로 만든 서비스 레이아웃이기 때문에 내부적으로 ds 포맷을 만들고 이후 xml로 출력할지 ssv로 할지 binary로 할지 옵션값 따라 결과물이 달라지는 것이다. ds 만드는 시간이 추가 됨.
xapi 이용한 서비스 api는 내부적으로 한번 ds만드는 과정 거쳐서 나오기 때문에..
ㅡ 대용량데이터
서버에서 데이터 받아올 때 한번에 받아올지(디폴트) chuncked로 받아올지 (분절로 더 빨리 오는것처럼 체감)
과정 보이게 하려면 chunked방식으로 데이터 잘라받아야 한다.
ㅡds 속성 progressload true하려면 작동 잘라서 보내는 스크립트... chuncked 변화를 알 수 있어 사용자가 느끼는게 다름 Reason 1, 0
데이터가 다 들어왔을 때 로직 처리 보통 Reaon 0 일때 처리 안함
일반적인 서비스는 이벤트 한번만 발생하니까 reason 0 안쓰고도 문제가 없지만
chuncked방식으로 바꾸는 순간 이벤트가 여러번 발생하니까 reason 써야 함.
ㅡㅡ환경 성능 향상 (3가지로 성능향상)
ㅡ압축 패킷 양 줄일 수 있음 서버가 압축부담할 걸 클라이언트로 넘긴다. 알집 말고 7집 서버의 g집 알고리즘 같아서 결과 동일 파일 생성함
ㅡKeepAlive 서버환경 옵
NRE 환경에서는 트랜젝션으로 서버에 http 통신을 맺고 데이터 받기가 끝나는 시점 통신을 끊음
서비스호출시 다섯개 임의 연결(스레드) 맺고 유지하기 때문에 10개 데이터의통신(트랜젝션) 동시다발적으로 요청해도 컨텍션 클로즈가 발생하지 않음, 네트워크 패킷 찍어보면 4번, 4번, 2번 스레드 감. 4개만 비동기고, 하나는 동기방식으로 사용하기 위해 남겨두는 스레드라 동기방식을 쓸 때 동작하는 스레드이다.
ㅡ 서버환경파일 Etag 속성을 사용해야 클라이언트단 캐시기능 정상 사용가능하다.
사용자가 캐시기능 사용하는데도 매번 서버에서 내려받는다면 서버가 Etag 또는 Last-modified 태그정보를 주지 않기 때문에 캐시비교를 할 수 없어서 못쓰는 것이고, 정상적으로 캐시기능 쓰려면 해당 태그정보 속성데이터를 리턴해줘야한다.
ㅡㅡ메모리
메모리 관리 과거 자체 브라우저에서 했지만 지금은 브라우저에서 하기 때문에 메모리에 영향을 주는 케이스를 만들지 않아야한다.
ㅡ 메모리 누수 : 글로벌변수로 선언되지 않도록 주의해야 한다. 컴포넌트 동적으로 생성하고 리무브시점에 리무브차일드 말고도 destroy, null처리도 해야 메모리에서 떨어진다.
페이지 새로고침 반복하다보면 메모리가 증가하게 된다.
넥사크로에서 웹브라우저 화면 연결하면 웹브라우저 컴포넌트 올리면 onbeforeclose 내부 로직 작성필요하다.
rMateChart 사용해서 개발하는 방법 2 : 웹브라우저 방식으로 개발 / Div 방법으로 개발
웹브라우저는 NRE와 WRE 하나 소스로 같이 쓰는건 웹브라우저 메모리 누수 때문에 권장하지 않지만 NRE라 어쩔 수 없다면 메모리 누수 늦추는 방법 있다. 웹브라우저 컴포넌트를 그릴 때 내 pc IE브라우저 11이 설치되어 있어도 올라오는 IE브라우저 버전은 7 디폴트로 동작 하는데 그버전을 11로 올려주면 누수 적어진다.
Div 방식은 메모리누수가 없다. 제약조건은 WRE에서만 동작한다는 사실.
ㅡ 배포
댓글