>웹 프론트엔드 >JS 튜토리얼 >브라우저 프로세스 및 스레드 소개

브라우저 프로세스 및 스레드 소개

不言
不言앞으로
2018-11-17 16:29:361918검색

이 글은 브라우저 프로세스와 스레드에 대한 소개를 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Process

프로세스는 CPU에 대한 리소스 할당의 가장 작은 단위입니다.

멀티 프로세스: 다중 프로세스는 두 개 이상의 프로세스가 동일한 컴퓨터 시스템에서 동시에 실행될 수 있는지를 의미합니다. 여러 프로세스의 이점은 분명합니다. 예를 들어, 음악을 들으면서 편집기를 열고 코드를 입력할 수 있으며, 편집기와 음악 듣기 소프트웨어의 프로세스는 전혀 서로 간섭하지 않습니다.

브라우저 프로세스에는 주로 다음 유형이 포함됩니다.

  1. Browser 프로세스 : 브라우저의 주요 프로세스(조정 및 제어를 담당)

  2. 타사 플러그인 프로세스: 각 플러그인 유형은 하나의 프로세스에 해당하며, 해당 플러그인을 사용할 때에만 생성됨

  3. GPU 프로세스: 최대 1개, 3D 드로잉에 사용됨

  4. #🎜🎜 #

    브라우저 렌더링 프로세스(커널) : 기본적으로 각 탭 페이지마다 하나의 프로세스가 있으며, 이는 서로 영향을 미치지 않습니다. 페이지 렌더링, 스크립트 실행, 이벤트 처리 등을 제어합니다. 여러 개의 빈 탭이 하나의 프로세스로 병합되는 등 최적화됩니다.) # 🎜🎜#

  5. 웹을 탐색할 때 여러 개의 새 페이지가 동시에 열리므로 필요합니다. 여러 개의 탐색 창 열기. 그러나 12개 이상의 창을 열면 전체 컴퓨터가 점점 더 복잡해집니다.

다중 프로세스 브라우저의 장점

전체 브라우저에 영향을 미치는 페이지 렌더링 방지

3번째 브라우저의 영향 방지 -party 플러그인 전체 브라우저

다중 프로세스가 멀티 코어의 장점을 최대한 활용합니다

샌드박스 모델을 사용하여 플러그인과 브라우저 안정성을 향상시키기 위한 다른 프로세스

Popular 즉, 사용자가 여러 창을 열 경우 창 중 하나가 충돌하더라도 전체 브라우저에 영향을 미치지 않으며 다른 인터페이스는 계속 정상적으로 실행됩니다 🎜. #

프로세스는 하나 이상의 스레드로 구성되며, 스레드는 프로세스의 다양한 코드 실행 경로입니다. 프로세스는 서로 독립적이지만 동일한 프로세스의 스레드는 프로그램의 메모리 공간(코드 세그먼트, 데이터 세트, 힙 등 포함)과 일부 프로세스 수준 리소스(예: 열린 파일 및 신호)를 공유합니다.

    브라우저의 렌더링 프로세스(브라우저 커널)는 주로 다음 범주에서 다중 스레드로 이루어집니다.
  • #🎜🎜 #

  • GUI 스레드
  • Javascript 엔진 스레드

이벤트 트리거 스레드# 🎜🎜#

  1. 타이머 스레드

  2. 네트워크 요청 스레드

    #🎜 🎜##🎜 🎜#
  3. GUI 스레드
  4. 는 인터페이스를 다시 그려야 하거나(다시 그리기) 일부 문제로 인해 리플로우가 트리거되는 경우 브라우저 인터페이스의 HTML 요소를 렌더링하는 일을 담당합니다. 작업이 수행되면 스레드가 실행됩니다. Javascript 엔진이 스크립트를 실행하는 동안 GUI 렌더링 스레드는 정지 상태, 즉 "동결" 상태입니다.
  5. Javascript 처리를 주로 담당하는 JS 커널이라고도 할 수 있습니다. V8 엔진과 같은 스크립트 프로그램. 물론 Javascript 엔진 스레드는 Javascript 스크립트를 구문 분석하고 코드를 실행하는 역할을 담당합니다.
  6. Javascript는 단일 스레드입니다
  7. 이것은 스크립팅 언어인 Javascript 탄생의 사명 때문입니다. JavaScript는 페이지 상호 작용에서 사용자의 작업 DOM 트리 및 CSS 스타일 트리를 운영하여 사용자에게 동적이고 풍부한 대화형 경험과 서버 로직의 대화형 처리를 제공합니다. JavaScript가 이러한 UI를 작동하는 다중 스레드 방식인 경우 DOM, UI 작업에서 충돌이 발생할 수 있습니다. Javascript가 멀티스레드인 경우 멀티스레드 상호작용에서 UI의 DOM 노드가 중요한 리소스가 될 수 있습니다. DOM을 동시에 운영하는 두 개의 스레드(하나는 수정을 담당하고 다른 하나는 삭제 및 탐색을 담당)가 있다고 가정해 보겠습니다. 이때 프로세서는 어떤 스레드의 실행 결과를 적용할지 결정합니다. 물론 잠금을 통해 위의 문제를 해결할 수 있습니다. 그러나 잠금 도입으로 인한 더 큰 복잡성을 피하기 위해 Javascript는 처음부터 단일 스레드 실행을 선택했습니다.

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

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

JS 페이지 로딩 차단

GUI 렌더링 스레드와 JavaScript 실행 스레드는 상호 배타적이므로 브라우저가 JavaScript 프로그램을 실행할 때 이때 GUI 렌더링 스레드는 큐에 저장되며 JS 프로그램이 완료될 때까지 실행되지 않습니다. 따라서 JS의 실행 시간이 너무 길면 페이지 렌더링이 일관되지 않아 페이지 렌더링 및 로딩이 차단되는 느낌을 받게 됩니다.

타이밍 트리거 스레드

JavaScript 엔진은 단일 스레드이므로 브라우저 타이밍 카운터는 계산되지 않습니다. 따라서 차단된 스레드 상태에 있으면 타이밍의 정확성에 영향을 미치게 됩니다. 시간을 지정하고 별도의 스레드 계획을 통해 타이밍을 트리거합니다.

이벤트 트리거 스레드

이벤트가 트리거되면 스레드는 보류 중인 대기열의 끝에 이벤트를 추가하고 JS 엔진 처리. 이러한 이벤트는 예약된 작업과 같이 현재 실행되는 코드 블록이나 마우스 클릭, AJAX 비동기 요청 등과 같은 브라우저 커널의 다른 스레드에서 발생할 수 있습니다. 그러나 JS의 단일 스레드 관계로 인해 이러한 모든 이벤트에는 대기열에 추가되어 JS 엔진의 처리를 기다립니다.

Asynchronous http request thread

XMLHttpRequest가 연결된 후 브라우저를 통해 새로운 스레드 요청이 열립니다. 콜백 함수가 설정된 경우 비동기 스레드는 상태 변경 이벤트를 생성하고 이를 JavaScript 엔진의 처리 대기열에 넣어 처리를 기다립니다.

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

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제