주요내용
javascript 파일포함 위치의 따른 장단점.
컨텐츠
브라우저는 html을 파싱(코드를 해석하는것)할 때 한줄한줄 읽어 나간다. 이러한 동작 원리로 인해 html파싱할 경우 script 파일 포함 위치 및 내장 옵션에 따른 장단점을 알아보자
1. Head안에 포함시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>단점
js파일이 크기가 크다면 아래 body부분을 파싱하는데까지 시간이 많이 걸리면 아래 body부분을 파싱하는데까지 시간이 오래 걸려서 클라이언트가 보는 화면의 로딩이 느릴수 있음.
2. body맨 아래 포함시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>장점
js파일 로드 전에 html의 body를 먼저 로드하기에 클라이언트가 보는 화면이 빠르게 나타남
단점
만약 html자체가 js파일의 의존적이면 js파일 파싱 전까지 클라이언트 동작의 문제가 생길수 있음
3. async 옵션 추가 포함시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
<script async src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>장점
async옵션을 줄 경우 js파일 다운로드와 html파싱을 비동기적으로 처리하여 html파싱 속도가 조금 빨라 질 수 있음.
단점
js파일 다운로드가 끝난 후 html파싱을 멈추고 js파일을 실행한 후 다시 html파싱을 하기 html 파싱 자체의 시간이 줄어들지 않음.또한,js파일이 여러개일 경우 async로 처리해놓으면, 다운로드가 끝난 js순으로 실행되기에, html에 정의된 순서대로 순차적으로 실행이 안될수 도 있음.
4. defer 옵션 추가 포함시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>타이틀</title>
<script defer src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>장점
defer 줄 경우 async와 비슷하게 비동기적으로 처리하지만, defer는 브라우저에게 다운로드만 비동기로 처리하고 html파싱이 모두 끝난이후 js파일을 실행함. 또한, js파일이 여러개일 경우 defer 처리해놓으면, 다운로드가 끝난후 순차적으로 실횅되기에 명확하게 실행 순서를 정해 줄 수 있음.
결론
defer 옵션을 줄경우 다운로드와 동시에 html을 파싱하기에 클라이언트에게 가장 안전하게 프로그램의 기능을 보여 줄 수 있다고 생각한다!!!
