On how to effectively use browser cache-how to avoid the browser from caching static files.

For dynamic files, such as index. asp? Id =... or index. aspx? Id =... believe in experiencedProgramAttackers know how to disable the browser from caching data.
But for static files (CSS, JPG, GIF, and so on), where do we need to disable browsers from caching them?

The topic of this article is how to prevent caching, especially how to prevent static files from being cached ..

In re: some suggestions for adjusting the URL of the blog Garden, the second-level domain name is not conducive to the client browser cache, I mentioned how to maximize
The browser cache function is used to increase client browsing speed and reduce server load.

But things are always divided into two parts, and not all applications require caching. Sometimes our data is cached, which causes us trouble.

For dynamic data (those generated from the database), we can disable browser caching using the following methods.

' ASP is used as an example to disable caching.

Response. Buffer =   True  
Response. expiresabsolute =   Now () -   1  
Response. Expires =   0  
Response. cachecontrol =   " No-Cache "  
Response. addheader " Pragma " , " No-Cache "  

For Ajax requests (static data or dynamic data ):

// You can use either of the following three methods:
XMLHTTP. setRequestHeader ( " Cache-control " , " No-Cache " );
// Or
XMLHTTP. setRequestHeader ( " If-modified-since " , " 0 " );
// Or
XMLHTTP. Open (URL + ' ? RND = ' + Math. Random (),....)

If prototype is used. JS. Use the Code
New Ajax. request (URL, {method: "Get", requestheaders: [ " cache-Control " , " NO-Cache " ]})
or
New Ajax. request (URL, {method: "Get", requestheaders: [ " If-modified-since " , " 0 " ]})

Under what circumstances should I disable static file Caching:
1. js and CSS that may be changed frequently.
For example, for an HTML file, test.html is in Version 1.0. This may be the case.
<SCRIPT src = "common. js"> </SCRIPT>
V1.1 after modification:
<SCRIPT src = "common. js"> </SCRIPT>
<SCRIPT src = "foo. js"> </SCRIPT>
A new Foo. js file is added, and common. JS is modified. The new class is defined in common. JS, and common. JS is used in Foo. js.

In this case, if you have browsed HTML files of version 1.0 before, the browser automatically caches common. js
When he browses the new version, it uses Foo. js of V1.1 and common. js of V1.0, which will cause a script error.

Solution:
Because CSS and JS are loaded using the <SCRIPT src =...> method, it is difficult to use ASP's server to disable caching. It is also difficult to use ajax to disable caching by setting HTTP request headers.

It seems that the random number is a good method.

// Method 1:
Document. Write ( " <SCRIPT src = 'test. js? RND = " + Math. Random () + " '> </S " + " Latency> " )

//Method 2:
VaRJS=Document. createelement ("Script")
JS. SRC="Test. js"+Math. Random ()
Document. Body. appendchild (JS)

However, if a random number is used, the JS file will never be cached and must be loaded from the server again each time, even if no changes are made.
If you visit a foreign website frequently, you can see that they usually use this method to solve the problem:
<SCRIPT src = "test. js? Ver = 113 "> </SCRIPT>
Among them, 113 of Ver = 113 is the version number, which is generally generated using CVS or other tools.

In this way, static files are cached when the cache is applied. When the version is updated, the latest version is obtained and the cache is updated.
For images to effectively use and update the cache.

Alas, I don't know how many people are repeatedly asking the same question in the csdn web version. "How to clear the browser cache of the client through program deletion ".........

 

To be continued:

Next article: using browser cache to improve user experience .... Ajax mode preloading

Please stay tuned. After I finish writing, add the link.