자바스크립트 실행 메커니즘에 대한 간략한 논의

js는 단일 스레드인데 왜 비동기 작업을 수행할 수 있나요?

이것은 브라우저(js의 호스트 환경)가 어떤 방식으로든 js에 비동기 속성을 갖도록 만든다는 사실로 귀결됩니다.

프로세스와 스레드 구별:

프로세스: 실행 중인 애플리케이션. 각 프로세스는 자신만의 독립적인 메모리 공간을 가지고 있습니다. 예를 들어 열려 있는 브라우저는 프로세스입니다.

스레드: 독립적인 프로세스의 하위 집합입니다. 스레드는 공유 메모리 공간에서 실행됩니다.

브라우저는 다중 프로세스입니다. 아래와 같이

그리고 페이지가 열릴 때마다 독립적인 프로세스가 생성됩니다. 프로세스에는 자체 멀티스레딩이 있습니다. 브라우저가 단일 프로세스인 경우 특정 페이지가 충돌하면 전체 브라우저에 영향을 미칩니다.

브라우저에는 어떤 프로세스가 있나요?

1. 브라우저: 브라우저의 주요 프로세스는 단 하나뿐입니다(조정 및 제어 담당). 해당 기능은 다음과 같습니다.

•브라우저 인터페이스 표시를 담당합니다. 및 사용자 상호 작용. 정방향, 역방향 등

　• 각 페이지 관리, 다른 프로세스 생성 및 소멸을 담당

　• 렌더러 프로세스에서 얻은 메모리에 있는 비트맵을 사용자 인터페이스에 그리기

　• 네트워크 리소스 관리, 다운로드 대기

2. 타사 플러그인 프로세스: 각 플러그인 유형은 이 플러그인을 사용할 때만 생성되는 프로세스에 해당합니다.

3 GPU 프로세스: 최대 1개, 3D 드로잉에 사용됩니다. , etc.

4. 브라우저 렌더링 프로세스(브라우저 커널) (렌더러, 내부 멀티스레드 ) 기본적으로 각 탭 페이지에는 하나의 프로세스가 있으며 서로 영향을 미치지 않습니다. 주요 기능: 페이지 렌더링, 스크립트 실행, 이벤트 처리 등

브라우저 렌더링 프로세스에 포함된 스레드(브라우저 커널):

1. GUI 렌더링 스레드

• 브라우저 인터페이스 렌더링 및 구문 분석을 담당합니다. HTML, CSS, DOM 트리 및 RenderObject 트리 구축, 레이아웃 및 그리기 등

• 인터페이스를 다시 그려야 하거나(다시 그리기) 일부 작업으로 인해 리플로우가 발생하는 경우 이 스레드가 실행됩니다.

• GUI 렌더링 스레드와 JS 엔진 스레드는 JS가 상호 배타적이라는 점에 유의하세요. 엔진 GUI 스레드는 실행 중에 일시 중지되고(동결되는 것과 동일) GUI 업데이트는 대기열에 저장되어 JS 엔진이 유휴 상태일 때 즉시 실행됩니다.

2. JS 엔진 스레드(

"JavaScript 엔진"은 일반적으로 가상 머신이라고 합니다. JS 커널이라고도 하며 Javascript 스크립트 처리를 담당합니다. (예: V8 엔진)

• JS 엔진 스레드가 담당합니다. Javascript 스크립트를 구문 분석하려면 코드를 실행하세요.

• JS 엔진은 작업 대기열에 작업이 도착하기를 기다리고 있으며 탭 페이지(렌더러 프로세스)에는 JS 프로그램을 실행하는 JS 스레드가 하나만 있습니다. ) 언제든지

• 또한 GUI 렌더링 스레드와 JS 엔진 스레드는 상호 배타적이므로 JS 실행 시간이 너무 길면 페이지 렌더링이 일관성이 없어 페이지 렌더링 및 로딩이 발생합니다.

