웹브라우저 고려사항

웹브라우저의 경우 인터넷익스플로러(IE) 점유일이 많아 많은 고객사에서 기본브라우저로 사용합니다,
HTML5는 현재 IE10이상을 사용해야만 제대로된 javascript를 지원받아 범용성 및 활용 가치가 있습니다.

따라서 윈도우7 사용자라면 초기에 IE11로 맞춰서 사용하는 것을 권장합니다.
윈도우 XP를 사용하는 경우라면 최소 IE8브라우저에 ServicePack3을 설치하여 사용할 것을 권장합니다.

현재 윈도우XP의 경우 보안업데이트가 중단된 상태이므로 PC업그레이드를 권장합니다.

동기 통신 보다 비동기 통신 권장

순차적으로 하나씩 처리되는 동기통신에 비하여 비동기 통신을 사용하면 병렬처리를 할 수 있기 때문에 화면 Loading 및 처리 속도는 상당히 차이날 수 있습니다. 여러 개의 동기 통신 요청시 어느 하나가 문제가 생기면 대기 시간이 오래 걸릴 수 있어 시스템 전체에 영향을 미칠 수 있습니다

중요도 : 상

서비스 요청 건수 최소화

서비스의 응답시간은 요청 건수 및 패킷 사이즈, 서버성능 및 네트워크 환경에 따라 영향을 받음 따라서 요청 항목을 최소화 하는게 중요하며 transaction처리시 같은 성격의 여러개 서비스는 개별로 요청하지 말고 그룹으로 묶어 한번에 요청하는게 좋습니다.

중요도 : 상

조회 후 후처리 작업 최소화

서비스를 통해 받은 데이타를 이용하여 화면 구성에 필요한 후 처리 작업을 진행하는 경우 속도에 영향을 줄 수 있으므로 가능한 서비스 단에서 후처리 작업까지 진행한 후 최종결과물을 화면에 표현해 주는 방식으로 처리할 것을 권장합니다.

중요도 : 중

Dataset Enableevent 지정

많은양의 Data를 변경할 때, Dataset 에 작업을 할 때마다 Event 가 발생하여, Bind 되어 있는 Component가 갱신할 내용이 있으면 다시 그리므로 껌뻑이는 현상이 발생. 이런 현상을 막기 위해서는 작업을 시작할때 enableevent 를 false로 설정하고,작업이 완료 했을때 enableevent를 true로 변경하면 화면 껌뻑임을 줄이고 속도를 상당히 개선시킬 수 있음.

중요도 : 상

그리드에서 expr 최소화

이벤트 발생시 그리드에 보여지는 데이터 건수 만큼 expr문이 수행되기 때문에 그만큼 시간이 소요되며 업무에 따라 사용유무를 결정하되 가급적 서버에서 처리하여 결과값을 던져주는 방식으로 변경하는게 좋고 동적으로 변경해야 하는 부분이 있어 사용해야 한다면 반복문등 성능에 문제가 없는지 점검 해야합니다

중요도 : 중

대용량 데이터 조회시

대량의 데이타는 속도에 많은 영향을 주므로 가능한 페이징 처리를 하거나, 데이타를 조건을 주어 최소화 하는 것을 권장합니다

중요도 : 상

Themes 파일 사이즈 최소화

Theme에 등록된 이미지는 바이너리 압축형태로 저장되며 해당 파일이 load되면 메모리는 2배정도의 메모리 용량을 차지하게 됩니다, 시스템 초기 로딩 속도를 고려하신다면 파일 사이즈를 최소화 해야 하며 그러기 위해서는 여러 군데에서 많이 쓰이면 용량이 작은 파일 위주로 등록 하시는게 좋습니다

중요도 : 중

CSS, GlobalVariables, TypeDefinition 최적화

css에서 사용하지 않는 style, global dataset 및 variable 등의 필요 없는 항목 삭제해 주시고 typeDefinition에 등록된 objects 중에서도 사용하지 않는 객체가 있다면 (예: Animation 관련, GraphicPath, GroupBox 등) 제거해 주는게 로딩 속도에 도움이 됩니다

