[CSHTML]script 위 아래 위치차이

해내면 그만!XX·2022년 5월 7일
0

cshtml와 script 분리해서 사용시

CSHTML 코드와 분리된다. → 유지보수가 쉬워진다.
자바스크립트 파일이 캐쉬되고 나면 페이지 로드가 빨라진다.
스크립트 파일에서 디버깅을 할 수 있다.

script가 head에 위치할 경우

DOM 객체가 생성되기 전에 실행된다.
→ DOM객체에 접근이 필요한 스크립트의 경우, window.onload() 와 같은 로드 이벤트 사용해야한다.
스크립트가 너무 무거울 경우, DOM 생성이 늦어져 화면이 늦게 출력된다.
→ 문서 초기화를 위한 가벼운 스크립트를 주로 head에서 호출한다.
화면이 로드되기전에 스크립트가 실행된다.

script가 body에 위치할 경우

렌더링이 완료된 이후 스크립트가 실행된다.
→ 스크립트가 컨텐츠를 변화시킬 경우, 화면에 노출된 채로 변경된다.
DOM 생성이 완료되었기 때문에, 로드 이벤트와 같은 설정이 필요없다.
body는 위에서 아래로 읽기 때문에, 화면을 최대한 빠르게 띄우는 것이 목적이라면 script는 body 최하단에 두는 것이 좋다.

</body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="~/Scripts/File/Test.js"></script>
//이렇게 분리해서 바디 밑에 걸어두는 것이 좋다.

참조
https://velog.io/@shelly/HTML-script-%EC%84%A0%EC%96%B8-%EC%9C%84%EC%B9%98%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%B0%A8%EC%9D%B4

0개의 댓글