웹 브라우저는 웹 페이지의 리소스를 어떻게 로드하고 실행합니까?

웹페이지 로드 및 실행 순서 이해

소개

사용자가 웹페이지를 요청하면 브라우저는 체계적인 프로세스를 거쳐 페이지를 로드하고 렌더링합니다. 이 프로세스에는 HTML, CSS, JavaScript 및 이미지를 포함한 다양한 리소스의 순차적 다운로드, 구문 분석 및 실행이 포함됩니다.

로드 및 실행 순서

HTML 구문 분석:

1. 브라우저가 HTML 문서를 로드하고 구문 분석을 시작합니다. 프로세스.
2. HTML 구문 분석은 페이지의 구조와 콘텐츠를 나타내는 DOM(문서 개체 모델)을 생성합니다.

외부 리소스 다운로드:

3. HTML을 구문 분석하는 동안 브라우저는 CSS 파일, JavaScript 등의 외부 리소스를 감지합니다.
4. 브라우저는 이러한 리소스의 비동기 다운로드를 병렬로 시작합니다.

인라인 CSS 및 JavaScript 실행:

5. As HTML이 구문 분석되고 브라우저가 인라인 CSS 및 JavaScript 블록을 발견합니다.
6. 이러한 리소스는 구문 분석 중에 즉시 실행됩니다.

CSS 애플리케이션:

7. CSS 파일이 다운로드되면 브라우저는 규칙을 구문 분석하고 리소스에 적용합니다. DOM.
8. DOM의 요소에는 스타일이 지정됩니다.

JavaScript 실행:

9. HTML 구문 분석 중에 외부 JavaScript 파일이 발견되면 다운로드되어 실행됩니다.
10. 브라우저는 JavaScript 실행이 완료될 때까지 구문 분석을 차단합니다. 완료됩니다.

DOM 조작:

11. 구문 분석이 완료되면 DOM을 조작할 수 있습니다.
12. JavaScript는 수정할 수 있습니다. DOM의 레이아웃과 콘텐츠에 영향을 미칩니다. 페이지.

문서 준비 이벤트:

13. HTML 구문 분석 및 외부 리소스 로딩이 완료되면 문서 준비 이벤트가 시작됩니다.
14. 이 이벤트 내의 JavaScript 코드가 실행되어 페이지 요소를 초기화하고 사용자를 처리합니다.

이미지 로딩

귀하의 예에서는 HTML 구문 분석 중에 abc.jpg가 발견되면 다운로드되어 표시됩니다. $(document).ready 이벤트가 발생하면 kkk.png가 다운로드되어 이미지 소스로 설정됩니다.

브라우저 차이점

브라우저에 따라 로드 및 실행 순서가 조금씩 다를 수 있습니다. 예를 들어 일부 브라우저는 리소스 로딩을 최적화하기 위해 도메인당 동시 요청 수를 제한합니다.

캐싱

캐싱 메커니즘은 리소스 로딩에 영향을 미칩니다. 캐시된 리소스를 서버가 아닌 스토리지에서 로드할 수 있어 다운로드 시간이 단축됩니다.

병렬 실행

일반적으로 HTML 파싱, JavaScript/DOM 조작, CSS 애플리케이션은 별도의 스레드에서 병렬로 실행됩니다. 그러나 JavaScript 실행은 스크립트가 완료될 때까지 HTML 구문 분석을 차단할 수 있습니다. CSS 규칙은 점진적으로 적용되어 비동기 렌더링이 가능합니다.

참조

• [브라우저 엔지니어링 도서](https://browser.engineering/)
• [jQuery 문서](https://docs.jquery.com/Tutorials:Introducing_$(document).ready())

위 내용은 웹 브라우저는 웹 페이지의 리소스를 어떻게 로드하고 실행합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!