[JS] Java Script가 파싱하는 방법

HOU·2022년 7월 18일
0

JavaScript

목록 보기
9/20
post-thumbnail

자바 스크립트가 parsing 하는 방법

1.헤더에 넣기

헤더

  • Parsing HTML → JS 불러오기 → Parsing HTML

단점 : js파일이 너무 크다면 html파일이 파싱 되는데 많은 시간이 걸린다.

2.바디에 넣기

바디

  • Parsing HTML → JS불러오기

단점 : js파일이 너무 늦게 불려오기 때문에 js의존적인 웹페이지라면 정보를 호출하는데 문제가 생길 수 있음

3. head + async

async

Parsing HTML → blocked(대기) → Parsing HTML
main.js 다운로드 → blocked일때 main.js 실행

장점 : 병렬로 다운받기 때문에 다운로드 받는 시간을 절약 할 수 있다.
단점 : html이 파싱 되기 전에 js파일이 실행되기 때문에 , js에서 html을 불러올경우 parsing이 안된 문제점이 있다. 오류 날 수 있음

순서를 중요하지 않고 다운받은 순서대로 실행되기 때문에 , 순서가 중요한 코드 파일일 경우 오류가 날 수 있다.

4. head + defer

defer

  1. Parsing HTML → main.js파일 실행
  2. main.js 다운로드
  3. 병렬적으로 Html파일을 파싱하면서 main.js파일도 함께 다운로드 한다.
  4. html파일이 다 파싱되고 main.js를 다 다운 받은 후에 main.js를 실행한다.
  5. 다운로드 받은 순서로 진행되지 않고 코딩 순서대로 진행되기 때문에 asyn보다 안전하다.
  6. 단순하게 생각해서 defer만 기억하면 된다.

번외 use strict (엄격한 사용!)

use strict는 변수가 정의 되어 있는지 중복되지 않는지 확인해주는 명령어 입니다.
사용법은 맨 위에 usestrict라고 선언해주면 됩니다.

"use strict"

//코딩 작성

use strict를 사용하지 않으면 변수를 정의 하지 않고 변수를 사용해도, 오류가 발생하지 않는다.
useStrict 미사용

하지만 use strict를 사용하면!!!

useStrict 사용

오류가 발생하는 것을 볼 수 있다.

만약에 use strict를 사용하지 않는게 훨씬 편하게 느껴질 수 있지만 변수가 중복으로 사용되거나 하는경우 내가 코딩한 방향과는 정반대의 방향이 나올 수 있기 때문에 절대 절대 안되요!

profile
하루 한 걸음 성장하는 개발자

1개의 댓글

파싱🤓

답글 달기