CSS도 연결한 이후 자바스크립트 연결 방법에 대해서도 알아보자
자바스크립트 연결의 경우 크게 3가지 경우가 있으며 각 위치에 따라서 차이가 존재 한다
1. 외부에 자바스크립트 파일이 존재하는경우
1) HTML코드와 분리 되어있어서 유지 보수가 쉽다.
2)자바스크립트 파일이 캐시(자주사용되는 파일이나 데이터를 미리복사하는 것)되고 나면 페이지 로드가 빠르다.
2. head에 있는경우
<head>
<script> ~ 코드내용 ~ </script>
</head>1)이 경우 DOM객체(Document Object Model)가 생성되기전에 실행이 된다
2) 스크립트가 너무 무거울경우 DOM생성이 늦어져서 화면이 늦게 출력된다.
3.BODY에 위치할 경우
...
<script>
~ 코드내용 ~
</script>
</body>1)렌더링이 완료된 이후에 스크립트가 실행
2) DOM이 생성완료 되었기 때문에 코드 이벤트와 같은 설정이 필요없다.
결론적으로
body는 위에서 아래로 읽기 때문에 최대한 빠르게 띄우는 것이 목적이라면 스크립트는 body최하단에 두는것이 좋다.
이유는 브라우저의 동작방식에 있다.
1.브라우저는 HTML을 읽기 시작한다.
2.HTML 파싱(parsing : 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업)
3.DOM 트리를 생성한다.(DOM : 문서 객체 모델 (=Document Object Model) - 웹페이지에 대한 인터페이스로, HTML의 각 항목을 계층(=트리)으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스)
4.Render 트리를 생성한다.
(DOM 트리 + CSS의 CSSOM 트리 결합)
5.브라우저에 표시된다.
