이 시리즈는 무엇에 관한 것입니까?

당신이 일상적인 업무에서 사용하는 물건이나 도구를 이해하는 것은 효과적으로 일을 하는 데 매우 중요한 부분이다.JavaScript는 프런트엔드 엔지니어로서 거의 매일 사용하는 도구입니다.따라서 보다 효과적인 작업을 수행하려면 JavaScript의 내부 구조를 이해하는 것이 중요합니다.
이 점을 감안하여 저는 자바스크립트 내부 구성 요소를 만들어서 매우 기쁩니다. 일련의 글로 V8 엔진의 내부 작업 원리와 컴파일러가 친밀하고 성능이 좋은 코드를 어떻게 만드는지 소개하겠습니다.

직위4: 점화와 터빈 엔진

먼저 물어볼게요. 마지막으로 자바스크립트 프로그램에서 일부러 검사한 변수를 입력한 것은 언제입니까?또는 마지막으로 JavaScript 객체에 키를 추가하거나 제거할 때 고려할 때가 언제입니까?우리 대다수의 사람들은 모두 기억하지 못한다. 그렇지?이는 JavaScript가 우리에게 언어에서 거의 모든 일을 할 수 있는 자유를 주었기 때문이다.이런 자유의 몇 가지 이상한 예는 다음과 같다.

함수에 매개 변수 전달

모든 기이한 값의 조합이 같은지 검사

동일한 운행 시

에 단일 변수에 서로 다른 유형의 값을 분배한다

더 많아...
이 명세서는 아직 많이 있다.나는 우리 모두가 이런 자유를 이용하기 위해 많은 다른 용도를 생각해 낼 수 있을 것이라고 믿는다.한 가지 밝힐 게 있습니다.이 세상에 공짜는 없다.우리의 예에서 그것은 성능이 좋지 않은 문제를 가져올 것이다.
JavaScript 엔진이 이 문제를 어떻게 처리하는지 깊이 연구하기 전에 왜 이것이 성능 저하를 초래하는지 알아보자.따라서, 우리 모두가 알고 있는 바와 같이, 모든 코드는 반드시 바이트 코드로 변환해야만 실행할 수 있다.따라서 정적 형식 언어(예를 들어 C++)의 코드가 컴파일되었을 때 컴파일러는 사용하는 변수의 유형을 알고 있기 때문에 크기, 메모리 위치 등을 기이하게 최적화할 수 있다.엔진은 변수에 어떤 값을 삽입할지 모르기 때문에 변수나 함수를 바탕으로 최적화할 수 없습니다.이 프레젠테이션은 다음 코드에서 확인할 수 있습니다.

var obj = {
    x: 20
};

console.log("Adding 1 to x ");
obj.x += 1;
console.log("Incremented value of x", obj.x);

obj.x = "Hello";
console.log("Appending 'World' to x");
obj.x += "World";
console.log("New value of x", obj.x);

보시다시피 JavaScript의 자유 때문에 실행할 때 x의 유형을 변경할 수 있습니다.따라서 JavaScript는 항상 obj.x에 어떤 종류의 값이 저장되어 있는지 검사해야 모든 종류의 작업을 수행할 수 있습니다.이로 인해 성능이 저하될 수 있습니다.이 문제를 극복하기 위해 V8은 Ignition이라는 새로운 해석기와 터보팬이라는 최적화 컴파일러를 내놓았다.그것들이 무엇을 했는지, 그리고 코드가 더 빨리 실행될 수 있도록 어떻게 도와주는지 봅시다.

점화란?

Ignition은 코드를 설명하고 실행을 시작하는 데 사용되는 JavaScript의 설명자입니다.각 JavaScript 코드는 다음 절차를 거쳐야 브라우저나 시스템에서 실제로 실행됩니다.

JavaScript 코드가 파서에 제공됩니다.

해석기가 코드를 해석하고 추상적인 문법 트리(AST)를 만듭니다.

이AST는 점화 스위치에 전송되어 바이트 코드를 생성한다.

이 바이트 코드가 기계에 입력되어 우리의 코드가 실행되기 시작했다.

