단일 스레드 JS 및 다중 스레드 브라우저 사용

이번에는 싱글 스레드 JS와 멀티 스레드 브라우저 사용에 대해 알려드리겠습니다. 싱글 스레드 JS와 멀티 스레드 브라우저를 사용할 때 주의사항은 무엇인가요?

JS 언어는 단일 스레드입니다. 브라우저는 작업(함수)을 실행하기 위해 하나의 메인 스레드만 js에 할당하지만, 한 번에 하나의 작업만 실행할 수 있으며 이러한 작업은 작업 대기열을 형성하고 실행을 위해 대기합니다.

브라우저는 멀티스레드입니다.

네트워크 요청, 타이머 및 이벤트 모니터링과 같은 일부 프런트엔드 작업은 다른 작업처럼 대기열에 추가되어 실행을 기다리는 경우 실행 효율성이 떨어집니다. 매우 낮아서 페이지가 정지될 수도 있습니다. 따라서 브라우저는 다음 스레드를 가질 수 있는 Webkit 또는 Gecko 엔진과 같은 다중 스레드입니다.

javascript엔진 스레드

http 요청 스레드

인터페이스 렌더링 스레드

브라우저 이벤트 트리거 스레드

JS 단일 스레드 그리고 Ajax는 비동기적입니다

JS가 단일 스레드에서 실행된다고 하는데 연결 후 XMLHttpRequest가 비동기적인 이유는 무엇입니까? 이는 브라우저에서 새 스레드를 열도록 요청합니다. 요청된 상태가 변경될 때, 이전에 콜백이 설정된 경우 비동기 스레드는 상태 변경 이벤트를 생성하고 이를 JavaScript 엔진의 이벤트 처리 대기열에 넣어 처리를 기다립니다. 대기열 제거 작업은 브라우저가 유휴 상태일 때 처리되며 JavaScript 엔진은 항상 단일 스레드 콜백 함수를 실행합니다. JavaScript 엔진은 실제로 일반 함수와 콜백 함수로 구성된 대기열로 이해될 수 있는 단일 스레드 작업 대기열입니다.
즉, Ajax 요청은 실제로 비동기식입니다. 이는 이벤트가 다시 호출되면 처리를 기다리기 위해 이벤트 루프 단일 스레드 이벤트 대기열에 배치됩니다.

JS 이벤트 루프 메커니즘(이벤트 루프)

Javascript에는 기본 스레드 기본 프로세스와 호출 스택(호출 스택)이 있습니다. 호출 스택에서 작업을 처리할 때 다른 모든 것은 기다려야 합니다. 실행 중에 setTimeout과 같은 일부 비동기 작업이 발생하면 처리를 위해 브라우저의 다른 모듈(예: webkit, webcore 모듈)로 전달됩니다. (콜백 함수)가 작업 대기열에 배치됩니다. 일반적으로 다양한 비동기 작업의 콜백 함수는 서로 다른 작업 대기열에 배치됩니다. 호출 스택의 모든 작업이 실행된 후 작업 대기열에 있는 작업(콜백 함수)을 실행합니다.

위 그림에서 DOM 작업, ajax 요청, setTimeout 및 기타 WebAPI가 호출 스택에서 발견되면 처리를 위해 브라우저 커널의 다른 모듈로 전달됩니다. 웹킷 커널에는 Javasctipt 외에 중요한 모듈이 있습니다. 실행 엔진입니다. 그림에서 WebAPI가 언급한 세 가지 API의 경우 webcore는 기본 구현을 처리하기 위해 각각 DOM 바인딩, 네트워크 및 타이머 모듈을 제공합니다. 이러한 모듈이 이러한 작업 처리를 마치면 콜백 함수를 작업 대기열에 넣은 다음 작업 대기열에서 콜백 함수를 실행하기 전에 스택의 작업이 실행될 때까지 기다립니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js의 유형 변환에 관한 몇 가지 사소한 문제

JS의 암시적 유형 변환

위 내용은 단일 스레드 JS 및 다중 스레드 브라우저 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!