Skill Interview 3

기술면접

기술영역 : Javascript
질문 : 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점을 설명

웹을 구성하는 기본 틀 : html, css, js
html에는 script 태그가 들어가게 되고 그 위치는 작성자가 script가 실행되기를 원하는 위치에 작성하게 됨

script 태그의 자바스크립트 파일을 로드했을 때 모든 데이터를 받아오기 전에는 html의 다른 요소들을 읽을 수 없고 자바스크립트의 파일의 크기가 커질수록 사용자가 오랜시간을 기다려야 함

사용자가 기다리는 시간을 줄이기 위해 페이지 로드는 빠르게 될 수 있도록 body의 하단에 넣어 body의 모든 요소를 읽고 난 뒤 스크립트 파일이 실행했을 때의 문제는 페이지의 모습은 완벽하지만 해당 페이지의 데이터를 모두 받아오기 전에는 아무런 기능도 제대로 활용하기 어려움

이러한 문제를 해결하기 위해 async와 defer를 사용하여 자바스크립트 로드시 동시에 비동기로 dom을 파싱하는 것을 가능하게 해주면 됨

dom : xml, html에 접근하기 위한 일종의 인터페이스

async

async는 html 파싱이 완료되지 않았어도 먼저 로딩되는 자바스크립트 파일부터 실행함 => html 파싱과 script 로드를 동시에 하여 후에 로딩이 끝난 자바스크립트 파일은 곧바로 실행하게 되어 또 다시 script를 실행하는 과정에서 html 파싱이 멈추게 됨

장점 : JS 패칭과 html 파싱이 병렬적으로 일어나 다운로드 시간을 줄임

단점 : JS가 html이 파싱되기 전에 실행되기 때문에 JS파일과 관련된 html의 요소가 파싱되지 않아 정의 되지 않았을경우 페이지 로드의 위험이 있음

defer

defer는 html이 파싱이 완료된 후 자바스크립트 코드를 실행함 => html파싱을 멈추지 않고 스크립트 파일을 로드함

장점 : html파싱과 JS패칭을 병렬로 수행한 후 마지막에 JS파일 실행

defer 옵션으로 스크립트를 배치하는 것이 가장 안전하고 효율적인 방법