고정 헤더 영역
상세 컨텐츠
본문
반응형
<!-- header.mustache -->
<!DOCTYPE HTML>
<html>
<head>
<title>스프링 부트 웹서비스</title>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body><!-- footer.mustache -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html><!-- index.mustache -->
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스</h1>
{{>layout/footer}}코드를 보면, css와 js의 위치가 서로 다르다.
페이지 로딩속도를 높이기 위해 css는 header에, js는 footer에 둔다.
HTML은 위에서부터 코드가 실행되기 떄문에, head가 다 실행되고서야 body가 실행된다.
즉, head가 다 불러지지 않으면 사용자 쪽에선 백지 화면만 노출된다. 특히 js의 용량이 크면 클수록 body부분의 실행이 늦어지기 때문에 js는 body하단에 두어 화면이 다 그려진 뒤에 호출하는 것이 좋다.
반면, css는 화면을 그리는 역할이므로, head에서 불러오는 것이 좋다.
css가 늦게 호출된다면, 사용자는 css가 적용되지 않은 깨진 화면을 볼 수 있기 때문이다.
bootstrap.js의 경우 jquery가 반드시 있어야 한다.
따라서 bootstrap.js가 jquery보다 나중에 호출도되록 설계한다.
보통 이렇게 앞선 상황을 bootstrap.js가 제이쿼리에 의존한다고 표현한다.
결론
css는 header에, js는 footer에
반응형
'개인 공부 > Frontend' 카테고리의 다른 글
| javascript만의 유효범위를 만들어 사용하라. (0) | 2020.06.24 |
|---|---|
| 프론트엔드 라이브러리를 사용하는 방법 (0) | 2020.06.24 |
| Controller로 mustache 파일 접근 (0) | 2020.06.24 |
| Mustache Template (0) | 2020.06.24 |
