22.01.09
한동안 교내 공모전과 동계방학인턴을 구하고 가산디지털단지로 출근하느라 블로그 관리를 못 했습니다.
주말마다 매주 정리할 예정입니다.
1. html parsing이란
파싱이란 구문 분석 및 해석이라고 생각하면 됩니다. html 파일을 로드하면 parsing이 시작됩니다.
2. JS fetching이란
패칭이란 추가된 js 파일을 해석하는 과정입니다. script 태그의 위치에 따라 parsing과 fetching의 순서와 우선순위가 달라집니다.
3. parsing과 fetching 순서
- head 태그에 script
html parsing을 중간에 중단 -> js 파일 읽어 온 후 다시 html parsing
장점) js 파일 가장 먼저 실행 가능
단점) js 파일의 크기가 큰 경우 속도가 느려진다.
EX) <script asyn src = “test.js”></script>
html parsing과 fetching js가 병렬로 이루어짐.
js 파일 다운(fetching)이 완료되면 html parsing을 중단하고 js파일을 실행시킨 뒤 남은 html을 parsing 한다.
장점) 병렬 진행으로 js 파일 fetching 시간이 절약된다.
단점) js에 필요한 html요소가 정의되기 전에 js가 먼저 실행되는 위험이 있다.
다수의 script가 존재할 때 코드 순서와 상관없이 다운이 완료된 순으로 js파일이 실행되므로 순서에 의존적인 js 코드인 경우 문제가 될 수 있다.
EX) <script defer src="test.js"></script>
HTML parsing과 fetching js가 병렬 진행되며 HTML parsing완료 후에 js파일을 실행한다.
장점) HTML을 사용자에게 보여준 뒤 js를 실행한다.
특징)
1. html parsing과 js fetching이 동시에 이루어지는건 async와 defer 모두 같다.
2. async는 fetching이 완료되면 parsing 중단하고 js 실행
defer는 html parsing 전부 완료한 후에 js fetching 진행
<body> <script src="test.js"></script> </body>
HTML parsing이 완료된 후 js파일을 읽어온다.
장점 : 기본적인 HTML 콘텐츠는 빠르게 볼 수 있다.
단점 : js에 의존적인 콘텐츠라면 HTML만 먼저 보이는 것은 큰 의미가 없다.
javascipt 정리를 한동안 해야할 것 같습니다. 기초부터 단단해져야합니다.
'Javascript > Vanilla JS' 카테고리의 다른 글
| javascript symbol, global symbol registry, Symbol.for, Symbol.keyFor (0) | 2022.01.26 |
|---|---|
| 메서드(method), this, new, Constructor, Optional chaining(.?) (0) | 2022.01.25 |
| Object, reference, copy, garbage collection. 객체, 참조, 가비지 콜렉 (0) | 2022.01.19 |
| javascript ==, ===, querySelector(), querySelectorAll() (0) | 2022.01.10 |
| javascript const, let, var (0) | 2022.01.09 |