HTML/CSS/JS 실행과정

개념 설명

HTML 파싱, CSS 스타일 적용, JavaScript 실행이 순차적으로 이루어지는 브라우저 렌더링 과정.

핵심 포인트

HTML 파싱 → DOM 트리 생성 (토큰화 → 파싱 → DOM)
CSS 파싱 → CSSOM 트리 생성 (선택자 해석 → 스타일 계산)
script 태그 만날 때 HTML 파싱이 중단되고 JS 실행
DOM + CSSOM = 렌더 트리 생성
DOMContentLoaded 이벤트 후 이벤트 리스너 등록

예시 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSSOM 구성 중 HTML 파싱 블로킹 */
    .container { display: flex; }
  </style>
</head>
<body>
  <div class="container">
    <p>HTML 파싱 진행 중...</p>
  </div>
  
  <!-- 여기서 HTML 파싱 중단, JS 실행 -->
  <script>
    console.log('파싱 블로킹'); 
    document.querySelector('.container').style.color = 'red';
  </script>
  
  <p>이 텍스트는 JS 실행 후 파싱됨</p>
</body>
</html>

더 많은 내용을 확인하세요! 📚

“HTML/CSS/JS 실행과정”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기