웹페이지 로드 및 실행 순서 개요 웹페이지를 요청하면 브라우저에서 다음 작업을 수행합니다. 콘텐츠를 로드하고 실행하는 일련의 작업입니다. 여기에는 HTML 문서 처리, 외부 리소스 가져오기 및 실행, 페이지 렌더링이 포함됩니다. 로드 순서 HTML 문서: 브라우저는 HTML을 다운로드합니다. 문서를 분석하고 분석을 시작합니다. 인라인 리소스(스크립트 및 스타일): 브라우저가 인라인 및 <스타일> 태그를 분석하고 즉시 실행합니다.</li> <li> <strong>외부 리소스(스크립트 및 CSS):</strong> 외부 스크립트 파일(<script src="...">)이 다운로드되어 구문 분석됩니다. , 실행되었습니다. 외부 CSS 파일(<link rel="stylesheet" href="...">)이 다운로드되어 페이지에 적용됩니다.</li> <li> <strong>이미지 및 기타 콘텐츠:</strong> 브라우저가 동시에 HTML 문서에 지정된 이미지 및 기타 리소스를 다운로드합니다.</li> </ol> <h3>JavaScript 실행</h3> <p><strong>인라인 JavaScript:</strong> Inline JavaScript는 구문 분석 즉시 실행됩니다.</p> <p><strong>외부 JavaScript:</strong></p> <ul> <li> <strong>차단:</strong> 외부 스크립트가 defer 또는 async로 표시된 경우 브라우저는 계속하기 전에 해당 스크립트를 다운로드하여 실행합니다. HTML을 구문 분석합니다.</li> <li> <strong>비차단:</strong> 외부 스크립트가 load로 표시된 경우 브라우저는 HTML 구문 분석을 차단하지 않고 해당 스크립트를 다운로드하여 비동기적으로 실행합니다.</li> </ul> <h3>CSS 실행</h3> <ul> <li><style> 또는 링크 태그.</li> <li>페이지가 구문 분석되고 렌더링된 후 CSS를 변경하면 페이지의 모양이 동적으로 업데이트됩니다.</li> </ul> <h3>$(document).ready 타이밍</h3> <p> $(document).ready 함수는 모든 HTML 요소와 외부 리소스가 로드되고 실행될 때 실행됩니다. 이렇게 하면 JavaScript 코드가 페이지 요소와 안전하게 상호 작용할 수 있습니다.</p> <h3>이미지 다운로드</h3> <ul> <li>abc.jpg가 페이지에서 처음 발견되면 다운로드됩니다. </li> <li>kkk.png가 다운로드되고 <img> 요소는 JavaScript를 사용하여 동적으로 설정되기 때문입니다.</li> </ul> <h3>브라우저에 따른 차이</h3> <p>로드 및 실행 순서는 브라우저에 따라 약간 다를 수 있지만 일반적인 원칙은 동일합니다.</p> <h3>참고자료</h3> <ul> <li>[브라우저 엔지니어링 도서](https://browser.engineering/)</li> <li>[웹 페이지의 JavaScript 실행 순서](https://developer.mozilla .org/en-US/docs/Web/HTML/Element/script)</li> <li>[브라우저의 페이지 수명 주기](https://addyosmani.com/blog/page-lifecycle-in-browsers/)</li> </ul>