JS repl.it7

younghyun·2022년 2월 1일
0

JavaScript 위치

  • Script 태그 / html 파일에서 js 파일 호출
    JavaScript 파일 만으로는 JavaScript 가 작동되지 않음.브라우저가 존재해야 하고, JavaScript파일을 호출하는 html파일이 있어야 함.
    html파일에서 js파일을 불러와야 함

    <script src="index.js"></script>
    js파일 이름은 상관없음.
  • html 내부 JavaScript 코드의 위치
    JavaScript 코드는 js 파일에만 아니라, html 코드 내에도 script태그(<script>) 활용해서JavaScript 코드를 작성할 수 있음. ( 브라우저가
    자바스크립트 코드라고 인식하게 하기 위해 )

    <script> 
      function sayHi() { 
        console.log('여기는 index.html파일입니다.'); 
      } 
      sayHi();
    </script>

    하지만 유지보수, 관리 차원에서 index.js같이 외부
    파일에 작성하는 게 가장 좋은 방법

  • <script> 태그 작성하는 위치
    <script>위치에 따라 rendering에도 차이가 있음

첫 번째
head안에 <script> 포함
브라우저가 한줄 html을 쭉 parsing 하다가 스크립트 태그가 보이면 main.js를 다운 받아야 한다고 이해함. 그래서 parsing하는 것을 잠시 멈추고 필요한
자브스크립트 파일을 서버에서 다운 받아서 이걸 실행하고 다시 parsing하는 부분으로 넘어감
단점은 js파일이 엄청 크고, 인터넷도 엄청 느리다면
사용자가 웹 사이트 보는데 많은 시간이 소요됨.

두 번째

그래서 그 다음 많이 하는게 body 안에 제일 끝부분에 스크립트 추가. 브라우저가 html 다운 받아서
parsing 해서 페이지가 준비된 다음. 스크립트 만나서 서버에서 받아오고 실행.
장점은 페이지가 js를 받기전에도 준비가 되어서 사용자가 페이지 컨텐츠를 빨리 볼 수 있음.
단점은 사용자가 기본적인 html컨텐츠를 보긴 하지만웹사이트가 자바스크립트에 의존적 이라면
( 사용자가 의미 있는 컨텐츠를 보기 위해서는 자바스크립트를 이용해서 서버에 있는 데이터를 받아온다던지
dom요소를 이쁘게 꾸며 준다던지 그런식으로 작동하는
웹 사이트 ), 사용자가 정상적인 페이지 보기 전까지는 Fetching 하는 서버에서 자바스크립트 받아오는 시간도 기다려야 하고 실행하는 시간도 기다려야 함

세 번째

헤드 안에 스크립트를 이용 하되, asyn라는 속성값을 쓰는 것
async는 불리언 타입에 속성 값이기 때문에 선언하는 것 만으로도 true로 설정이 되어서 async 옵션을 사용할 수 있음.
사용하게 되면 브라우저가 html 다운로드 받아서 parsing 하다가 병렬로 js파일 명령만 해놓고 다시 parsing 하다가 main.js가 다운로드 완료되면 parsing을 멈추고 다운로드 된 js파일을 실행하게 됨. 실행하고 나서 나머지 html parsing
장점은 body끝에 사용하는 것보다 fetching이 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있음.
단점은 자바스크립트가 html이 parsing되기도 전에 실행되서, 자바스크립트 파일에서 쿼리셀렉터를 이용해서 dom요소를 조작한다고 하면 조작하려고 하는 시점에 html이 원하는 요소가 아직 정의 되지 않을 수 있어서 그 부분이 조금 위험함.
또 하나는 html parsing하는 동안 언제든지 자바스크립트 실행하기 위해 멈출 수 있어서 사용자가 페이지 보는데 여전히 시간이 걸림.

네 번째 ( best )

parsing하다가 defer가 있네 하고 명령만 해놓고
나머지 html을 끝까지 parsing하게 됨. 그리고 마지막에 Parsing이 끝난다음, 다운로드 된 자바스크립트를 실행.
defer이 가장 좋은 옵션. 이렇게 html parsing하는 동안 필요한 javascript 다운 받아놓고, parsing을 먼저 해서 사용자에게 페이지 보여주고 바로 이어서 자바스크립트 실행하기 때문임.

async, defer차이점은

async로 다수 스크립트를 다운로드 받게되면,
먼저 다운로드 된 파일을 실행.
정의 된 스크립트 순서에 상관없이 다운로드된 아이 실행 자바스크립트가 순서에 의존적이면 b스크립트 이용하는데 있어서 a가 먼저 선행되어야 한다면
async옵션 사용하면 문제가 될 수 있음


defer같은 경우, parsing하는 동안 필요한 자바스크립트 다운 받아놓고 순서대로 실행. 정리한 순서가 지켜져서, 원하는대로 스크립트가 실행된다는 것을 예상
head안에 defer가 제일 효율적 안전.

profile
선명한 기억보다 흐릿한 메모

0개의 댓글