중요도 : 중

웹이미지 경로 지정시 prefixed 사용

스크립트에서 객체에 웹이미지를 지정시 전체 경로를 바로 지정하는 것보다 Services항목에 prefixid를 설정하여 호출하는 것이 서버 환경변경시 대응이 용이합니다.

(변경전 ) 
ImageViewer.image = "URL('http://www.tobesoft.com/logo.gif')"
 
(변경후)
Services항목에 prefixed = "ImageHost"를 등록,
url=''http://www.tobesoft.com/' 지정후
ImageViewer.image = "URL('ImageHost::logo.gif')"

Tab 화면에서 preload 설정

preload=true를 설정하시면 Tab에 연결된 모든 서브 page가 로드 되면서 지정된 작업을 수행하기 때문에 무거운 화면일수록 더욱더 속도가 저하됩니다. 따라서 preload=false 를 설정하여 활성화된 화면만 수행하도록 처리하는게 좋습니다

중요도 : 상

Include 파일 최소화

Division, tabpage url를 통한 서브 페이지 지정시 포함된 모든 파일 다운로드 및 Loading에 따른 이벤트 처리에 영향도가 있기 때문에 최소화 하는게 좋습니다
xjs파일은 되도록 필요한 파일만 include 하도록 하고 include된 xjs파일안에 또 재귀적으로 include되는 파일이 없도록 주의하시기 바랍니다

중요도 : 중

소스 Compress

중요도 : 상

Application 운영시 초기 로딩속도 성능개선 가이드

서버환경설정(예:Apach Tomcat)

keep-alive 설정

특정 한 프로세스가 특정 사용자의 지속적인 요청 작업을 계속해서 처리하도록 함.
keepAliveTimeout값이 채워지기 전에 다시 요청이 온다면 다시 keepAliveTimeout은 다시 0부터 cont를 수행

Keep-alive관련된 설정은 각 서버(WAS)의 설정을 참고하세요.

업무특성상 정해진 인력이 계속 연결해서 쓰는것이면 keep-alive가 더 좋은 성능을 보일것입니다

gZip압축

gZip이란?

gzip은 파일 압축에 쓰이는 응용 소프트웨어이다. 
gzip은 GNU zip의 준말이며, 초기 유닉스 시스템에 쓰이던 압축 프로그램을 대체하기 위한 자유 소프트웨어이다. gzip은 Jean-loup Gailly와 마크 애들러가 만들었다. 
버전 0.1은 1992년 10월 31일에 처음 공개되었으며, 버전 1.0이 1993년 2월에 뒤따라 나왔다. 
오픈BSD의 gzip 버전은 더 오래된 압축 프로그램을 기반으로 하고 있으며, 오픈BSD 3.4에 추가되었다

<Tomcat 기준 : Server.xml]
Connector compressableMimeType="application/javascript,text/xml,text/javascript,application/xml,text/css,application/x-javascript,text/json,application/json,text/plain"
      compression="off"
      URIEncoding="UTF-8"
      useSendfile="false"
      compressionMinSize="2048"
      connectionTimeout="20000"
      port="8080"
      ...중략 ... 
compression="off" 를 on으로 설정시 압축되어서 속도 향상이 가능합니다.

각 서버(WAS)별 설정방법은 해당 밴더사에 문의하시기 바랍니다.

WAS에서 compression기능을 사용하게 되면 WAS의 리소스를 이용하기 때문에 다소 서버 부하가

발생할 수 있으나, 네트웍 구간의 사이즈는 줄일 수 있는 장점을 가지고 있습니다.

적용확인

크롬브라우저 단축키(f12) / network

network

참고사항 (일부엔진모듈 gzip처리방법)

WAS의 compression기능을 사용하지 않고 일부 파일을 gzip형태로 사용하는 방법

