찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 작동 방식을 이해하도록 안내합니다.

JavaScript 작동 방식을 이해하도록 안내합니다.

WBOY
WBOY앞으로
2022-08-31 17:40:311837검색

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript의 작동 원리를 소개합니다. 이 글은 이를 매우 자세하게 소개하므로 필요한 모든 사람의 학습이나 업무에 참고할 수 있습니다. 그것.

JavaScript 작동 방식을 이해하도록 안내합니다.

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

JavaScript가 실행되는 방식과 작동 메커니즘을 이해하려면 우선 브라우저의 핵심을 이해해야 합니다.

브라우저 커널

이에 대해 아는 사람은 누구나 알고 있습니다. 다양한 브라우저는 다양한 커널로 구성되어 있으므로 어떤 커널이 있고 일반적으로 사용되는 브라우저에서 어떤 커널을 사용하는지:

  • Gecko: Netscape 및 Mozilla Firefox 브라우저에서 초기 탐색
  • Trident: Microsoft에서 개발하고 IE4~IE11 브라우저에서 사용하지만 Edge 브라우저는 Blink로 전환되었습니다.
  • Webkit: KHTML, 오픈 소스를 기반으로 Apple에서 개발하고 Safari에서 사용했으며 이전에는 Google Chrome도 사용했습니다. : Google에서 개발한 Webkit의 한 가지로 현재 Google Chrome, Edge, Opera 등에서 사용됩니다.
  • 소위 브라우저 커널은 브라우저의 레이아웃 엔진, 즉 브라우저 엔진을 말합니다. 엔진의 작업 실행 과정은 다음과 같습니다.

JavaScript 작동 방식을 이해하도록 안내합니다.그런데 이 실행 과정에서 HTML 파싱 중에 JavaScript 태그를 발견하게 됩니다. 어떻게 해야 할까요?

HTML 구문 분석을 중지하고 JavaScript 코드를 로드 및 실행합니다.


물론 여기서 중지하는 대신 JavaScript 코드를 비동기적으로 로드하고 실행하는 것은 어떨까요?

그래서 브라우저는 새로운 DOM 트리를 자주 생성하는 대신 HTML로 구문 분석된 DOM과 JavaScript 작업 후 DOM을 함께 넣어 최종 DOM 트리를 생성하기를 원합니다.

그렇다면 누가 JavaScript 코드를 실행할 것인가?

답변: JavaScript 엔진


JavaScript 엔진

왜 JavaScript 엔진이 필요한가요?

실제로 우리가 작성한 JavaScript가 실행을 위해 브라우저나 노드에 전달되든 결국 CPU에 의해 실행되어야 합니다.
  • 그러나 CPU는 실제로 기계어인 자체 명령어 세트만 알고 있습니다. , CPU에 의해 실행되기 위해서는 ;
  • 따라서 JavaScript 코드를 실행을 위한 CPU 명령으로 변환하는 데 도움이 되는 JavaScript 엔진이 필요합니다.
  • 일반적인 JavaScript 엔진은 무엇입니까?

SpiderMonkey: Brendan Eich(JavaScript 작성자이기도 함)가 개발한 최초의 JavaScript 엔진
  • Chakra: Microsoft에서 개발, IE 브라우저에서 사용
  • JavaScriptCore: Apple에서 개발한 WebKit의 JavaScript 엔진; V8: Google에서 개발한 강력한 JavaScript 엔진은 Chrome이 여러 브라우저 중에서 돋보이도록 도와줍니다. (V8은 강력한 JavaScript 엔진입니다.)
  • V8 엔진
V8은 C++ 및 WebAssembly 엔진으로 작성된 Google의 오픈 소스 고성능 JavaScript입니다. , 특히 Chrome 및 Node.js에서 사용됩니다.

ECMAScript 및 WebAssembly를 구현하고 x64, IA-32, ARM 또는 MIPS 프로세서를 사용하는 Windows 7 이상, macOS 10.12+ 및 Linux 시스템에서 실행됩니다.
  • V8은 독립형으로 실행되거나 모든 C++ 애플리케이션에 내장될 수 있습니다.
  • JavaScript 코드를 실행하는 V8 엔진의 원리:
  • Parse 모듈은 JavaScript 코드를 AST(추상 구문 트리)로 변환합니다. 이는 인터프리터가 JavaScript 코드를 직접 이해하지 못하기 때문입니다.

함수가 호출되지 않으면; , 그러면 AST로 변환되지 않습니다.

Parse의 V8 공식 문서: https://v8.dev/blog/scanner
  • Ignition은 AST를 ByteCode(바이트코드)로 변환하는 인터프리터입니다
동시에 시간이 지나면 TurboFan 최적화에 필요한 정보(예: 함수 매개변수의 유형 정보, 해당 유형으로만 실제 작업을 수행할 수 있음)를 수집합니다.

함수가 한 번만 호출되면 Ignition이 ByteCode를 해석하고 실행합니다.
    V8 공식 Ignition Documentation: https://v8.dev/blog/ignition-interpreter
  • TurboFan은 바이트코드를 CPU가 직접 실행할 수 있는 기계어 코드로 컴파일할 수 있는 컴파일러입니다.
  • 함수가 다중으로 호출되는 경우; 그런 다음 핫 함수로 표시되고 TurboFan을 통해 최적화된 기계어 코드로 변환되어 코드의 실행 성능이 향상됩니다.

그러나 기계어 코드는 실제로 ByteCode로 복원됩니다. 이후에 함수가 실행되는 과정에서 타입이 변경되었습니다. (예를 들어 sum 함수는 원래 숫자 타입으로 실행되었으나 나중에 문자열 타입으로 실행되었습니다.) 이전에 최적화된 기계어 코드는 연산을 제대로 처리하지 못하여 다음과 같이 변환됩니다.

위 내용은 JavaScript 작동 방식을 이해하도록 안내합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript node.js firefox chrome safari ecmascript html webkit edge String JS number dom 异步 windows macos https linux
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：MemFire ​​Cloud를 사용하여 Angular 애플리케이션을 구축하는 방법에 대해 이야기해 보겠습니다.다음 기사：MemFire ​​Cloud를 사용하여 Angular 애플리케이션을 구축하는 방법에 대해 이야기해 보겠습니다.

관련 기사

더보기