-
반응형
*<head>안에 <script>를 포함하면 사용자가 html 파일을 다운로드 받았을 때, 브라우저가 한 줄씩 분석하게 됨(parsing HTML)
> css 요소와 병합해서 DOM요소로 변환
//js파일 실행 원리
html을 차례로 읽다가 <script src="main.js"></script>를 만나서 html 분석을 멈추고 필요한 js파일을 서버에서 다운(fetching js)받아서 실행(executing js)하고 다시 html 분석
> 단점: js파일이 무겁거나 사용자의 pc가 좋지 않다면 웹 사이트를 이용하는데 많은 시간이 소요된다.
//1. <script>가 <body> 바로 위에 있으면-
parsing html(html분석)후 마지막에 js파일 다운 및 실행함. 따라서 js파일 실행 전에 이미 웹 사이트가 준비되어 사용자에게 보여질 수 있다.
> 단점: 웹 사이트가 js에 의존적이라면 사용자가 보기까지 기다려야 함
//2. <head>안에 <script async src = "main.js"></script>
> async[에이싱크]는 boolean type[불리언 타입]이기 때문에 선언한 것만으로도 true로 설정됨.
마찬가지로 parsing html(html 분석)하다가 병렬로 js파일 실행명령만 해놓고 다시 html 분석.
js파일 다운 완료되면 분석을 멈추고 다운된 js파일 실행. 그리고 나머지 html 실행함.
> 장점: 분석과 다운이 병렬로 이루어져 시간 절약
> 단점: 필요한 html이 분석되기 전에 js가 먼저 실행. js파일이 먼저 실행돼서 웹 사이트가 멈출 수 있기 때문에 불편함. / 여러 개의 js파일을 실행해야 하면 먼저 다운된 js파일 먼저 실행되기 때문에 순서가 중요하다면 꼬일 수 있다.
//3. <head>안에 <script defer src = "main.js"></script>
마찬가지로 parsing html(분석)하다가 js파일 다운 명령만 하고 나머지 html 분석. 완료 후 다운된 js파일 실행함.
> 장점: 여러 개의 js파일을 실행해야 하면 순서대로 진행됨.
*js 작성 시 맨 위에 "use strict;" 선언하면 잘못된 코드를 콘솔로 확인이 가능하다.
> strict: 엄격한
> 엄격모드로 놓고 개발하기!
> js를 빠르게 분석하고 실행할 수 있다. > 성능개선
참고: 드림코딩 by 엘리반응형'😺 Study > JavaScript, jQuery' 카테고리의 다른 글
[javascript] 자바스크립트 - 변수 선언과 할당 그리고 출력 (0) 2020.11.19 [javascript] 자바스크립트 - 프로그래밍 중요한 3가지 (0) 2020.11.19 [javascript] 자바스크립트 - 오류 줄이기 위해 use strict 사용하기! (0) 2020.11.19 [javascript] 자바스크립트 동작원리01 (0) 2020.10.24 [javascript] 자바스크립트의 역사 (0) 2020.10.16 댓글
천천히, 꾸준히