<script type="text/javascript" src="./nexacro14lib/component/ComComp/Button.js.gz"></script><-- gz
<script type="text/javascript" src="./nexacro14lib/component/ComComp/Static.js"></script>
<script type="text/javascript" src="./nexacro14lib/component/ComComp/Edit.js"></script>
<script type="text/javascript" src="./nexacro14lib/component/ComComp/MaskEdit.js"></script>
<script type="text/javascript" src="./nexacro14lib/component/ComComp/TextArea.js"></script>
<script type="text/javascript" src="./nexacro14lib/component/ComComp/ImageViewer.js"></script>
<script type="text/javascript" src="./nexacro14lib/component/ComComp/CheckBox.js.gz"></script>  <-- gz
<script type="text/javascript" src="./nexacro14lib/component/ComComp/Radio.js"></script>

초기로딩 index.html 파일을 보게 되면 확장자가 .js.gz으로 만들어진 파일을 볼 수 있습니다.

이 확장자는 서버에서 처리하던 gzip을 개발자가 직접 gzip으로 압축하여 서버에 파일을 올려놓는 방법으로 서버(WAS)의 compression 기능을 사용하지 않는 방법에서 compression효과를 내는 방법입니다.

WebToB 예)

이때 서버(WAS)에서 확장자가 gz인 경우 Filter처리를 할 수 있는 옵션기능을 적용시켜 주어야 합니다.
(해당 Filter 기능 설정에 대한 부분은 WAS업체에 문의해 주시기 바랍니다.)

참고 : WebToB 환경설정파일
*HEADERS
gzip action="AddResponse", 
FieldName="Content-Encoding", FieldValue = "gzip", RegExp="W.(js.gz)$"
 <--------- 정규식을 이용하여 처리

Tomcat 예)

web.xml
아래 Fitler 내용 추가 

    <filter-mapping>
        <filter-name>gzipFilter</filter-name>
        <url-pattern>*.gz</url-pattern>
    </filter-mapping>
     <filter>
        <filter-name>gzipFilter</filter-name>
        <filter-class>gzip_nc.Gz_nc</filter-class>
    </filter>

사전 준비사항 ) java class 이용하므로 아래 소스를 컴파일해야 합니다.

package gzip_nc;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Gz_nc implements Filter{
 @Override
 public void destroy() {
  // TODO Auto-generated method stub
  
 }
 @Override 
 public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
   throws IOException, ServletException {
   HttpServletRequest  httpRequest  = (HttpServletRequest)  arg0;
   HttpServletResponse httpResponse = (HttpServletResponse) arg1;
   httpResponse.addHeader("Content-Encoding", "gzip");
   arg2.doFilter(httpRequest, httpResponse); 
      
 }
 @Override
 public void init(FilterConfig arg0) throws ServletException {
  // TODO Auto-generated method stub
  
 }
}

nexacro platform14 Deploy 기능 수행방법

Deploy기능은  json모듈을 하나에 js(자바스크립트)로  머지시켜 압축을 시켜주기 때문에
용량을 최소화 시켜줘 성능을 최적화 시켜줍니다.

별도 Deploy 해줄 폴더는 만들어 사용하셔야합니다.

Build-Deploy-Deploy Application

deploy

소스 비교

Before)

before

After

after

NexacroLoad.json을 이용하여서 nexacro 성능개선

넥사크로를 이용하여 개발된 Application은 실행시 nexacro 공통
라이브러리인 
nexacro14lib파일을 호출하게 됩니다.
이때 호출하게되는 파일수를 줄여서 성능개선을 할수 있습니다.

nexacro 초기 구동 패킷(호출url)

수정전

url1

index.html 호출 후 main.xfdl호출까지 58번의 호출이 됩니다.

수정후

url2

index.html 호출 후 main.xfdl호출까지 6번의 호출이 됩니다.

즉 NexacroLoad.js 파일 하나로 묶어서 호출 url수를 줄일 수 있습니다.

적용방법

NexacroLoad.json을 생성하기

nexacro14lib의 사용중인 CompBase.json, ComComp.json, DeviceAPI.json, Grid.json 파일을
합쳐서 1개의 NexacroLoad.json을 생성합니다.

