🥲시작하면서🥲
눈물이모티콘을 계속해서 쓰는 건 역시 공부는 어렵다는 생각이 들어서다...
script 태그의 위치와 속성에 따라서 웹브라우저 동작과정이 달라지는데 오늘은 이 부분에 대해서 알아보자.📕 script 태그로 외부 js파일을 연결하는 4가지 방법
1.<head>태그 내에 <script>선언하기
2. <body> 태그 끝에 <script>선언하기
3. <head> 태그 + async 속성 추가
4. <head> 태그 + defer 속성 추가
➕ 엔진동작 과정
- 엔진이 스크립트를 읽는다. (파싱)
- 읽어드린 스크립트를 기계어로 전환한다. (컴파일)
- 기계어로 전환된 코드를 실행한다.
📖 1.<head>태그 내에 <script>선언하기
html 파싱 → html 파싱 stop → js 파일 다운로드 후 실행 → html 이어서 파싱
<html>
<head>
<script src="main.js"></script>
</head>
<body>
<h2>head에 연결했어요</h2>
</body>
</html>➕장점
웹사이트가 완전한 형태로 보여진다.
➖단점
Js파일의 용량이 크고 인터넷 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다.
📖 2. <body> 태그 끝에 <script>선언하기
html 전체 파싱 → js 파일 다운로드 → js 파일 실행
- 특징: HTML 파싱이 다 끝나고 난후에 js스크립트를 실행하기 때문에 HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩시간이 단축된다.
<html>
<head>
</head>
<body>
<script src="main.js"></script>
</body>
</html>➕ 장점
html파일 렌더링에 지장이 없어 사용자가 화면의 내용을 빠르게 볼 수 있다.
➖ 단점
html코드가 js에 의존적인 웹사이트라면 의도한 웹사이트를 보는데까지 시간이 걸릴 수 있다.
📖 3. <head> 태그 + async 속성 추가
html 파싱 → js 파일 만나면 html과 병렬적으로 다운로드
→ js 파일 다운로드 완료 → html 파싱 멈추고 js 파일 실행 → html 이어서 파싱
async 옵션
HTML parsing 중에 script 태그를 만나면 parsing과 동시에 script 파일을 다운로드 하고,script 파일 다운로드가 완료되면 HTML parsing을 멈추고 script 파일을 실행한다.
async 옵션은 script태그 선언 순서에 상관없이 다운로드 받아지는 순서대로 js파일을 실행한다.
만약 스크립트 파일의 순서에 의존적이라면 문제가 발생할 수도 있다.
<!DOCTYPE html>
<head>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>➕ 장점
js에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다. 파싱과 패칭이 병렬적으로 이루어지기 때문에 다운로드 받는 시간을 절약할 수 있다.
➖ 단점
결국에는 html 파싱이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 웹사이트 로딩까지 시간이 많이 걸린다.
📖 4. <head> 태그 + defer 속성 추가
html 파싱 → js 파일 병렬로 다운로드 → html 파싱 완료 → js 파일 실행
defer속성
HTML 파싱 중에 필요한 js파일을 미리 다운받아놓고 HTML parsing이 완료되면 js파일을 실행한다.
⚠️ 문서에 나타나는 순서대로 js파일이 실행되도록 보장된다.
<!DOCTYPE html>
<head>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>➕장점
파싱과 패칭이 병렬적으로 일어나면서 파싱을 중도에 멈추지 않고 끝낼 수 있다. 즉, 빠르게 완전한 웹페이지를 안전하게 볼 수 있다.
😊마무리하면서😊
으음~ 신기한 내용