웹 페이지의 로드 및 실행 순서 이해 브라우저가 웹 페이지를 발견하면 일련의 이벤트를 시작하여 다양한 구성 요소를 로드하고 실행합니다. 이 프로세스는 일련의 단계로 이해될 수 있습니다: 1. HTML 구문 분석: 브라우저가 HTML 문서를 다운로드합니다. HTML 구문 분석을 시작하여 페이지 구조를 나타내는 DOM(문서 개체 모델)을 생성합니다. 2. 리소스 로딩 및 실행: 파서가 외부 리소스(예: CSS, JavaScript)를 발견하면 이를 요청하고 다운로드합니다. CSS 로딩: CSS 파일이 다운로드되어 구문 분석되고 스타일이 DOM에 적용됩니다. 인라인 JavaScript: 내의 JavaScript 코드 태그를 파싱하여 실행합니다.</li> <li> <strong>외부 JavaScript:</strong> 외부 JavaScript 파일을 다운로드하여 파싱하고 실행합니다.</li> </ul> <p><strong>3. 이미지 로딩:</strong></p> <ul><li><img>에 지정된 이미지 태그는 요청 및 다운로드되어 DOM의 일부가 됩니다.</li></ul> <p><strong>4. 문서 준비:</strong></p> <ul><li>모든 리소스가 로드되고 DOM이 완료되면 document.readyState 속성이 "complete"가 되고 "DOMContentLoaded" 이벤트가 시작됩니다.</li></ul> <p><strong>5. Document Ready 후 JavaScript 실행:</strong></p> <ul><li>$(document).ready() 블록 내에 있거나 완성된 DOM에 의존하는 모든 JavaScript 코드가 이 단계에서 실행됩니다.</li></ul> <p><strong>6. 페이지 렌더링:</strong></p> <ul> <li>DOM, CSS 스타일, 이미지를 결합하여 페이지를 렌더링합니다.</li> <li>요소는 위치와 스타일에 따라 표시됩니다.</li> </ul> <p><strong>7. 사용자 상호 작용:</strong></p> <ul><li>페이지는 JavaScript 이벤트 핸들러를 통해 텍스트 클릭이나 입력과 같은 사용자 상호 작용에 응답합니다.</li></ul> <p><strong>예시 시퀀스:</strong></p> <p>제공된 샘플 페이지의 경우 로드 및 실행 순서는 대략 다음과 같습니다.</p> <ol> <li>HTML 구문 분석</li> <li>jQuery.js 로드 및 구문 분석</li> <li>abc.js 로드 및 구문 분석</li> <li>abc.css 로드 및 구문 분석</li> <li>내부 <style> 규칙</li> <li>내부 JavaScript 구문 분석</li> <li>abc.jpg 로드</li> <li>kkk.js 로드 및 구문 분석</li> <li>문서 준비</li> <li>$( document).ready 블록(#img의 src를 kkk.png로 변경)</li> <li>페이지 렌더링 및 표시</li> </ol> <p><strong>추가 참고 사항:</strong></p> <ul> <li>리소스 로드는 HTML 구문 분석과 동시에 비동기식으로 수행될 수 있습니다.</li> <li>브라우저별 설정이 이러한 단계의 순서와 타이밍에 영향을 미칠 수 있습니다.</li> <li>외부 리소스가 캐시되어 로드에 영향을 미칠 수 있습니다. 횟수와 실행 순서.</li> </ul>