NexacroLoad.json파일을 nexacro14lib\component\ 폴더에 복사합니다.

json내용

기존 CompBase.json 내용
 {
 "name": "ComComp",
 "version": "14.0.0.730",
 "description": "nexacro platform 14 Unified Framework Library",
 "license": "",
 "scripts": [
   "ComComp/Dataset.js", 
   "ComComp/DomObject.js",
   "ComComp/Button.js", 
   "ComComp/Static.js", 
   "ComComp/Edit.js", 
   "ComComp/MaskEdit.js", 
   "ComComp/TextArea.js", 
   "ComComp/ImageViewer.js", 
   "ComComp/CheckBox.js", 
   "ComComp/Radio.js", 
   "ComComp/ListBox.js", 
   "ComComp/Combo.js", 
   "ComComp/Div.js", 
   "ComComp/ProgressBar.js", 
   "ComComp/PopupDiv.js", 
   "ComComp/Menu.js", 
   "ComComp/PopupMenu.js", 
   "ComComp/Spin.js", 
   "ComComp/DatePicker.js", 
   "ComComp/Calendar.js", 
   "ComComp/GroupBox.js", 
   "ComComp/Tab.js", 
   "ComComp/FileDownload.js", 
   "ComComp/FileUpload.js", 
   "ComComp/FlashPlayer.js", 
   "ComComp/MediaPlayer.js",
   "ComComp/WebBrowser.js",
   "ComComp/Map.js",
   "ComComp/Sketch.js",
   "ComComp/ExportObject.js",
   "ComComp/ImportObject.js",
   "ComComp/Tray.js"
 ],
  
 "objInfo": [
 "ComComp/Sketch.info", 
 "ComComp/editmodeType.info", 
 "ComComp/imemodeType.info", 
 "ComComp/readonlymodeType.info", 
 "ComComp/updatebindingvaluemodeType.info"
 ]
}
//@ sourceURL=ComComp.json

NexacroLoad.json 통합하기

각각의 json파일을 하나로 통합합니다.

{
 "name": "NexacroLoadJson",
 "version": "14.0.0.703",
 "description": "nexacro platform 14 Unified Framework Library",
 "license": "",
 "scripts": [
  "CompBase/Element_HTML5.js",
  "CompBase/Element_Runtime.js",
  "CompBase/CompBase.js", 
  "CompBase/CompEventBase.js", 
  "CompBase/Data.js", 
  "CompBase/EditBase.js", 
  "CompBase/FormBase.js", 
  "CompBase/TitleBar.js", 
  "CompBase/StatusBar.js", 
  "CompBase/FrameBase.js",  
  "CompBase/ScrollBar.js", 
  "CompBase/Step.js",
  "ComComp/Dataset.js", 
  "ComComp/DomObject.js",
  "ComComp/Button.js", 
  "ComComp/Static.js", 
  "ComComp/Edit.js", 
  "ComComp/MaskEdit.js", 
  "ComComp/TextArea.js", 
  "ComComp/ImageViewer.js", 
  "ComComp/CheckBox.js", 
  "ComComp/Radio.js", 
  "ComComp/ListBox.js", 
  "ComComp/Combo.js", 
  "ComComp/Div.js", 
  "ComComp/ProgressBar.js", 
  "ComComp/PopupDiv.js", 
  "ComComp/Menu.js", 
  "ComComp/PopupMenu.js", 
  "ComComp/Spin.js", 
  "ComComp/DatePicker.js", 
  "ComComp/Calendar.js", 
  "ComComp/GroupBox.js", 
  "ComComp/Tab.js", 
  "ComComp/FileDownload.js", 
  "ComComp/FileUpload.js", 
  "ComComp/FlashPlayer.js", 
  "ComComp/MediaPlayer.js",
  "ComComp/WebBrowser.js",
  "ComComp/Map.js",
  "ComComp/Sketch.js",
  "ComComp/ExportObject.js",
  "ComComp/ImportObject.js",
  "ComComp/Tray.js",
  "Grid/GridInfo.js", 
  "Grid/Grid.js",
  "DeviceAPI/SQLite.js",
  "DeviceAPI/SQLite_Runtime.js",
  "DeviceAPI/Plugin.js",
  "DeviceAPI/DeviceObjs.js",
  "DeviceAPI/DeviceObjs_Runtime.js",
  "DeviceAPI/XPush.js",
  "DeviceAPI/Mobile.js",
  "Chart/ChartInfo.js", 
  "Chart/Chart.js",
 
 ],
  
 "objInfo": [
 "ComComp/Sketch.info", 
 "ComComp/editmodeType.info", 
 "ComComp/imemodeType.info", 
 "ComComp/readonlymodeType.info", 
 "ComComp/updatebindingvaluemodeType.info"
 ]
}
//@ sourceURL=ComComp.json

