[Udemy] JavaScript: The Advanced Concepts - 섹션 2 : JavaScript Foundation

** ⚠ priv | 강의노트 카테고리에 있는 내용은 발행이 목적이 아니기 때문에 전혀 정제되어있지 않습니당.**

 

11. Inside the V8 Engine

V8 엔진은 C++로 작성됨

구글 크롬, Node JS 에서 사용

V8엔진 작동원리?

JS 소스코드 → Parser 가 소스코드를 분석해서

AST _(Abstract Syntax Tree - 추상구문트리 : 컴파일러에서 많이 사용하는 자료구조)_로 변환 -
이때 scope도 형성된다고함

AST를 가져가다가 ignition ( V8 interpreter ) 한테 넘기고

얘가 JS코드를 바이트코드 ( Bytecode ) 로 변환

Profiler 는 이 중 에서 자주 쓰이는 코드를 찾음(함수,변수의 호출빈도를 모아서)

그걸 들고 TurboFan (최적화 담당 컴파일러) 에 가져가면 최적화(optimize)함

다양한 최적화기법 > 궁금하당!!

이런 원리를 몰라도 JS를 사용할 수 있다

그치만

how the engine works underneath the hood 를 아는 것은 우리가 more optimized code 좀 더 최적화 된 코드를 짤 수 있게 해준다!

V8 엔진 구동원리를 공부하는데 도움이 많이 된 포스팅
https://evan-moon.github.io/2019/06/28/v8-analysis/
ㄴ넘모 좋은 포스팅인데 감사하다고 댓글을 달 곳이 없다ㅠ

12. Comparing Other Languages

C++ 로 코드를 짜서.exe파일을 만들 수 있다
C++ code -> an executable machine code 로 컴파일된
고것을 더블클릭하면 코드가 실행이 된다
얘는 이미 have been compiled 되어있어서 바로 실행될 것이다.

JAVA 는 JVM (Java Virtual Machine)를 이용함
JVM은 코드를 compile 하거나 interpret 해서 bytecode로 만든다(?)
bytecode is not a native machine code. 컴퓨터가 이해하지 못함.

그렇게 때문에 virtual machine 이나 JavaScript engine 과 같은 소프트웨어가 있어야 실행 가능함

13. Writing Optimized Code

JS 엔진을 돕기위해서 (더 빠르게 작동하기 위해서?)
요것들은 정말 주의하셈

eval(), arguments, for.. in, with, delete

arguments

: 요거 많이 쓰게 되긴하는데, we can use parameter destructuring to avoid using arguments for and loop.
ㄴ MDN 에 요러케 써있는데 이얘긴가?
Note: ES6 호환 코드를 작성 중이라면 되도록 나머지 매개변수 구문을 사용해야 합니다.

ㄴ 관련 읽을 거리 : Avoid modifying or passing arguments into other functions — it kills optimization - https://www.jstips.co/en/javascript/avoid-modifying-or-passing-arguments-into-other-functions-it-kills-optimization/
ㄴ Passing arguments to any other function is known as leaking arguments. https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments

ㄴ 대충 arguments 얘를 어떤 함수(array.slice 등등)에 통과시키면 V8 엔진의 optimization 과정을 skip한다는 얘기인듯!
ㄴ
What is safe arguments usage?

Only use

