[브라우저] html, css 파싱과 js 실행

Dan·2023년 3월 7일

브라우저

목록 보기
4/4
  • html 파싱과 자바스크립트 실행은 동기적으로 일어난다
  • script 태그를 만나면 코드 실행을 위해 DOM 생성 프로세스는 중단된다.
  • 지연 실행(defer)옵션을 dom 생성 프로세스가 지속되고, 프로세스가 끝나면 자바스크립트 실행
  • 이론적으로 스타일 시트는 dom 을 변경하거나 생성하지 않기 때문에 문서 파싱을 기다리거나 중단할 필요는 없다.

    그러나 스크립트가 문서를 파싱하는 동안 스타일 정보를 요청하는 경우라면 문제➡️ 스타일이 파싱되지 않은 상태라면 스크립트는 잘못된 결과를 내놓기 때문에 많은 문제를 야기함
    이런 문제는 흔치 않은 것처럼 보이지만 매우 빈번하게 발생한다고 한다.(파이어폭스는 아직 로드 중이거나 파싱 중인 스타일 시트가 있는 경우 모든 스크립트의 실행을 중단한다. 한편 웹킷은 로드되지 않은 스타일 시트 가운데 문제가 될만한 속성이 있을 때에만 스크립트를 중단한다)

참고
브라우저 렌더링 순서와 원리

0개의 댓글