Browser caching issues in FAQ Web development __web

Reprint please specify the Source: http://blog.csdn.net/u012250875/article/details/78332683 1. Problem background

In doing web development, often encountered such a problem: has been modified CSS style or JS code, F5 refresh the browser, found that the code has just been modified did not take effect, this is known to be caused by the cache, the browser so designed to save user traffic, because resource files generally more stable, a large number of But the amount of modification is small. Here are five solutions and their pros and cons. 2. How to Solve

Method One

Simple and rough at the same time, press and hold ctrl-shift-delete three keys to call "clear browsing data" function, the effect of the following figure (different browsers are similar), mainly check the cached pictures and files, clear data, and then refresh, this method is not recommended, because the real users are small white, Resource file updates should give users no sense of the latest resources, and each time you clear the browsing data, the resources of the other sites you visit are emptied. Not recommended.

method Two : Use CTRL+F5 to force the refresh of the current Web site, the problem is the same as method one, slightly better than method one, the method is used to strongly brush the current Web site alone. Not recommended.

method Three : When referring to a JS or CSS file in the JSP code, add a parameter (random number or current time) after the reference path, as shown in the following example:

<script type= "Text/javascript" src= "/js/yourjs.js?rd=<%=math.random ()%>" ></script>

So in every time you press F5, SRC changes, the browser will request JS file. The downside is that every time a user refreshes the page, the resource file is downloaded again, and even if you don't change the resource file at all, the advantage is that it's easy to handle. Not very recommended.

method Four : All JSPs refer to the same taglib, set a version number in the common JSP, and refer to the CSS or JS path, modifying the version number as needed each time a new version is released. If the resource file is updated, modify the version number when it is published, and if there is no update, do not modify the version number, so it is highly controllable. Recommend this method.
The operation is as follows:
1 All JSPs are introduced into the taglib.jsp

<%@ include file= "/web-inf/common/taglib.jsp"%>

2) Set a version number in taglib.jsp

<%@ taglib ...%>
//The service is generally for some common taglib, such as C,fn//<%@
... taglib%>
"<c:set" Value= "${pagecontext.request.contextpath}"/>
<c:set var= "version" value= "20170906"/>

3 when referencing a resource in a JSP, artificially adding a version number

<link rel= "stylesheet" type= "Text/css" href= "${ctx}/static/css/your.css?v=${version}" >
<script src= "$ {CTX}/static/js/your.js?v=${version} "></script>

such as after the operation after the revision of the value of version, published to the production, user access, due to the SRC or the v parameter in the href change, the browser will download the resource file again.

Note: Parameter name V is optional, no special requirements

method Five : Setting the browser to not cache or using a plug-in to not cache is simply a convenience for the developer and does not benefit the user.

is not recommended