• arguments.length
• arguments[i] where i is always a valid integer index into the arguments, and can not be out of bound
• Never use arguments directly without .length or [i]
• STRICTLY fn.apply(y, arguments) is ok, nothing else is, e.g. .slice. Function#apply is special.
• Be aware that adding properties to functions (e.g. fn.$inject =...) and bound functions (i.e. the result of Function#bind) generate hidden classes and, therefore, are not safe when using #apply.

ㄴ 신기하구만🤔🤔

for ... in

object를 loop할 일이 있으면
Object.keys() 를 이용

V8 엔진의 중요한 optimizing 컴파일 기법

Inline Caching, Hidden Classes

인라인 캐싱은
어떤 함수가 똑같은 인자로 계속계속 호출되면
고 호출된 라인 자체를 return값으로 대체해서 해석 > 언더대시 과제했던거 중에서 memoize 이랑 뭔가 비슷한 느낌인데..🤔

요걸 이해하려면 히든클래스를 알아야됨

ㄴ 읽을 거리 : Javascript Hidden Classes and Inline Caching in V8
https://richardartoul.github.io/jekyll/update/2015/04/26/hidden-classes.html

​ Optimization takeaways

1. 숨겨진 클래스와 그 이후에 최적화된 코드를 공유할 수 있도록 항상 객체 속성을 동일한 순서로 인스턴스화합니다.
2. 인스턴스화 후 개체에 속성을 추가하면 숨겨진 클래스 변경이 강제로 적용되고 이전 숨겨진 클래스에 최적화된 모든 메서드가 느려집니다. 대신 해당 생성자에 있는 개체의 속성을 모두 할당합니다.
3. 인라인 캐싱으로 인해 동일한 방법을 반복적으로 실행하는 코드는 여러가지 방법을 한번만 실행하는 코드보다 빠르게 실행됩니다.

function Animal(x, y){
    this.x = x;
    this.y = y;
}

const obj1 = new Animal(1, 2);
const obj2 = new Animal(3, 4);

obj1.a = 30;
obj1.b = 100;

obj2.b = 30;
obj2.a = 100;

// 이렇게 객체의 속성을 다른 순서로 할당 hidden class를 공유하지 않게 되어 속도가 저하됨
// delete 연산자 issue도 마찬가지 이유

여기서 핵심은
예측가능한 predictable 코드를 사용해야 한다는 것.
예측가능할수록 컴퓨터 입장에서도 최적화 하기 좋다.

컴파일러를 혼란스럽게 하지 않는 예측가능한 코드가 fast efficient code

ㄴ 읽을 거리 :
자바스크립트는 어떻게 작동하는가: V8 엔진의 내부 + 최적화된 코드를 작성을 위한 다섯 가지 팁

https://engineering.huiseoul.com/자바스크립트는-어떻게-작동하는가-v8-엔진의-내부-최적화된-코드를-작성을-위한-다섯-가지-팁-6c6f9832c1d9

14. WebAssembly

Why not just use machine code from the beginnig?

브라우저들이 the standard binary executable format 을 동의했음

요것은 곧 Game Changer 가 될거임. 예의 주시하셈

WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드입니다. 네이티브에 가까운 성능으로 동작하며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++, Rust 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 사용할 수 있게 해줍니다. 또한 JavaScript와 함께 실행되며 서로를 보완할 수 있도록 설계되었습니다.

++

웹 어셈블리는 자바스크립트의 무덤일까?
https://youtu.be/KjgDxBLv0bM

WebAssembly = WASM

Compilation Target

브라우저가 이해할 수 있음

웹 어셈블리파일은 그냥 바이너리 파일임
C, C++, Rust, Go 가 웹어셈블리로 컴파일됨

JS가 못하는걸 하게해줌

소프트웨어를 설치하지 않아도 브라우저가 C, C++ 같은 언어를 이해할 수 있으니까 cooool

이제 유니티게임을 컴파일하면 웹사이트가 해당 바이너리 파일을 이해할 수 있음.

웹 어셈블리와 JS 는 서로 대체제가 아니라
서로 못하는 부분을 보완해주는것

슈퍼 쿨!

comprehension 1.이해력

feasible 1.실현 가능한

15. Call Stack and Memory Heap

무지막지하게 중요한 콜스택과 메모리힙

heap : 메모리를 allocate, use, release memory

call stack : we need place to keep trak of where we are in the code, so with that we can run the code in order

stack frame allow us to know where we are in the code

16. Stack Overflow

콜스택에 중첩된 함수가 계속계속 쌓인다면

function inception(){
    inception();
}

Recursion is one of the most common ways to create a stack overflow

Uncaught RangeError: Maximum call stack size exceeded 발생!

17. Garbege Collection

메모리도 스택처럼 limit가 있기때문에
더이상 사용하지 않는 메모리는 GC에 의해 free up 됨

C와 같은 low level 언어에서는 직접 컨트롤한다

Mark and Sweep Algorithms 에 의해 작동

Reference-counting에서는 서로가 서로를 참조하는 객체는 GC의 수집대상이 아니다 (참조세기 알고리즘)

따라서 2012년 기준으로 모든 최신 브라우저들은 가비지 콜렉션에서 Mark and Sweep 알고리즘을 사용한다.

JS에서는 전역변수를 roots 로 두고, 거기서부터 시작해서 닿을 수 없는 오브젝트를 가비지로 수집한다.

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

18. Memory Leaks

메모리 누수의 가장 큰 요인 세가지

1. Global Variables

2. Event listener

3. setInterval()

hypothetically 가정하여

19. Single Threaded

it has only one call stack

우리는 함수를 병렬적으로 실행할 수 없고
새로운 함수를 실행(call stack에 push)할 때마다
call stack이 점점 커질것

mimic 모방하다, 흉내내다

hence 1.이런 이유로

meanwhile (다른 일이 일어나고 있는) 그 동안에, 한편

21. Javascript Runtime

Issue With Single Thread 을 해결하려면?

web API는 브라우저로부터 제공됨
window 객체안에 이뜸 ex) setTimeout, setInterval, fetch…

얘네는 백그라운드에서 비동기로 실행됨

underneath the hood, 브라우저들은 C++ 과 같은 로우레벨언어를 이용해서 이런 작업을 수행한다

얘네들은 JS의 영역이 아닌 Web API의 영역에서 있는거임

callback queue / event loop

요건 잘알쥐

event loop: hey! callstak! are you empty????? are you empty????? are you empty?????

22. Node.js

JS file === Music Notes

JS Engine === Musician or Composer : 악보를 읽고 이해할 수 있음

JS Runtime === the whole package where we have the musician but we also give that musician besides the musical notes.
음악을 연주하기 위한 모든 도구들

긍까 Node.js 는 JS Runtime 입니다!!!!!!!

Node.js 의 정의!

Node.js is a JavaScript runtime built on Chrome V8 JavaScript engine.

web API, Callback Queue, Event Loop 같은건 원래 브라우저에서만 쓸 수 있었는데
브라우저 밖에서도 JS를 돌릴수 있게 만든 C++프로그램

브라우저가 우리 컴퓨터에 접근할 수 있는건 한정적이다
file system 같은거 접근 모탐

sandbox enviroment

그치만 node.js 는 백그라운드에서 더 많은걸 할수있음!

node 환경에서는 window 가 아니라 global 에서 API를 찾을 수 이뜸

capability (capabilities) 1.능력, 역량

 

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts