자바스크립트 프로그래밍 2장 (Html 속의 자바스크립트)

「프론트엔드 개발자를 위한 자바스크립트 프로그래밍」 서적을 참조했으며, 2장에 대한 요약 및 정리를 진행하려고 한다.

 

inline / internal / external

• inline: html 태그 내에 직접 자바스크립트 명령어를 작성하는 방식
• internal: html 문서 내에 별도로 자바스크립트를 작성하는 방식 ex) head or body 태그 안에 script 작성
• external: html과 자바스크립트를 따로 분리해서 외부 파일로 나누는 방식

 

Script 파일 호출 방법

• head 태그 내에서 호출
  • 일반적 사용
    • 과정
      • html & css parsing
      • script 호출을 만나면 parsing을 block
      • script 요소의 코드를 완전히 해석
      • 그 다음 script 요소 해석 및 처리
      • script 처리가 끝나면 다시 html & css parsing 진행
    • 단점
      • 사용자 경험이 떨어짐 ex. 화면 렌더링이 늦어짐
        
        
  • async 사용
    • 과정
      • html & css parsing
      • async를 만나면 파일 저장 (html & css parsing은 계속 진행중)
      • 저장이 완료되면 parsing block
      • script 코드 실행 처리
      • 다시 html & css parsing 진행
    • 단점
      • 순차적 호출에 의존되는 경우 오류 발생할 가능성 존재
        
        
  • defer 사용
    • 과정
      • html & css parsing
      • defer 만나면 파일 저장 (html & css parsing은 계속 진행중)
      • html & css parsing이 모두 끝난 뒤에 순차적으로 실행 처리
        
        
        
• body 태그 맨 하단에서 호출
  • 일반적 사용
    • 과정
      • html & css parsing이 모두 끝난 뒤에 script parsing 진행
        
        
    • 단점
      • Javascript에 의존적인 프로그램이라면 정상적으로 보기까지의 시간이 소요

 

noscript

• 브라우저가 스크립트를 지원하지 않거나 비활성화되었을 때만 표시된다