Q. 일반적으로 CSS
<link>태그를<head></head>태그 사이에 위치시키는 이유는?
- HTML을 파싱하는 중간에
<link>를 만나면<link>파싱은 병렬적으로 수행되어 HTML 파싱과 동시에 진행된다.- 따라서
<head>태그 안에 CSS<link>를 삽입하면, HTML과 CSS가 병렬적으로 파싱되어 CSSOM을 더 빠르게 완성할 수 있다. 따라서 사이트에 렌더링 되는 시간도 빨라진다.<link>를 HTML 중간이나 마지막에 삽입하면,<link>이전의 요소들을 렌더링하다가 를 만난 후에 CSSOM을 생성하고, 여기에 맞춰 다시 렌더링을 한다. 이렇게 되면 첫번째 렌더링을 할 때 사용자에게 스타일되지 않은 HTML 요소를 보여주게 되어 UX에 좋지 않고, 두번째 렌더링을 할 때 HTML 요소들이 재렌더링 되기 때문에 낭비가 심하다. 또한<link>의 삽입이 늦어진 만큼 CSSOM 생성도 늦춰져 렌더링 완료 시간이 늦춰진다.
Q. JS
<script>태그를<body>태그가 끝나기 직전에 위치시키는 이유는?
- 브라우저는
<script>태그를 만나면 HTML 파싱을 잠시 멈추고,<script>를 다운로드하고 실행한다(Parsing Blocking). 이 경우, 사용자에게 화면이 보여지기까지 시간이 늦어진다.
Q.
<script> <script async> <script defer>태그들의 차이점은 무엇인가?
<script>태그를 만나면 파싱을 멈추고 스크립트를 다운받은 후 에 실행.<async>태그를 만나면 파싱을 유지한채로 스크립트를 다운받은 후 실행될때 파싱이 멈춤.<defer>태그를 만나면 파싱을 유지한채로 스크립트를 다운받은 후 실행될때도 파싱이 멈추지 않음
Q. 시맨틱 태그(sementic tag) 에 대해 설명하세요.
- 자신의 목적과 의미를 브라우저와 개발자에게 명확하게 설명하는 태그를 말한다.
Q. 웹팩과 바벨의 역할에 대해서 설명하세요.
- 웹팩은 자바스크립트 어플리케이션을 위한 정적 모듈 번들러이다.
- 웹페이지에서 자바스크립트 파일을 여러번 다운로드 받지 않게 하기 위해
- 모듈 단위로 개발할 수 있게
- 바벨은 자바스크립트 트랜스파일러이다
- 구형 웹 브라우저에서도 사용할 수 있게 하기 위해
Q. event.preventDefault() 의 역할
- 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드
Q. intersection Observer API가 무엇인지 설명하세요.
- Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법
- 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩
- 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현
- 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고
- 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정
Q. 이벤트 위임
- 엘리먼트마다 핸들러를 할당하지 않고, 엘리먼트의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있는 방법을 말함
Q. 이벤트 버블링
- 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미함
느낀대로 적자