728x90
1. head에 script를 위치시킬 경우
<html lang="en">
<head>
<script src="jquery.min.js"></script>
</head>
<body>
</body>
</html>- html 파싱 도중에 script 태그를 만나면 중간에 파싱이 멈춘다. 이 경우 script 파일이 용량이 크면 느려진다.
- script 파일이 DOM을 사용한다면 문제가 발생하여 안 되는 경우 발생
2. body 아래쪽에 script를 위치시킬 경우
<html lang="en">
<head>
</head>
<body>
<script src="jquery.min.js"></script>
</body>
</html>- html을 파싱 후 스크립트를 진행하기 때문에 빠르게 페이지를 볼 수 있다.
-단점 : 만약 웹이 script에 의존적이라고 한다면 HTML이 파싱이 되어도 의미 없다.
3. 나의 경우 2번으로 쓸 때의 문제점
- head, script , footer, sidebar 공통으로 만들고 content만 중간에 변경하여 사용하려고 한다.
- 문제점 content html 안에 스크립트 파일이 들어갑니다.
예) content 파일
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="fragment/layout">
<th:block layout:fragment="content">
<!-- Page Content -->
<script src="/js/board/board.js"></script>
<div class="container-fluid">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon1</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</th:block>
</html>- 2번처럼 sript를 body 아래 사용하게 되면 라이브러리 DateTables 가 안 되는 현상 발생
- 이유 : DateTables 라이브러리를 사용할때 jquery.min.js 스크립트가 필요 하지만 content 아래 부분에 스크립트가 있기 때문에 오류가 발생
- 문제 해결 : head 쪽에 jquery.min.js 스크립트만 head로 뺌
<head th:fragment="head">
<!-- dataTables -->
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script src="/sb-admin/vendor/jquery/jquery.min.js"></script>
</head>
참조
728x90
'개발 > thymeleaf' 카테고리의 다른 글
| spring boot thymeleaf 에 Datatables 적용하기 (0) | 2022.08.01 |
|---|---|
| Thymeleaf Layout Dialect 적용하기 (0) | 2022.07.28 |
| thymeleaf (bootstrap sb-admin)공통영역 처리 (0) | 2022.07.28 |
| [springboot thymeleaf] bootstrap sb-admin2 적용 (0) | 2022.07.27 |