웹에 접속하게되면 사용자는 html을 다운받게 되고, 브라우저는 한줄한줄 html 파일을 분석한다.(parsing HTML)
분석하는 도중 script태그 코드를 만나게 되면, 브라우저는 script를 다운받게된다.
이때, script태그가 어느 위치에 있었냐에 따라 브라우저의 전체적인 성능에 영향을 미치게 된다.
그래서 html내의 적절한 script 위치와 asyn, defer를 이용한 개선 방법도 정리해보겠다.
1. <head>태그 안에 script 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=width=device-width, initial-scale=1.0" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
이 코드에서는 head태그 안에 main.js 스크립트를 불러오게 되어있다.
html파일을 분석하는 도중, head태그 안에서 script코드를 만나게 되었다.
웹 브라우저는 html을 한줄씩 해석한다.
그리고 한줄씩 해석하는 중 자바스크립트 파일을 불러오는 script태그를 만나면,
웹 브라우저에서 서버로 자바스크립트 파일을 요청 보낸다. 그리고 서버에서 자바스크립트 파일을 응답해주고, 브라우저는 그 파일을 바로 해석한다. 해석하면서 바로 실행돼야 할 자바스크립트 코드가 있다면 그것을 먼저 실행시킨다. 실행이 끝난 후 다음 코드가 진핸된다.
아래의 코드를 살펴보면,
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="./test.js"></script>
<title>test</title>
</head>
<body>
<h1>가나다라마바사</h1>
</body>
</html>만약 test.js 파일에 alert('test'); 코드가 있다면 alert창에 test가 출력된 후, body태그의 '가나다라마바사'가 브라우저에 출력될 것이다.
alert창이 출력된 후 body의 내용이 출력되게 의도할 수 있지만, 의도하지 않는 경우에는 비효율적이다.
왜냐하면
script 태그를 head태그 안이나 body태그 위쪽에 넣게되면, 브라우저가 html을 해석하는 동안 자바스크립트 코드를 다운로드하고 해석하느라 html 해석이 느려질 수 있기 때문이다.
그리고 또 한가지,
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script>
alert('test');
</script>
<title>test</title>
</head>
<body>
<h1>가나다라마바사</h1>
</body>
<script>
alert('왜 너가 먼저 출력돼')
</script>
</html>코드에 head태그와 body태그 끝나는 부분에 script태그들을 넣었다.
그리고 alert를 실행시켰다.
이 코드를 보아서는 test alert창이 출력된 후, body의 '가나다라마바사'가 출력된 후, '왜 네가 먼저 출력돼' alert창이 출력될 것이라고 예상할 수 있지만 그렇지 않다.
결과는 'test' -> '왜 네가 먼저 출력돼' -> '가나다라마바사' 순으로 출력된다.
이처럼 script 코드가 브라우저의 렌더링을 방해하고 있다.
그렇기 때문에 script코드는 가급적 body태그 아래나 body태그 끝난 후에 넣어주는 게 좋다.
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<h1>가나다라마바사</h1>
<!--혹은 body의 마지막 부분에 script를 넣는다.-->
<!--<script> </script> -->
</body>
<!-- body태그가 닫힌 후 script를 넣는다.-->
<script>
console.log("testsestetsetsetset");
</script>
</html>이런 식으로 코드를 짜면 '가나다라마바사'가 출력된 후 script의 코드인 console이 실행된다.
결론: script코드는 body태그가 닫히기 전, body태그가 닫힌 후에 넣는 게 좋다.
이유
1. script 태그를 head태그 안이나 body태그 위쪽에 넣게 되면, 브라우저가 html을 해석하는 동안 자바스크립트 코드를 다운로드하고 해석하느라 html 해석이 느려질 수 있다.
2. script코드가 브라우저의 렌더링을 방해한다.
cf.) 1. css코드나 Javascript코드가 커질 경우 html내에 적지 않고 외부 스크립트로 작성시킨다.
2. css코드는 head 안에 위치해서 렌더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋다.
마무리
지금까지 script 코드를 아무것도 생각 안 하고 집어넣었었는데.... 좋은 팁을 배웠다.
참고자료: www.edwith.org/boostcourse-web/lecture/16664/
[LECTURE] 5) browser에서의 웹 개발 : edwith
들어가기 전에 웹 클라이언트 코드는 브라우저 안에서 동작합니다. HTML, CSS, JavaScript의 실제 소스코드를 보면서 웹페이지 소스의 구성을 살펴봅니다. 학습 목표 ... - 부스트코스
www.edwith.org
'취준때의 노고(?)' 카테고리의 다른 글
| box-sizing (0) | 2020.09.18 |
|---|---|
| html 구조 설계에 사용하는 대표 태그들 (0) | 2020.09.17 |
| 클래스의 재사용 (0) | 2020.09.15 |
| 생성자 (0) | 2020.09.15 |
| 객체지향 프로그래밍 (0) | 2020.09.14 |