브라우저 캐싱(Browser Caching)
브라우저 캐싱(Browser Caching)은 웹 페이지의 리소스(이미지, 스타일시트, 자바스크립트 파일 등)를 임시로 저장하여, 동일한 웹 페이지를 다시 방문할 때 서버에서 리소스를 다시 요청하는 대신 캐시에서 가져오는 기능이다. 이를 통해 웹 페이지의 로딩 속도를 향상시킬 수 있다.
브라우저 캐싱 동작 방식
- 웹 페이지에 접속할 때, 브라우저는 서버로부터 리소스를 요청한다.
- 서버는 리소스를 응답으로 전송하며, 이때 응답 헤더에 캐싱 설정 정보를 포함시킨다.
- 브라우저는 리소스를 캐시에 저장하고, 해당 리소스의 URL을 키로 사용하여 저장한다.
- 다음에 같은 URL을 가진 웹 페이지를 방문하면, 브라우저는 서버에 요청하는 대신 캐시에서 해당 리소스를 가져온다.
- 서버는 캐시에서 리소스를 가져오는 요청을 받고, 응답으로 304 상태 코드(Not Modified)를 전송하여 새로운 리소스를 보내지 않는 경우도 있다. 이를 통해 네트워크 트래픽을 줄이고 성능을 개선할 수 있다.
예제) 시계 만들기
[clock_one.jsp]
<html 태그>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX</title>
<style type="text/css">
div {
font-size: 20px;
margin: 10px;
}
</style>
</head>
<body>
<h1>브라우저 캐싱</h1>
<hr>
<div>클라이언트 플렛폼의 현재 날짜와 시간은
<span id="clientTime">2023년 7월 4일 12시 22분 30초</span>입니다.</div>
<div>서버 플렛폼의 현재 날짜와 시간은
<span id="serverTime">2023년 7월 4일 12시 22분 30초</span>입니다.</div>
</body>
</html>
<script 태그>
1) DHTML로 구현
브라우저가 실행된 클라이언트 플랫폼의 현재 날짜와 시간을 제공받아 태그를 변경하는 함수 displayClientTime() 생성
function displayClientTime() {
var now=new Date();
var displayTime=now.getFullYear()+"년 "+(now.getMonth()+1)+"월 "+now.getDate()+"일 "
+now.getHours()+"시 "+now.getMinutes()+"분 "+now.getSeconds()+"초";
document.getElementById("clientTime").innerHTML=displayTime;
}
displayClientTime();
setInterval(displayClientTime, 1000);//1초마다 displayClientTime 함수가 호출
→ 브라우저가 실행된 클라이언트에 따라 다른 결과를 제공할 수 있다는 문제점이 발생한다.
2) AJAX로 구현
웹프로그램을 실행하는 서버 플랫폼의 현재 날짜와 시간을 제공받아 태그를 변경하는 함수 displayServerTim() 생성
→ 서버 플렛폼의 날짜와 시간을 제공받아 사용하므로 모든 클라이언트에게 동일한 결과를 제공할 수 있다.
function displayServerTime() {
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if(xhr.readyState==4) {
if(xhr.status==200) {//서버로부터 성공적인 응답을 받았는지를 검사
document.getElementById("serverTime").innerHTML=xhr.responseText;
} else {
alert("에러코드 = "+xhr.status);
}
}
}
xhr.open("get", "clock_two.jsp");
//xhr.open("get", "clock_two.jsp?dummy="+new Date().getTime());
xhr.send(null);
}
displayServerTime();
setInterval(displayServerTime, 1000);
문제점) 동일한 웹프로그램을 지속적으로 요청한 경우 브라우저 캐싱 기능에 의해 서버에서 제공된 응답결과가 아닌 기존 응답결과 재사용할 수 있다. - 최초 응답결과를 사용하여 응답 처리
해결법1)요청 웹프로그램의 URL 주소에서 질의문자열(QueryString)를 계속 변경하여 요청한다.
해결법2)요청 웹프로그램의 응답결과가 브라우저 캐싱 기능으로 사용되지 않도록 무효화 처리한다.
[clock_two.jsp]
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//request.getProtocol() : 웹프로그램을 요청할 때 사용한 통신규약(Protocol)을 반환하는 메소드
String protocol=request.getProtocol();
//프로토콜을 구분하여 브라우저 캐싱 기능을 사용하지 않도록 설정
if(protocol.equals("HTTP/1.0")) {
response.setDateHeader("Expires", -1);//캐싱 만료기간 설정
response.setHeader("Pragma", "no-cache");//캐싱 기능 비활성화 설정
} else if(protocol.equals("HTTP/1.1")) {
response.setHeader("Cache-control", "no-cache");//캐싱 기능 비활성화 설정
}
Date now=new Date();
SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy년 M월 d일 H시 m분 s초");
String displayTime=dateFormat.format(now);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<title>AJAX</title>
</head>
<body>
<%=displayTime %>
</body>
</html>
'학원 > 복기' 카테고리의 다른 글
| [AJAX] jQuery를 이용한 AJAX 사용 (0) | 2023.07.05 |
|---|---|
| [AJAX] CSV / XML / JSON (0) | 2023.07.04 |
| [AJAX] GET/POST 방식 요청 (0) | 2023.07.04 |
| [AJAX] AJAX란? / 예제 (0) | 2023.07.03 |
| [JSP] DB 연동 예제 (0) | 2023.06.26 |