3. 이벤트 트리거 스레드

• JS 엔진 대신 이벤트 루프를 제어하는 ​​데 사용됩니다. (JS 엔진 자체가 너무 바빠서 브라우저가 필요하다는 것은 이해할 수 있습니다. 지원을 위해 다른 스레드를 엽니다.

• JS 엔진이 setTimeOut과 같은 코드 블록을 실행할 때(브라우저 커널에서 올 수도 있음) 마우스 클릭, AJAX 비동기 요청 등과 같은 다른 스레드가 해당 작업을 추가합니다. 이벤트 스레드에

• 해당 이벤트가 트리거 조건을 충족하고 트리거되면 스레드는 처리할 대기열 끝에 이벤트를 추가하여 JS 엔진의 처리를 기다리는 중입니다

• 주의하세요. JS의 단일 스레드 관계에서는 보류 중인 대기열의 이벤트가 JS 엔진의 처리를 위해 대기열에 추가되어야 합니다(JS 엔진이 유휴 상태일 때 실행됨)

4. 타이밍이 Thread를 트리거합니다

• 전설적인 setInterval이 있는 스레드 및 setTimeout이 위치합니다

• 브라우저 타이밍 카운터는 JavaScript 엔진에 의해 계산되지 않습니다(JavaScript 엔진은 단일 스레드이므로 차단된 스레드 상태에 있으면 계산의 정확성에 영향을 미칩니다)

• 따라서, 별도의 스레드가 타이밍을 측정하고 트리거하는 데 사용됩니다(타이밍이 완료된 후 이벤트 큐에 추가되고 실행 전에 JS 엔진이 유휴 상태가 될 때까지 기다립니다)

• W3C는 HTML 표준에서 setTimeout 시간은 4ms 미만입니다.

5. 비동기 http 요청 스레드

• XMLHttpRequest가 연결된 후 브라우저를 통해 새 스레드 요청이 열립니다.

• 상태 변경이 감지되면 콜백 함수가 설정된 경우 비동기 스레드가 상태 변경 이벤트를 생성하고 콜백을 이벤트 큐에 넣습니다. 그런 다음 JavaScript 엔진에 의해 실행됩니다.

GUI 렌더링 스레드와 JS 엔진 스레드는 상호 배타적입니다.

JavaScript는 DOM을 조작할 수 있으므로 이러한 요소의 속성을 수정하고 동시에 인터페이스를 렌더링하면(즉, JS 스레드와 UI 스레드가 동시에 실행됨), 렌더링 스레드 전후에 얻은 요소 데이터가 일치하지 않을 수 있습니다. 따라서 예상치 못한 렌더링 결과를 방지하기 위해 브라우저에서는 GUI 렌더링 스레드와 JS 엔진이 상호 배타적인 관계를 갖도록 설정합니다. JS 엔진이 실행되면 GUI 스레드가 일시 중지되고 GUI 업데이트가 다음 폴더에 저장됩니다. JS 엔진까지 큐 스레드가 유휴 상태일 때 즉시 실행됩니다.

js 실행 메커니즘: js는 단일 스레드입니다. 함수가 실행될 때마다 함수가 스택에 푸시됩니다. 그러나 비동기 작업이 있는 경우 처리 후 브라우저 스레드(webAPI)가 처리하도록 합니다. 스레드(실행 스택)가 실행을 완료하면 작업 큐에 작업이 있으면 실행됩니다.

​

이것이 다음 코드가 b를 먼저 출력한 다음 a를 출력하는 이유입니다. settimeout 함수는 작업 대기열에 배치되고 console.log('b')는 기본 스레드입니다.

setTimeout(() => {
   console.log('a');
}, 0);
console.log('b');

이 기사는 js tutorial 칼럼에서 가져온 것입니다. 배우신 것을 환영합니다!

위 내용은 자바스크립트 실행 메커니즘에 대한 간략한 논의의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!