📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

Jake Seo·2020년 6월 15일

인터뷰-문제-답해보기

목록 보기

9/10

📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 합니다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 합니다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있습니다.

General Questions
HTML Questions
CSS Questions
JS Questions
Accessibility Questions (external link)
Testing Questions
Performance Questions
Network Questions
Coding Questions
Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제입니다.

이를테면...

~~What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)~~
~~What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)~~
~~What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)~~

이러한 것들은 답변하지 않습니다. 이런 문제는 그때그때 답이 달라질 수 있습니다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같습니다.

Q: `<script>`, `<script async>`, `<script defer>`의 차이를 설명해보세요.

Describe the difference between <script>, <script async> and <script defer>

A:

<script>는 HTML 파싱을 블록시킵니다. 스크립트는 fetch 이후에 즉각적으로 실행되며 스크립트가 전부 끝난 이후에 HTML 파싱이 재개됩니다.
<script async>는 HTML 파싱과 함께 병렬적으로 코드가 수행됩니다. (일반적으로는 HTML 파싱이 끝나기 전에 <script async>는 사용할 준비가 완료됩니다. analytics와 같은 코드는 <script async>와 잘 맞습니다.
<script defer>는 HTML 파싱 중에 병렬적으로 fetch 되고, HTML 파싱이 끝난 이후에 실행됩니다. 만일, <script defer> 요소가 여러개 존재한다면, 모든 <script defer>는 순서대로 수행될 것입니다. 만일 스크립트가 완전히 파싱된 DOM 요소에 의존한다면 <script defer>를 사용하기 적합합니다. 사실 <body>의 끝 부분에 <script>를 위치시키는 것과 <script defer>를 사용하는 것에 큰 차이는 없습니다.

src 속성이 없는 경우 async와 defer 옵션은 무시당합니다.

Q: 일반적으로 CSS 링크는 `<head></head>` 사이에 두고, JS 링크는 `</body>` 바로 전에 입력하는게 좋은지 설명할 수 있나요?

Why is it generally a good idea to position CSS <link>s between <head>``</head> and JS <script>s just before </body>? Do you know any exceptions?

A1: CSS 링크를 `<head></head>` 사이에 두어야 하는 이유

링크를 <head></head> 영역에 두는 것은 최적화된 웹사이트를 만드는데 적절합니다. 웹 페이지가 처음으로 로드될 때, HTML과 CSS는 동시에 파싱되기 시작합니다. HTML은 DOM을 만들고, CSS는 CSSOM(CSS Object Model)을 만들게 됩니다.

웹사이트의 시각적 요소를 만들기 위해서는 두 가지가 모두 필요합니다. 두 가지 요소가 파싱되며 "첫 의미있는 페인팅(first meaningful paint)" 타이밍이 만들어집니다. 이 프로그레시브 렌더링은 카테고리 최적화 사이트들의 퍼포먼스 측정에 적용됩니다.

CSS를 문서의 아래쪽에 두는 것은 페이지가 프로그레시브 렌더링을 진행하는 것을 방해합니다. 몇몇 브라우저들은 만일 스타일이 변경되면, 엘리먼트들을 다시 페인트 해야 하기 때문에 그것을 막기 위해 렌더링을 블록하는 경우도 있습니다. 그 때 사용자는 하얀색 빈 페이지를 보고 있게 됩니다. 아니면 스타일링되지 않은 웹페이지가 잠시 보여질 수도 있습니다.

A2: `<script>`를 `</body>` 전에 두어야 하는 이유

<script>는 다운로드되고 실행되는 동안 HTML 파싱을 블록합니다. HTML 아래에 <script>태그를 입력하면 당장 사용자에게 보여져야 하는 HTML이 먼저 파싱되어 좋은 사용자 경험을 이끌어낼 수 있습니다.

다만, document.write()가 포함된 스크립트가 있을 때는 </body>의 바로 앞에 작성하는 것이 좋지 않을 수 있습니다. 현대 웹에서는 사실 document.write()를 사용하는 것 자체가 권장되는 방법은 아닙니다. 또한 <script>를 아래에 배치한다는 것은 브라우저가 모든 document를 파싱하기 전까지는 script를 다운받을 수 없다는 이야기가 됩니다. 이 말은 DOM을 작성하는 코드가 error나 throw를 하지 않는 것을 보장합니다. <head> 내부에 <script>를 위치시키고 싶다면 defer 속성을 이용하면 될 것입니다.

Q: 프로그레시브 랜더링이란 무엇인가요?

what is progressive rendering?

A:

프로그레시브 랜더링이란 디스플레이에 컨텐츠를 최대한 빠르게 랜더링하기 위해 웹페이지의 퍼포먼스를 올리기 위한 기술에 붙여진 이름입니다.

광대역 인터넷이 있기 전에 훨씬 더 유행했던 기술이지만, 여전히 모바일 데이터 커넥션과 같은 현대 개발에서도 많이 사용됩니다.

기술의 예제는 다음과 같습니다.

이미지의 Lazy loading 기법 - 페이지의 이미지를 한 번에 로드하는 것이 아니라, 사용자의 스크롤에 응답하여 필요한 부분을 로드하는 기술입니다.
컨텐츠의 우선순위 정하기 기법 - 페이지가 필요로 하는 최소한의 CSS, 내용, 스크립트를 로드하여 필요한 부분을 빠르게 로드한 뒤에 나머지 리소스들을 로드하는 것을 말합니다.
비동기적 HTML 로딩 - 백엔드에서 페이지에 필요한 정보들이 처리되고 있을 때, 사용자에게 보여지는 HTML을 먼저 로드하는 것입니다.

레퍼런스

https://github.com/yangshun/front-end-interview-handbook/blob/master/contents/en/html-questions.md#describe-the-difference-between-script-script-async-and-script-defer
https://developer.yahoo.com/performance/rules.html#css_top
https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Jake Seo

풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.

이전 포스트

📃 프론트엔드 인터뷰 문제 답해보기 #7 cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

다음 포스트

📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

인터뷰-문제-답해보기

📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

Prologue

문제 선정

참고

Q: `<script>`, `<script async>`, `<script defer>`의 차이를 설명해보세요.

A:

Q: 일반적으로 CSS 링크는 `<head></head>` 사이에 두고, JS 링크는 `</body>` 바로 전에 입력하는게 좋은지 설명할 수 있나요?

A1: CSS 링크를 `<head></head>` 사이에 두어야 하는 이유

A2: `<script>`를 `</body>` 전에 두어야 하는 이유

Q: 프로그레시브 랜더링이란 무엇인가요?

A:

레퍼런스

📃 프론트엔드 인터뷰 문제 답해보기 #7 cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

📃 프론트엔드 인터뷰 문제 답해보기 #10 클로저는 무엇이며 왜 사용하나요? + Execution Context + Lexical Environment

0개의 댓글

📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

인터뷰-문제-답해보기

📃 프론트엔드 인터뷰 문제 답해보기 #9 <script> 태그에 대해 얼마나 알고 있나요?

Prologue

문제 선정

참고

Q: <script>, <script async>, <script defer>의 차이를 설명해보세요.

A:

Q: 일반적으로 CSS 링크는 <head></head> 사이에 두고, JS 링크는 </body> 바로 전에 입력하는게 좋은지 설명할 수 있나요?

A1: CSS 링크를 <head></head> 사이에 두어야 하는 이유

A2: <script>를 </body> 전에 두어야 하는 이유

Q: 프로그레시브 랜더링이란 무엇인가요?

A:

레퍼런스

📃 프론트엔드 인터뷰 문제 답해보기 #7 cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

📃 프론트엔드 인터뷰 문제 답해보기 #10 클로저는 무엇이며 왜 사용하나요? + Execution Context + Lexical Environment

0개의 댓글

📃 프론트엔드 인터뷰 문제 답해보기 #9 `<script>` 태그에 대해 얼마나 알고 있나요?

Q: `<script>`, `<script async>`, `<script defer>`의 차이를 설명해보세요.

Q: 일반적으로 CSS 링크는 `<head></head>` 사이에 두고, JS 링크는 `</body>` 바로 전에 입력하는게 좋은지 설명할 수 있나요?

A1: CSS 링크를 `<head></head>` 사이에 두어야 하는 이유

A2: `<script>`를 `</body>` 전에 두어야 하는 이유