AST나 해석기 같은 용어가 지금 당신에게 낯설다면 걱정하지 마세요.우리는 다른 게시물에서 그것들을 소개할 것이다.우리는 지금 점화 번역에만 흥미를 느낀다.따라서 바이트 코드가 실제 기계에서 운행할 때 점화 스위치는 운행 코드와 관련된 데이터를 보존한다.이 데이터들은 코드에 대한 다양한 도량을 포함하는 여러 가지 형식이 있다.그 중의 한 지표는 열함수다.열 함수는 코드에서 여러 번 사용하는 함수다.열 함수의 간단한 예는 한 값을 페이지에 표시하기 위해 계산을 실행하는 것이다.이 값을 변경할 때마다 계산 기능을 반복하고 페이지도 계속 업데이트됩니다.점화 스위치는 전달된 매개 변수, 매개 변수 유형, 되돌아오는 매개 변수와 그 유형 등 이 함수와 관련된 데이터를 수집할 것이다.

터빈 엔진이 어떻게 화면에 들어가는지

코드의 열 기능을 식별한 후 점화하면 데이터를 터빈 엔진에 전송하여 최적화시킨다.TurboFan은 이 코드를 받아들여 점화에서 나온 가설 데이터를 가지고 있기 때문에 신기한 최적화를 실행하기 시작할 것이다.그리고 이 새로운 최적화 바이트 코드로 원래의 바이트 코드를 바꿀 것입니다. 이 과정은 우리의 프로그램 생명 주기에 끊임없이 반복될 것입니다.
이 점을 더욱 잘 이해하기 위해 이 과정을 예를 들어 소개하자.다음 코드를 고려하십시오.

function add(x, y) {
    return x + y;
}

add(1, 2);
add(12, 42);
add(17, 25);
add(451, 342);
add(8, 45);

이 코드가 바이트 코드로 변환되어 실행될 때 점화는 다음과 같은 긴 추가 프로세스를 수행합니다.

바쁘시죠??현재 Ignition은 정형 매개 변수를 여러 번 사용하여 이 함수를 호출할 때 이를 열함수로 분류하여 수집한 정보와 함께 터빈 엔진에 보냅니다.TurboFan은 정수에 맞게 이 함수를 최적화하여 바이트 코드를 생성하고 원래 바이트 코드로 바꿉니다.현재, 현재 add(21, 45) 함수를 호출할 때, 모든 긴 절차가 생략되고, 결과는 더욱 빨리 얻을 수 있다.

예비 메커니즘

근데 잠깐만.만약 우리가 문자열 매개 변수로dd 함수를 호출한다면?이러한 상황을 처리하기 위해 터보팬은 전달된 매개 변수의 유형을 검사합니다.만약 유형이 숫자와 다르다면, 그것은 불을 붙일 때 생성된 원시 바이트 코드로 돌아가서, 이 긴 과정을 다시 따를 것이다.이 과정은 최적화라고 불린다.이 새로운 정보도 수집될 것입니다. 문자열 파라미터가 있는dd 함수를 여러 번 호출하면 Ignition은 이를 열함수로 간주하고 수집된 관련 정보와 함께 터보팬에 보냅니다.터빈 엔진은 문자열 매개 변수를 위해dd함수를 최적화하고 다음에dd함수를 호출할 때 최적화된 바이트코드를 운행하여 성능을 향상시킨다.

결론

이것이 바로 코드 성능을 향상시키기 위해 JavaScript 변수를 정적 유형의 변수로 보는 것을 권장하는 이유입니다.이것은 기본 유형뿐만 아니라 대상에도 적용된다.유지 보수 대상의 유형을 더욱 깊이 있게 이해하려면 본 시리즈의 앞글을 읽어 주십시오.현재 모델 검사 외에도 점화와 터빈 엔진이 많다.만약 네가 이 문장에 흥미가 있다면, 반드시 강연자가 이 문장의 참고 자료를 상세하게 소개하는 것을 보아야 한다.그 전에 즐겁게 코딩하세요!!

도구책

프란치스카 싱클만: 자바스크립트 엔진--어떻게 이루어졌는지

자바스크립트 엔진과 인기 함수: 초보자 탐색: https://medium.com/@harumhelmy/the-javascript-engine-and-hot-functions-a-beginners-exploration-part-2-f4e351631229