웹 페이지 로딩 및 실행 내역 질문: 웹 페이지 로딩 및 실행 순서는 무엇입니까? 페이지? 정답: 1. HTML 구문 분석: 브라우저가 HTML 문서를 다운로드하고 구문 분석하여 DOM(문서 개체 모델)을 생성합니다. 2. 리소스 로드: 외부 리소스가 병렬로 다운로드됩니다. JavaScript(외부 스크립트) CSS(외부 스타일) 시트) 이미지 3. JavaScript 실행: 의 인라인 JavaScript 태그가 실행됩니다.</li> <li>다운로드 시 외부 JavaScript 파일을 파싱하여 실행합니다.</li> </ul> <p><strong>4. CSS 실행:</strong></p> <ul> <li>외부 CSS 파일이 다운로드되어 구문 분석됩니다.</li> <li>CSS 규칙이 DOM 요소에 적용됩니다.</li> </ul> <p><strong> 5. DOM 수정:</strong></p> <ul> <li>$(document).ready() 이벤트는 DOM이 준비되면(모든 리소스가 로드됨) 실행됩니다.</li> <li>내부 JavaScript(<script> 내) 태그)가 실행되어 잠재적으로 DOM이 수정됩니다.</li> </ul> <p><strong>6. 리소스 표시:</strong></p> <ul><li>이미지 및 기타 외부 리소스가 웹 페이지에 표시됩니다.</li></ul> <p><strong>7. 추가 JavaScript 실행:</strong></p> <ul><li>DOM이 준비된 후 로드된 외부 JavaScript 파일은 계속 실행됩니다.</li></ul> <p><strong>이미지 다운로드:</strong></p> <ul> <li>abc.jpg와 kkk.png 모두 다운로드되었습니다.</li> <li><img> 요소의 src 속성은 JavaScript 코드에 의해 업데이트되므로 kkk.png가 됩니다.</li> </ul> <p><strong>브라우저 실행 흐름:</strong></p> <p>로드 및 실행 순서는 다음과 같습니다. 브라우저마다 조금씩 다르지만 위에서 설명한 일반적인 흐름은 그대로 유지됩니다. 일관됩니다.</p> <p><strong>병렬성:</strong></p> <p>CSS 및 이미지와 같은 일부 리소스는 HTML 구문 분석을 차단하지 않고 병렬로 로드할 수 있습니다. 그러나 외부 JavaScript 파일은 다운로드되어 실행될 때까지 HTML 구문 분석을 차단합니다.</p> <p><strong>참조:</strong></p> <ul> <li>[브라우저 엔지니어링: 웹 로드 및 실행 페이지](https://browser.engineering/posts/load-execute-web-page/)</li> <li>[Google 개발자: JavaScript 실행 순서](https://developers.google.com/web/fundamentals/primers/html-and-css/script-execution)</li> </ul>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
