TIL 09 | JavaScript?

dydalsdl1414·2021년 3월 15일
1

사전스터디 

목록 보기
9/23
post-thumbnail

✔ 사전스터디 JavaScript 내용은 유튜버 드림코딩 엘리님의 강의를 참고하였다.

JavaScript??

  • 자바스크립트란 객체 기반프로그래밍 언어이다.
  • 웹 브라우저에서 유일!!하게 구동되는 프로그래밍 언어이다.
  • 웹의 기본 3구성 중 정적인 HTML, CSS와 달리 동적인 언어이다.(움직이거나 깜빡이는 요소 등....)


HTML과 연결하기

  • Javascript 파일을 HTML과 연결할 때, 다음과 같은 방법들이 있으며 어떤 방법이 가장 효율적인지 알아보자!

1. head tag에 삽입

  • 위 그림과 같이 브라우저는 HTML과 CSS의 parsing(해석, 분석)을 통해 코드들을 한 줄씩 읽으면서 웹의 구조를 파악하게 된다.

  • 하지만 이러한 parsing 과정은, 중간에 <head> 태그에 삽입 된 <script> 태그의 javascript 파일을 가져온 후 실행하는 동안 멈추게 된다.

  • 위와 같은 이유로 사용자에게 보여지기까지의 과정이 상대적으로 느리다. 또한 만일 javascript 파일이 무겁다면 그 속도는 더욱 늦어질 것이다. 때문에 이 방법은 적절하지 않다.



2. body tag에 삽입

  • 가장 보편적인 방식으로, <body> 태그의 가장 끝 부분에 <script> 태그를 추가한다.

  • 장점: <head> 태그에 삽입했던 방법과 달리 parsing 도중 멈추지 않기 때문에 상대적으로 빨리 볼 수 있다.

  • 단점: 만일 해당 웹사이트가 javascript에 굉장히 의존적이며 javascript 파일이 매우 무겁다면, 이 또한 사용자에게 보이기까지 시간이 오래 걸린다.(fetching, executing 시간 증가)



3. head 태그 안 삽입 및 async 속성 부여

  • <head> 태그 안, boolean 타입의 async 속성값을 부여한다.

  • 특징: HTML이 파싱되는 동안, javascript는 병렬로 fetching이 이루어지며 파일이 실행되는 동안 parsing이 멈춘다.

  • 장점: 병렬적으로 fetching이 되기 때문에 parsing 전체의 시간을 줄일 수 있다.

  • 단점: html요소에 의존하는 javascript파일의 경우, html 및 css 요소가 parsing되기 전에 실행될 가능성이 존재하므로 위험하다. 또한 정의된 js순서에 상관없이 fetching(다운로드)되는 순서로 파일이 실행되기 때문에 순서에 의존적인 javascript파일의 경우 문제가 발생할 수 있다.



4. head 태그 안 삽입 및 defer 속성 부여 (가장 선호)

  • <head> 태그 안, boolean 타입의 defer 속성값을 부여한다.

  • 특징: HTML이 파싱되는 동안, javascript는 병렬로 fetching이 이루어지며 parsing 종료 후, 파일이 실행된다.

  • 장점: 웹 페이지의 실행 시간이 가장 짧다. (parsing이 중단되는 구간이 없음) 또한 정의한 javascript 순서대로 실행이 되기 때문에 async보다 상대적으로 안전한다.

profile
블로그를 이전하였습니다 => "https://jymini.tistory.com"

0개의 댓글