고성능자바스크립트 서울대학교전기 정보공학부 가상머신및최적화연구실 박혁우
목차 JavaScript Language JavaScript Engine 개요 JavaScript 최적화수행방식 JavaScript engine 병렬화 고성능 JavaScript 를위한브라우저확장 Code Snapshot 기법 자바스크립트병렬로딩 2
JavaScript
JavaScript Current Status 웹환경에서 client-side 언어로가장널리사용 Usage of client-side programming languages for websites 0 10 20 30 40 50 60 70 80 90 100 None 11 JavaScript 88.7 Flash 18.5 Silverlight 0.2 Java 0.1 http://w3techs.com/technologies/overview/client_side_language/all 4
JavaScript 개요 특징 웹환경에서 client-side 언어로가장널리사용 ECMAScript 표준을따름 ( 현재 ES6) 프로그래밍에익숙하지않은사용자도쉽게구현이가능 동적인특성들 Dynamic typing, Runtime evaluation Functional language First class functions, Nested functions, Closure Prototype based Class 개념대신 prototype 을이용한상속 다양한동적특성들과높은자유도를제공하는 JavaScript 의언어적특성때문에수행엔진의최적화가어렵다. 5
JavaScript Engine
목차 JavaScript JavaScript Engine 개요 Interpreter 방식 Just-In-Time(JIT) Compile 방식 Adaptive Compile 방식 Concurrent JIT Compiler Parallel Garbage Collection(GC) 7
Introduction JavaScript 엔진의수행방식 Interpreter 방식 Just-in-Time(JIT) Compile 방식 Adaptive Compile 방식 대표적인 open source JavaScript 엔진들 JavaScriptCore(JSC) Apple Safari V8 Google Chrome SpiderMonkey Mozilla FireFox 8
JavaScript Interpreter (1) JavaScript 는소스코드형태로배포됨 소스코드는바로수행하기에적합하지않음 Interpreter JavaScript 소스코드를엔진에서수행하기적합한중간표현 (Intermediate Representation, IR) 으로변환하여수행 JSC, SpiderMonkey 에서사용 소스코드를파싱하여 bytecode 형태로변환한후이를수행 var a=1; function test() { var b=1; for (var i=0; i<10; i++) b = b + a; } return b; enter mov r0, Int32: 1(@k0) mov r1, Int32: 0(@k1) jnless r1, Int32: 10(@k2), 21(->28) loop_hint resolve r2, a(@id0) add r0, r0, r2 pre_inc r1 jless r1, Int32: 10(@k2), -13(->11) ret r0 9
JavaScript Interpreter (2) Bytecode 를한줄씩읽어각 bytecode 에해당하는처리루틴이필요한작업을수행함. // JSC Bytecode mov r0, @k0 mov r1, @k1 jmp 17(->24) get_global_var r2, [global], -7 add r0, r0, r2 pre_inc r1 loop_if_less r1, @k2, -15(->9) ret @k3 // JSC Interpreter (C++) op_jmp : {... } op_mov : { int dst = vpc[1].u.operand; int src = vpc[2].u.operand; } callframe->uncheckedr(dst) = callframe->r(src); vpc += OPCODE_LENGTH(op_mov); NEXT_INSTRUCTION(); op_get_by_id : {... } Machine Code 수행보다비효율적인수행방식 10
JIT (Just-in-Time) 컴파일러 (1) 수행할코드를실시간에기계어코드로컴파일한뒤수행 Parser & IR Generator Just-in-Time Compiler JavaScript Source IR Machine Code function test() { var i = 0; i++; return i; } test(); enter mov r0, undefined(@k0) mov r1, undefined(@k0) call r-13, 1, 8 op_call_put_result r0 end r0 enter mov r0, 0(@k0) pre_inc r0 ret r0 ldr r2, [r4] ldr r7, [r4, #4] ldr r0, [r4, #16] ldr r1, [r4, #20] cmn r1, #1 bne 0x4121e2c0 cmn r7, #1 bne 0x4121e310 adds r0, r0, r2 bvs 0x4121e498 str r0, [r4, #16] b 0x4121e33c 11
JIT (Just-in-Time) 컴파일러 (2) 컴파일시간이전체수행시간에포함됨 JIT 컴파일로인한오버헤드가있어도, Machine Code 의수행속도가 interpreter 수행속도보다월등히빨라오버헤드를극복. Interpreter 수행시간 > JIT 컴파일시간 + Machine Code 수행시간 컴파일시간의제약으로인해제한적인최적화만을적용할수있어생성되는 Machine Code 의질이비교적떨어짐 (Static compiler 에비해 ) 한번에모든코드를컴파일하지않고, 실제로수행되는코드에대해서만단위별로컴파일하여수행 (Lazy Compilation) 함수단위로컴파일 (JSC, V8) Trace 단위로컴파일 (IonMonkey) 12
JIT (Just-in-Time) 컴파일러 (3) 한번컴파일된코드는코드 cache 에저장되었다가, 해당부분이다시수행되면 cache 에저장된코드를바로수행함. 코드의반복수행이많을수록 JIT 컴파일통한성능이득증가 실제웹사이트 / 웹앱의경우코드반복수행비중이낮음 처음호출되는경우 JIT 컴파일후코드 cache 에저장 단위코드호출 이미컴파일되어있는경우 Machine Code 실행 13
Adaptive Compilation (1) 기존 JIT Compiler 의한계 Machine Code의최적화수준과컴파일수행시간이비례 짧은시간내에최적화된 Machine 코드생성이어려움 Adaptive Compilation 최적화수준이다른컴파일러들의조합 Cold 영역 : 최적화수준이낮은컴파일러적용 ( 짧은컴파일시간 ) 간단한컴파일러적용하여컴파일수행시간단축 Hot 영역 : 최적화수준이높은컴파일러적용 ( 긴컴파일시간 ) 효율적인 Machine 코드수행을통한성능향상극대화 적용엔진 SpiderMonkey Interpreter + IonMonkey V8 Baseline JIT + CrankShaft(TurboFan) JSC Interpreter + Baseline JIT + DFG JIT + FTL JIT 14
Adaptive Compilation (2) Baseline JIT 컴파일러 짧은컴파일시간 / 낮은최적화수준 Compile Time Running Time Optimizing JIT 컴파일러 긴컴파일시간 / 높은최적화수준 Compile Time Running Time 서로다른 JIT 컴파일러의적용예 ( 함수단위컴파일시 ) 처음수행하는함수는 baseline JITC 로컴파일하여수행함. 함수의 call count 가일정횟수 (threshold) 를넘기면 optimizing JITC 로재컴파일하여수행함. 함수의반복수행이많을수록 optimizing JITC 의효과가커짐. Compile Foo( ) Run Foo( ) Compile Bar( ) Run Bar( ) Run Foo( ) Run Foo( ) Recompile Foo( ) Run Foo( ) Run Foo( ) 수행순서 15
자바스크립트엔진병렬화 자바스크립트엔진의모듈병렬화 자바스크립트언어는기본적으로순차적수행 자바스크립트엔진내모듈을병렬화 Concurrent JIT Compiler 컴파일시간이큰 Optimizing JIT 을별도의 thread 에서동작 Parallel Garbage Collection(GC) 메모리관리방식인 GC 를여러 thread 로나눠수행 16
Concurrent JITC Main thread Parsing IR Gen Interpreter Base JIT OptimizingJIT thread Optimizing JIT Concurrent JITC Optimizing JIT 컴파일러는별도 thread 에서동작 Main thread 에서는 Baseline JIT machine code 계속수행 Optimizing JIT 수행완료후 main thread 에서생성된최적화 machine code 수행 17
Parallel GC JavaScript Heap Memory 사용자는필요한메모리를할당하여사용 (new 키워드 ) 메모리해제는자바스크립트엔진이자동으로처리 JavaScript Heap var obj1 = new Object(); var obj2 = new Object(); obj1 obj1 Object garbage obj1 = obj2; obj2 obj2 Object 18
Parallel GC Garbage Collection(GC) 불필요한메모리공간을찾아서해제하는메모리관리기법 1. Mark 단계 : 사용중인 유효한 메모리공간을탐색 2. Sweep 단계 : Mark 단계에서찾은유효한공간외의메모리영역을반환및해제 (1) Mark Phase x aroot x a x x a a x (2) Sweep Phase Root 19
Parallel GC Parallel GC 메모리공간을나눠 Sweep 수행을여러 thread가나눠서처리 main thread와 Sweep thread가동시에수행되지않음 ( sweep thread 작업이완료될때까지기다린후 main thread 수행 ) Concurrent GC 현재자바스크립트엔진에서많이사용하고있는방식 별도의 thread에서 Sweep 작업수행 Main thread와 Sweep thread가동시에수행 20
목차 JavaScript JavaScript Engine 개요 고성능 JavaScript 를위한브라우저확장 Code Snapshot 기법 자바스크립트병렬로딩 21
Code Snapshot Code Snapshot 자바스크립트코드의 JIT 컴파일후생성된 machine code 를별도의파일에저장 (snapshot) 동일한자바스크립트코드수행시저장된 snapshot 을읽어와수행 Parsing 및 JIT Compile 오버헤드제거 22
Code Snapshot Code Snapshot 적용 JavaScript framework(library) 웹서비스개발을위한여러가지기능을탑재한일종의라이브러리 JavaScript 코드로구성되며웹페이지에 embed 하여사용 jquery, Dojo, AngularJS JavaScript framework 에 Code Snapshot 적용 코드량이많아서수행비중이크다 초기화시수행되는코드가동일 JavaScript Framework Code Snapshot Framework 수행에서 Parsing 및컴파일오버헤드감소 전체자바스크립트수행성능향상 23
자바스크립트병렬로딩 JavaScript Code Parsing Bytecode (IR) 자바스크립트병렬로딩 웹페이지에포함된여러개의자바스크립트파일을순차적으로읽어수행 각자바스크립트파일의 Parsing 과정을병렬로미리처리 자바스크립트수행은순차적으로진행 24
자바스크립트병렬로딩 HTML file <script src= JS1.js >... <script src= JS2.js >... <script src= JS3.js >... 25
감사합니다.