HTML5 기반의자바스크립트를 이용한고속화기술과튜닝방법 2016. 10. 26 이우철 Email : comnik@tobesoft.com
투비소프트소개 연혁 혁신과도약 2011~ 현재 변화와성장 2006~2010 2016.10 2016.06 2016.05 2015.02 2014.11 2014.11 2014.11 2014.11 2014.1010 2014.05 2014.04 2014.03 2014.01 2013.12 2013.12 2013.12 2013.11 2013.03 2012.06 2012.04 2012.02 2011.09 2011.09 이홍구, 조상원각자대표이사전환동대문 O2O 사업협력을위한양해각서체결제2회글로벌상용SW명품대전공공부문발주자협의회회장상수상코스닥시장공시우수법인선정 신기술실용화진흥유공표창산업기술진흥유공자대통령표창대한민국 10대신기술선정대한민국기술대상은상 CP 기업지정 AA 등급획득넥사크로플랫폼 14 GS 인증획득넥사크로플랫폼 14 론칭 XCRO CBP 론칭 ( 현 XGEN) 미국 Nexaweb Technologies UI 사업부와 Nexaweb Japan 인수합병 미국법인 NEXAWEB, INC. 설립소프트웨어산업발전유공정부포상산업포장수상엑스플랫폼 13 GS 인증획득대한민국 IT 이노베이션철탑산업훈장수상엑스플랫폼 13 론칭 일본 NTTComware 와파트너십체결 TOBESOFT JAPAN Co.,Ltd.( 일본법인 ) 설립제 11 회대한민국소프트웨어기업경쟁력대상수상 한일산업기술페어표창장수상엑스플랫폼 V9.2 론칭 2010.11 2010.06 2009.11 2009.10 2009.0909 2008.11 2008.03 2008.01 2007.0808 2006.12 2006.12 제 11 회대한민국 SW 산업인의날대통령표창 KOSDAQ 등록 대한민국 IT 이노베이션국무총리상수상엑스플랫폼론칭엑스플랫폼 GS 인증획득대한미국 SW대상대통령상수상 SAP Certification 획득 CMMI Level3 획득 Red herrings Asia award 100 대기업선정 TTA VeriTest 획득대한민국소프트웨어기술대상대상수상 시작과도전 2000~2005 2005.09 2005.09 2005.08 2005.06 2004.11 2003.11 2002.06 2000.07 마이플랫폼 TL9000 획득마이플랫폼 GS 인증획득품질경영시스템 ISO9001:2000/TL9000 - S R3.0/R3.5 R30/R35 획득 Asianux 인증획득디지털이노베이션대상수상 마이플랫폼 v2.1 론칭 ISO 9001 인증 ( 주 ) 투비소프트설립 2
투비소프트소개 주요제품 하나의툴, 하나의소스오직기업만을위해 가벼운성능, 손쉬운기능으로극대화된효율성 기업을위한 X-Internet 기반의 태어난비즈니스 UI/UX 플랫폼 스마트한기업환경구현을위한최적의 UI/UX 플랫폼 유무선 UI 통합플랫폼 - 최고의성능 / 속도를보장하는 Unified JavaScript Framework 기반의 OSMU 솔루션 - 한번의개발로다양한디스플레이환경에최적화하여시스템구현 - WYSIWYG기반개발툴인 Nexacro studio와 UI UX Component 제공 - 컴포넌트로손쉬운애니메이션구현과폼상속기능으로개발생산성극대화 - 사용자편의중심의스마트한업무환경을위한쾌적한정보처리기능제공 - 클라이언트 / 서버환경대비웹환경의한계를넘어선 UI 구현및통합관리가능 - 개발의편의와생산성을높여주는컴포넌트및각종기능제공 - 기업업무에최적화된효율적구성으로안전성제공 3
투비소프트소개 UI 통합개발툴 nexacro platform RUNTIME Multi Layout Management nexacro platform HTML5 Generate Web Server/ Application Server JavaScript, CSS windows/android/ios/osx Windows/Android/iOS/OSX nexacro platform RUNTIME Apps (Full Functionalities & High Performance) 4
JavaScript framework 비교 Comparison of JavaScript frameworks https://en.m.wikipedia.org/wiki/comparison_of_javascript_frameworks 5
웹고속화를위한튜닝대상 초기로딩속도 화면랜더속도 Document Web Server html.html.css.js.png Head title Body div Render Engine Web p h1 P Web p This JavaScript Engine 노드생성속도 Web Browser JavaScript 코드속도 6
웹 고속화를 위한 분석방법 7
초기로딩최적화 1. HTTP 요청을줄여라 - network traffic 최소화 - Header 에만료기한을넣어서통신을최소화 (expire, max-age) age) - 200과 304 - Header에 Cache기능활용 etag와 lastmodified 2. HTTP 사이즈를줄여라 - Gzip - mode_flate(apache) - Image는하지않는다. - 소스 (Compress) - 사이즈를최대로줄임 (YUI Compress, jsmin등 ) 3. WebServer 접속시간을줄여라 - 기업업무처리서버접속자가일정시간오래사용하는경우엔재연결을최소화하도록 keepalive 를활용 8
노드생성최적화 innerhtml 생성방식 vs createelement 호출방식 <html> <head></head> <Body> <Div>.. </Body> </html> Document html function createelement(str) { var div = document.createelement('div'); div.innerhtml = str; var container = document.createdocumentfragment(); for (var i=0; i < div.childnodes.length; length; i++) { var Node = div.childnodes[i].clonenode(true); container.appendchild(node); } Return container.childnodes; } Head Body title div Web p h1 P Web p This Inner HTML Create Element 구분 정적인화면생성시 동적인화면생성시 (Grid) 제품 적다 많다 용역 IE chrome innerhtml string 을만들때코드유지보수수행성능을최대한튜닝 Node생성후정보를필요로하는 position정보등은 Node 에서그려진이후에처리하지않고미리계산에의해처리하는형태의튜닝필요 9
Render 엔진최적화 - 이해 1. Render mechanism HTML Tag soup DOM tree User actions: Resize win Font size +/- UA defaults Stylesheets Style= Styles struct Render tree Paint! 2. Reflow & Repaint Render tree 의일부또는전체가다시계산될필요가있는경우다시 layouting 되고 paint 가발생합니다. 이를 reflow 와 repaint 라고하는데, 발생을억제하거나수행시간을최대한 줄이는것이렌더링최적화의방법입니다. 10
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 속성으로대체 11
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() 12
메모리누수 메모리누수인지판단이중요 - 사용하면할수록느려짐 - 특정화면에서만점점느려짐 튜닝방법 웹브라우저의개발자도구를활용 13
참조링크 http://www.w3schools.com/js/js_performance.asp p// /j/j_p p 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 14
Q&A
감사합니다.