HTML 페이지는 js 및 css 파일의 캐시를 자동으로 정리합니다(자동으로 버전 번호 추가)_HTML/Xhtml

HTML 페이지는 js 및 css 파일의 캐시를 자동으로 정리합니다(자동으로 버전 번호 추가)_HTML/Xhtml_웹 페이지 제작

韦小宝

풀어 주다： 2017-12-16 11:48:38

원래의

1605명이 탐색했습니다.

이 글에서는 주로 HTML 페이지에서 js 및 css 파일의 캐시를 자동으로 정리하는 방법(버전 번호 자동 추가)을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 HTML 소스 코드를 공유하고 참조하겠습니다. HTML에 관심 있는 친구들은 에디터를 따라가서 구경해보세요

웹 프로젝트 개발 과정에서 CSS, js 파일을 자주 참고하는데 파일을 업데이트한 후 캐싱 문제가 자주 발생합니다(코드가 분명히 변경되었습니다). , 브라우저에서 액세스하면 변경 사항이 없습니다. 이 경우 일반적으로 다음 두 가지 해결 방법을 사용합니다.

1. 브라우저 캐시를 수동으로 삭제

2 버전 번호를 추가합니다(예:layout.css?v= 1)

개인적으로는 브라우저 캐시를 지우려면 브라우저가 응답할 때까지 기다려야 하기 때문에 방법 2가 더 빠르다고 생각합니다. 하지만 매번 버전 번호를 변경하는 것은 귀찮기 때문에 버전 번호를 자동으로 추가하는 방법을 찾아야 합니다.

제가 수집한 방법은 다음과 같습니다.

방법 1: 버전 번호를 자동으로 추가할 수 있습니다. html through js

 <script type="text/javascript">  
document.write("<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;/css/layout.css?v="+new Date().getTime()+"&#39;>");   
</script>

로그인 후 복사

방법 2: jsp 페이지인 경우 java 코드를 사용하여 timestamp를 생성할 수 있습니다. (jsp 페이지인 경우 방법 1도 사용할 수 있지만, 이 방법이 더 편리합니다)

<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<%=System.currentTimeMillis() %>">

로그인 후 복사

방법 3: node.js자동 구성 등을 사용하는 등 다른 방법을 사용하여 버전 번호를 추가합니다.

ps: 목적 캐시를 지우는 것은 페이지의 업데이트를 제때 확인하기 위한 것입니다. 페이지를 온라인에 올릴 때(즉, 공식 환경에 배포하면 변경 사항이 적용되지 않습니다) 캐시된 페이지 때문에 버전 번호를 수정하는 것이 좋습니다. 더 빠르게 액세스할 수 있으며 업데이트가 필요할 때 고정 버전 번호를 변경할 수 있습니다.

이상은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되길 바라며 많은 응원 부탁드립니다.