집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트 코드 이해 및 최적화

자바스크립트 코드 이해 및 최적화

尚앞으로: 2020-03-05 16:07:162697검색

프론트엔드 엔지니어로서 누구나 JavaScript에 익숙합니다. 이 기사에서는 Javascript가 JS 엔진이라는 더 깊은 방향에서 실행되어 최적화되는 방식을 이해합니다.

자바스크립트 코드 이해 및 최적화

JS 엔진——JS 엔진 소개

1. 기본 소개

js 엔진은 자바스크립트 실행에 특화된 인터프리터(interpreter)입니다. 현재 주류 js 엔진과 소개를 간략하게 살펴볼 수 있습니다.

V8 — V8 엔진은 C++를 사용하여 Google에서 오픈 소스로 제공되며 우리가 자주 듣는 엔진이기도 합니다.
Rhino — 전적으로 다음에서 사용됩니다. Mozilla 재단의 Java
SpiderMonkey가 관리하는 오픈 소스 엔진 - 한때 Netscape Navigator 브라우저에서 실행되었던 1세대 js 엔진, 현재는 Firefox Harri Porten이 개발
Chakra(JScript9) — Internet Explorer 엔진
Chakra(JavaScript) — Microsoft Edge 엔진
JerryScript — 주로 IOT에 사용되는 경량 js 엔진
2. V8 엔진 실행 프로세스

us 보시다시피 JS 엔진의 처리 과정은 다음과 같습니다. 먼저 이를 구문 분석하고 AST 구문 트리로 변환한 다음 인터프리터는 주로 두 가지 작업을 수행합니다. 첫 번째는 이를 기계어 바이트코드로 변환하는 것이고, 두 번째는 이를 편집기(최적화 컴파일러)에 넘겨주는 것입니다. 또한 데이터 분석 프로세스(데이터 프로파일링)의 주요 목적은 JS의 작동을 최적화한 다음 최적화된 코드를 기계어로 변환하는 것입니다.

V8의 핵심 구성 요소는 각각 Ignition과 TurboFan입니다

자바스크립트 코드 이해 및 최적화

JS Code—— Talk is cheap

이것을 보면 분명히 '이게 무슨 용도인지 알겠다'라고 생각하게 될 것입니다. Talk는 싸다. 분석할 수 있는 코드가 있나요? 그럼 다음 샘플 코드를 봐주시고, 코드를 분석한 후 원리를 자세히 소개하겠습니다

자바스크립트 코드 이해 및 최적화 샘플 코드 1:

// first case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 0; i < 9999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// second case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 10000000; i < 19999999; i++) {
    b[i] = 0
}
console.timeEnd()
 
// third case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
    a[k] = 0
}
 
for (let i = 9999999; i < 0; i--) {
    b[i] = 0
}
console.timeEnd()

위 코드를 읽고 나면 내용은 매우 간단합니다. 객체 a와 b만 정의하면 됩니다. 유일한 차이점은 첫 번째 경우에는 a와 b가 동일한 속성을 반복적으로 추가하고, 두 번째 경우에는 a와 b가 다른 속성을 추가하며, 세 번째 경우에는 a와 b가 반복적으로 추가된다는 것입니다. 동일한 속성이지만 b는 역순으로 처리됩니다. 그럼 질문은: 세 가지 코드의 실행 속도에 차이가 있고, 그 차이가 큰가요? (주기 수는 확인할 필요가 없습니다. 모두 동일합니다!)

답은 다음과 같습니다. 소요 시간은 약 3(500ms)

V8 엔진 - 숨겨진 클래스

우리는 js가 동적 스크립팅 언어라는 것을 알고 있습니다. 이것이 의미하는 바는 무엇입니까? 대부분의 js 인터프리터(인터프리터)는 객체에 속성을 쉽게 추가/제거할 수 있습니다. 변수 속성 값의 주소를 메모리에 저장하는 사전 구조입니다. 이 방법은 Java 및 C#보다 훨씬 덜 효율적입니다. (물론 비동적 언어인 C#의 동적 유형은 다른 문제이므로 다루지 않겠습니다.) 원래 js의 타입은 언제든지 변환이 가능하기 때문에, 원래 판단을 위해 고정된 타입과 결합된 사전 구조를 사용하면 변수 속성 값의 위치를 쉽게 찾을 수 있지만 이를 달성하기 어렵습니다. js에서.

그래서 V8 엔진은 Hidden Class라는 매우 효율적인 방법을 사용합니다. 다른 엔진에도 Map, Structures, Hidden Class 등을 포함한 유사한 방법이 있습니다. 여기서는 모든 사람이 더 쉽게 이해할 수 있도록 Shape를 사용하여 정의합니다.

객체를 정의하면 다음 내용이 포함됩니다.

각 속성의 의미는 위 표에서 확인할 수 있습니다.

그런 다음 Shape와 결합하여 객체를 정의할 때 JS 엔진은 Shape(연속 캐시 버퍼로 이해될 수 있음)를 생성하고 해당 위치 0과 1은 아래와 같이 x 및 y 값을 저장합니다. 자바스크립트 코드 이해 및 최적화