웹페이지 로드 및 실행 순서 로드 프로세스 이해 웹페이지가 로드되면 여러 이벤트가 발생함 특정 순서로 발생합니다: HTML 다운로드 및 구문 분석: 브라우저는 HTML 문서를 가져오고 구문 분석하는 것으로 시작됩니다. HTML이 구문 분석됨에 따라 브라우저는 페이지의 구조를 나타내는 DOM(문서 개체 모델)을 생성합니다. 외부 리소스 로드: HTML을 구문 분석하는 동안 브라우저는 외부 리소스 로드를 만납니다. CSS 및 JavaScript 파일과 같은 리소스. 이러한 리소스는 문서의 앞부분에 나타나는 리소스부터 시작하여 병렬로 다운로드됩니다. 차단 및 비동기 로딩: 태그가 발견되면 브라우저는 HTML 구문 분석을 일시 중지하고 JavaScript 파일이 로드될 때까지 기다립니다. 그러나 외부 CSS 파일은 비동기식으로 로드되므로 다운로드하는 동안 구문 분석을 계속할 수 있습니다.</li> <li> <strong>CSS 애플리케이션:</strong> CSS 파일이 다운로드되면 브라우저가 해당 파일을 구문 분석하고 적용합니다. 스타일 규칙은 이미 구성된 DOM에 적용되어 페이지 모양에 영향을 줍니다.</li> <li> <strong>인라인 JavaScript 실행:</strong> 인라인 <script> 블록은 구문 분석되는 즉시 실행됩니다. 이는 HTML 파서와 동일한 스레드에서 실행되며 DOM을 수정할 수 있습니다.</li> <li> <strong>DOM 콘텐츠 로드 이벤트:</strong> HTML 문서가 완전히 구문 분석되면 DOMContentLoaded 이벤트가 트리거됩니다. 이는 HTML 및 인라인 JavaScript가 실행되었으며 DOM을 조작할 준비가 되었음을 나타냅니다.</li> <li> <strong>JavaScript 실행</strong>(외부): 외부 JavaScript 파일이 구문 분석 및 적용 후 완전히 로드되어 실행됩니다. 모든 CSS의. DOM과 상호 작용하고 페이지 동작을 수정할 수 있습니다.</li> <li> <strong>창 로드 이벤트:</strong> window.onload 이벤트는 이미지 및 외부 스크립트와 같은 모든 리소스를 포함한 전체 페이지가 완료되면 실행됩니다. 로딩. 일반적으로 전체 페이지를 준비해야 하는 작업에 사용됩니다.</li> </ol> <p><strong>특정 질문</strong></p> <ul> <li> <strong>$(document).ready </strong>은 HTML 및 인라인 JavaScript가 처리된 후 DOMContentLoaded 이벤트가 트리거된 후 실행됩니다.</li> <li> <strong>abc.jpg</strong>가 먼저 다운로드되어 표시되고, <strong>kkk.png </strong>은 JavaScript 코드가 실행되고 이미지의 src 속성을 "kkk.png"로 설정하면 다운로드되어 대체됩니다.</li> </ul> <p><strong>브라우저 차이점</strong></p> <p>브라우저마다 리소스 로드 및 실행을 약간 다르게 처리할 수 있습니다. 예를 들어 Firefox에는 도메인당 동시 요청 수를 제한하여 리소스 다운로드 동작에 영향을 미치는 설정이 있습니다. 또한 캐싱 메커니즘과 네트워크 상태가 이러한 이벤트의 시기와 순서에 영향을 미칠 수 있습니다.</p>