HTML5 기반의자바스크립트를 이용한고속화기술과튜닝방법 2017. 10. 13 이우철 Email : comnik@tobesoft.com
agenda 01 02 03 투비소프트소개웹고속화기술과튜닝방법 Q&A 웹고속화를위한튜닝대상 웹고속화를위한분석방법 초기로딩최적화 노드생성최적화 Render 엔진최적화 JavaScript 최적화 메모리누수 개발생산성지원 2
투비소프트소개
투비소프트소개 연혁 혁신과도약 2011~ 현재 변화와성장 2006~2010 2017.10 2016.10 2016.06 2016.05 2015.02 2014.11 2014.11 2014.11 2014.11 2014.10 2014.05 2014.04 2014.03 넥사크로플랫폼 17 론칭 이홍구, 조상원각자대표이사전환동대문 O2O 사업협력을위한양해각서체결제 2 회글로벌상용 SW 명품대전공공부문발주자협의회회장상수상코스닥시장공시우수법인선정 신기술실용화진흥유공표창산업기술진흥유공자대통령표창대한민국 10 대신기술선정대한민국기술대상은상 CP 기업지정 AA 등급획득넥사크로플랫폼 14 GS 인증획득넥사크로플랫폼 14 론칭 XCRO CBP 론칭 ( 현 XGEN) 2010.11 2010.06 2009.11 2009.10 2009.09 2008.11 2008.03 2008.01 2007.08 2006.12 2006.12 제 11 회대한민국 SW 산업인의날대통령표창 KOSDAQ 등록 대한민국 IT 이노베이션국무총리상수상엑스플랫폼론칭엑스플랫폼 GS 인증획득대한미국 SW 대상대통령상수상 SAP Certification 획득 CMMI Level3 획득 Red herrings Asia award 100 대기업선정 TTA VeriTest 획득대한민국소프트웨어기술대상대상수상 시작과도전 2000~2005 2013.12 2013.12 2013.12 2013.11 2013.03 2012.06 2012.04 2012.02 미국법인 NEXAWEB, INC. 설립소프트웨어산업발전유공정부포상산업포장수상엑스플랫폼 13 GS 인증획득대한민국 IT 이노베이션철탑산업훈장수상엑스플랫폼 13 론칭 일본 NTTComware 와파트너십체결 TOBESOFT JAPAN Co.,Ltd.( 일본법인 ) 설립제 11 회대한민국소프트웨어기업경쟁력대상수상 2005.09 2005.09 2005.08 2005.06 2004.11 2003.11 2002.06 마이플랫폼 TL9000 획득마이플랫폼 GS 인증획득품질경영시스템 ISO9001:2000/TL9000 - S R3.0/R3.5 획득 Asianux 인증획득디지털이노베이션대상수상 마이플랫폼 v2.1 론칭 ISO 9001 인증 2011.09 2011.09 한일산업기술페어표창장수상엑스플랫폼 V9.2 론칭 2000.07 ( 주 ) 투비소프트설립
투비소프트소개 주요제품 하나의툴, 하나의소스오직기업만을위해 태어난비즈니스 UI/UX 플랫폼 가벼운성능, 손쉬운기능으로극대화된효율성 스마트한기업환경구현을위한 최적의 UI/UX 플랫폼 기업을위한 X-Internet 기반의 유무선 UI 통합플랫폼 - 최고의성능 / 속도를보장하는 Unified JavaScript Framework기반의 OSMU솔루션 - 한번의개발로다양한디스플레이환경에최적화하여시스템구현 - WYSIWYG기반개발툴인 Nexacro studio와 UI UX Component 제공 - 컴포넌트로손쉬운애니메이션구현과폼상속기능으로개발생산성극대화 - 사용자편의중심의스마트한업무환경을위한쾌적한정보처리기능제공 - 클라이언트 / 서버환경대비웹환경의한계를넘어선 UI 구현및통합관리가능 - 개발의편의와생산성을높여주는컴포넌트및각종기능제공 - 기업업무에최적화된효율적구성으로안전성제공
JavaScript framework 비교 Comparison of JavaScript frameworks https://en.m.wikipedia.org/wiki/comparison_of_javascript_frameworks
투비소프트소개 Web 과 App 통합개발환경 form.xfdl(js) form.xfdl (JS) Deploy Unified framework(js) Webview or web browser Web Unified framework(js) Devic e API Local DB runtime Render Engine Script engine (V8) Native App Form.xfdl-> generate -> form.js 위즈윅기반의통합개발환경
웹고속화기술과튜닝방법
웹고속화를위한튜닝대상 초기로딩속도 화면랜더속도 Document html Web Server.html.css.js.png Head title Body div Render Engine Web p h1 P 노드생성속도 Web p This Web Browser JavaScript Engine JavaScript 코드속도
웹 고속화를 위한 분석방법
초기로딩 최적화 1. HTTP 요청을 줄여라 - network traffic 최소화 - Header에 만료기한을 넣어서 통신을 최소화(expire, max-age) - 200과 304 - Header에 Cache기능 활용 etag와 lastmodified 2. HTTP 사이즈를 줄여라 - Gzip - mode_flate(apache) - Image는 하지 않는다. - 소스 (Compress) - 사이즈를 최대로 줄임 (YUI Compress, jsmin등) 3. WebServer 접속시간을 줄여라 - 기업업무처리 서버 접속자가 일정시간 오래 사용하는 경우엔 재 연결을 최소화 하도록 keepalive를 활용
노드생성최적화 innerhtml 생성방식 vs createelement 호출방식 <html> <head></head> <Body> <Div>.. </Body> </html> function createelement(str) { var div = document.createelement('div'); div.innerhtml = str; var container = document.createdocumentfragment(); for (var i=0; i < div.childnodes.length; i++) { var Node = div.childnodes[i].clonenode(true); container.appendchild(node); } Return container.childnodes; } Inner HTML Create Element 구분정적인화면생성시동적인화면생성시 (Grid) 제품적다많다 용역 IE chrome 유지보수 innerhtml string 을만들때코드수행성능을최대한튜닝 Node 생성후정보를필요로하는 position 정보등은 Node 에서그려진이후에처리하지않고미리계산에의해처리하는형태의튜닝필요
Render 엔진최적화 - 이해 1. Render mechanism User actions: Resize win Font size +/- HTML Tag soup DOM tree UA defaults Stylesheets Style= Styles struct Render tree Paint! 2. Reflow & Repaint Render tree의일부또는전체가다시계산될필요가있는경우다시 layouting되고 paint가발생합니다. 이를 reflow와 repaint라고하는데, 발생을억제하거나수행시간을최대한줄이는것이렌더링최적화의방법입니다.
Render 엔진최적화 Reflow 줄이기 Node 개수및 Depth 를최소화 최대한 Node 가 CSS 참조해서 WebBrowser 가 Rendering 하게 동적으로 Node 를생성시튜닝 - innerhtml을활용한 Node생성과 createelement함수를활용한 Node생성차이. - JavaScript에서 Node의제어시계산은미리, Node속성값지정은한번에. - 여러개의 Node을만들때는한꺼번에만들어서 Body Node에한번에매달기. Node display 성능튜닝 - Scroll 성능개선을위해 Translate 를이용함 - IE/Chrome 에서 visibility 속성대신 display 속성으로대체
JavaScript 최적화 Node(DOM) 접근을최소화 불필요한변수선언을최소화 JavaScript 파일을 delay loading? 객체 / 배열리터럴사용 arr = new Array(); --> arr = []; obj = new Object(); --> var obj = {}; arr.push(i) --> arr[i] = value; var str = new String --> str = "aaa"; for(~) 문안에 Array.length 구하는함수등을호출하지말고, 외부에서 var length = Array.length 를설정 IE open 시 Main Page 의 Object 나변수접근을최소화 (RPC) 작성된 JavaScript code 튜닝시사용 API Date() / Performance.now()
메모리누수 메모리 누수인지 판단이 중요 - 사용하면 할수록 느려짐 - 특정화면에서만 점점 느려짐 튜닝방법 웹브라우저의 개발자 도구를 활용
참조링크 http://www.w3schools.com/js/js_performance.asp https://www.html5rocks.com/ko/tutorials/speed/v8/ https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ http://www.phpied.com/rendering-repaint-reflowrelayout-restyle https://en.m.wikipedia.org/wiki/comparison_of_javascript_frameworks
Q & A
감사합니다.