프론트엔드 면접(script 코드의 위치)

1. <script scr=“”></script>코드는 <head>태그와 <body>태그 중에 어디에 들어가는 것이 좋은 것 같은지 본인의 생각을 말해주세요.

자바스크립트 파일의 크기와 사용성에 따라 다를 수 있지만 파일의 크기와 사용성이 비슷하다면 <body>태그 제일 하단에 들어가는 것이 좋습니다.

렌더링 엔진은 HTML을 읽어 DOM을 생성합니다. 생성중 script 태그를 만나게 되면 코드 파싱 제어권이 렌더링 엔진에서 자바스크립트 엔진으로 넘어가게 됩니다. (이를 blocking이 일어났다고도 합니다)

이후에 자바스크립트 파싱과 실행이 종료되면 다시 렌더링 엔진으로 제어권이 넘어가 HTML 파싱이 중단된 시점부터 다시 DOM 생성을 시작합니다.

결국 <script scr=“”></script>코드를 만나게 되면 위에서 아래로 동기적으로 이루어지던 파싱이 중단된다는 의미이고 블로킹되는 것은 DOM 생성을 지연시킬 수 있습니다.

또한 script 내부에서 특정 요소를 불러오는 코드가 존재한다면 아직 HTML 요소가 만들어지지 않았기 때문에 오류가 발생할 수 있습니다.

'Private > 면접' 카테고리의 다른 글

프론트엔드 면접(의존성배열) (0)	2024.11.25
프론트엔드 기술 면접(heap, CI/CD) (0)	2024.11.24
프론트엔드 면접(render, commit단계) (0)	2024.11.22
프론트엔드 면접(hydrate, render) (0)	2024.11.21
프론트엔드 면접(클래스) (1)	2024.11.20

1. <script scr=“”></script>코드는 <head>태그와 <body>태그 중에 어디에 들어가는 것이 좋은 것 같은지 본인의 생각을 말해주세요.

'Private > 면접' 카테고리의 다른 글

티스토리툴바