웹 페이지는 어떻게 로드 및 실행됩니까? 단계별 분석

웹 페이지 로딩 및 실행 내역

질문: 웹 페이지 로딩 및 실행 순서는 무엇입니까? 페이지?

정답:

1. HTML 구문 분석:

• 브라우저가 HTML 문서를 다운로드하고 구문 분석하여 DOM(문서 개체 모델)을 생성합니다.

2. 리소스 로드:

• 외부 리소스가 병렬로 다운로드됩니다.

  • JavaScript(외부 스크립트)
  • CSS(외부 스타일) 시트)
  • 이미지

3. JavaScript 실행:

• <script>의 인라인 JavaScript 태그가 실행됩니다.</script>
• 다운로드 시 외부 JavaScript 파일을 파싱하여 실행합니다.

4. CSS 실행:

• 외부 CSS 파일이 다운로드되어 구문 분석됩니다.
• CSS 규칙이 DOM 요소에 적용됩니다.

5. DOM 수정:

• $(document).ready() 이벤트는 DOM이 준비되면(모든 리소스가 로드됨) 실행됩니다.
• 내부 JavaScript(<script> 내) 태그)가 실행되어 잠재적으로 DOM이 수정됩니다.</script>

6. 리소스 표시:

• 이미지 및 기타 외부 리소스가 웹 페이지에 표시됩니다.

7. 추가 JavaScript 실행:

• DOM이 준비된 후 로드된 외부 JavaScript 파일은 계속 실행됩니다.

이미지 다운로드:

• abc.jpg와 kkk.png 모두 다운로드되었습니다.
• 요소의 src 속성은 JavaScript 코드에 의해 업데이트되므로 kkk.png가 됩니다.

브라우저 실행 흐름:

로드 및 실행 순서는 다음과 같습니다. 브라우저마다 조금씩 다르지만 위에서 설명한 일반적인 흐름은 그대로 유지됩니다. 일관됩니다.

병렬성:

CSS 및 이미지와 같은 일부 리소스는 HTML 구문 분석을 차단하지 않고 병렬로 로드할 수 있습니다. 그러나 외부 JavaScript 파일은 다운로드되어 실행될 때까지 HTML 구문 분석을 차단합니다.

참조:

• [브라우저 엔지니어링: 웹 로드 및 실행 페이지](https://browser.engineering/posts/load-execute-web-page/)
• [Google 개발자: JavaScript 실행 순서](https://developers.google.com/web/fundamentals/primers/html-and-css/script-execution)

위 내용은 웹 페이지는 어떻게 로드 및 실행됩니까? 단계별 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!