넥사크로스튜디로를 통해 적용방법

TypeDefinition변경하기

TypeDefinition1

Deploy

Build->deploy->Deploy Application에서 deploy합니다.

TypeDefinition1

주의사항

Framework.json의 js는 포함할 수 없습니다.

CompBase.json, ComComp.json, Grid.json, DeviceAPI.json 순서는 변경 불가능합니다.

Runtime구동시에는 동일하게 start.json을 자동으로 적용됩니다.

start.json 예제)
{
    "version" : "14.0.0.1",
    "runtime" :
    {
        "target" :
        {
            "os" : "windows"
        },
        "framework" :
        [
         "./nexacro14lib/framework/Framework.js"
        ],
        "component" :
        [
         "./nexacro14lib/component/NexacroLoad.js"
        ],
        "form" :
        [
         "./Base/main.xfdl.js"
        ],
        "xadl" :
        {
          "launch" : "./nexacro.xadl.js",
     "quickview" : "./nexacro.xadl.quickview.js"
        },
        "protocol":
        {
            "adaptors":
            [
          
            ]
        },
        "resource" :
        {
        }
    }
}

디자인/CSS 작업시 주의사항 (성능향상)

가능한 이미지를 많이 사용하지 않토록 합니다.

통 이미지는 가능한 사용하지 않습니다.

팝업캘린터의 배경을 전체 통이미지를 사용하지 않습니다.
특정화면 전체의 배경을 불필요한 통 이미지로 사용하지 않습니다.

웹브라우저 고려사항

동기 통신 보다 비동기 통신 권장

서비스 요청 건수 최소화

조회 후 후처리 작업 최소화

Dataset Enableevent 지정

그리드에서 expr 최소화

대용량 데이터 조회시

Themes 파일 사이즈 최소화

CSS, GlobalVariables, TypeDefinition 최적화

웹이미지 경로 지정시 prefixed 사용

Tab 화면에서 preload 설정

Include 파일 최소화

소스 Compress

Application 운영시 초기 로딩속도 성능개선 가이드

서버환경설정(예:Apach Tomcat)

keep-alive 설정

gZip압축

gZip이란?

적용확인

참고사항 (일부엔진모듈 gzip처리방법)

WebToB 예)

Tomcat 예)

nexacro platform14 Deploy 기능 수행방법

Build-Deploy-Deploy Application

소스 비교

NexacroLoad.json을 이용하여서 nexacro 성능개선

nexacro 초기 구동 패킷(호출url)

수정전

수정후

적용방법

NexacroLoad.json을 생성하기

json내용

NexacroLoad.json 통합하기

넥사크로스튜디로를 통해 적용방법

TypeDefinition변경하기

Deploy

주의사항

디자인/CSS 작업시 주의사항 (성능향상)

가능한 이미지를 많이 사용하지 않토록 합니다.

통 이미지는 가능한 사용하지 않습니다.

CSS코드로 gradation처리가 가능한 경우에는 이미지를 사용하지 않습니다.

특별한 사유가 없는 경우 gradation사용은 자제하거, 단일 색상 사용을 권장합니다.