UrlRewriter caching issues and a series of related explorations

When developing a website function, the session cache cannot be cleared in time. A series of explorations began.

I found some good articles.

First, the difference between F5 and CTRL+F5

The difference between F5 and CTRL+F5 (for lazy people: F5 reads the cache first, but only reads the local cache within the framework. CTRL+F5 initiates a new request, skipping the cache)

background

Our company's website is a framework structure, with multiple iframes in one page. Because of this reason, every time I confidently submit the modified JS file to SVN, not long after, a backend programmer will come to me and ask: Why is JS still reporting an error? I have already pressed CTRL+F5. Did you submit it correctly? I had no choice but to go to his seat and pick up the mouse to operate: right click -> current frame -> open new frame in new tab -> CTRL+F5 -> switch to original tab -> F5. After this operation, it finally worked. The same thing has happened many times. This also proves that many programmers still don't understand the browser's cache mechanism well enough.

Basics

The root cause of the problem is that in Firefox, CTRL+F5 cannot clear the cache of the frame page. This includes the frame page itself and all its embedded elements (.js, .css, .jpg, etc.). So the real title of this article is "How to skip cache refresh of the page in the frame in Firefox". First, I want to talk about the relevant basic knowledge.

1. Read cache

Web developers often say: If there is a cache, press CTRL+F5. Or: If there is a cache, clear it with CTRL+SHIFT+DEL. Do you know how many ways a browser can read cache files? Based on whether an HTTP request is sent, I think there are two ways:

1. The browser determines from the expiration time returned by the server that the file has not expired, so it directly reads the cache file from the cache folder and displays the web page without any network connection.

2. The browser sends an HTTP request, and the request header contains the If-Modified-Since and If-None-Match fields. Let the server determine whether to read the cached file. If the server returns a 304 response, no response entity, it means that the server believes that the file has not changed. The corresponding file in the cache can be used, and the browser will read the cache at this time. (If you don't understand HTTP, you can buy a copy of <<HTTP Authoritative Guide>> to read it. Or directly read RFC2616)

I call the first way of reading cache "no request read cache" and the second way "no modification read cache".

2. Refresh method

The refresh method here refers to the ways in which a web page can be reloaded. I roughly divide it into three types based on performance:

1. Most commonly, click the browser's refresh button, or press F5

2. CTRL+F5, the function is to skip cache refresh

3. Press Enter on the browser address bar. IE classifies this request as a "navigation" operation.

In terms of cache read, the three refresh methods all perform differently. The third method usually refreshes only the main page file, and all other embedded files are "read cache without request". Most developers will not refresh the page in this way, so this experiment does not compare this refresh method.

3. The difference between F5 and CTRL+F5

The experimental part of this article only compares the two refresh methods of F5 and CTRL+F5. Here we will talk about why F5 cannot skip the cache, but the latter can. The answer is that the request headers sent are different. And there are some differences in the request headers sent by different browsers.

1. The request header of the HTTP request triggered by F5 usually contains the If-Modified-Since or If-None-Match field, or both. If the server believes that the requested file has not changed, it returns a 304 response, and the cache is not skipped.

2. The HTTP request triggered by CTRL+F5 does not have the above two headers in the request header, but has Pragma: no-cache or Cache-Control: no-cache fields, or both. When the server sees a value like no-cache, it will respond with the latest file, thus skipping the cache.

Experimental comparison

The test title is: Use F5 and CTRL+F5 to refresh the page containing iframe. The performance of the five major browsers is different. This test uses Fiddler to monitor network requests, and does not consider the impact of cache-related HTTP response headers.

The source code of the main page index.html is

Copy code

The code is as follows:

<!DOCTYPE
HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<iframe src="frame.html"></iframe>
<img src="index.jpg" />
<script src="index.js"></script>
</body>
</html>

The source code of the frame page frame.html is

Copy code

The code is as follows:

<!DOCTYPE
HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img src="frame.jpg" />
<script src="frame.js"></script>
</body>
</html>

1. IE 9

Requests with serial numbers 1-6 are F5 operations, and requests with serial numbers 7-12 are CTRL+F5 operations. It can be seen that in IE, using CTRL+F5 can make all resource files of the main page and frame pages skip the cache.

Firefox 18

Requests with serial numbers 1-6 are F5 operations, and requests with serial numbers 7-9 are CTRL+F5 operations. It can be seen that in Firefox, using CTRL+F5 can only make the main page and its resource files skip the cache, while the frame page and its resource files are completely "read from the cache without request".

3. Chrome 22

Requests with numbers 1-5 are F5 operations, and requests with numbers 7-9 are CTRL+F5 operations. It can be seen that in Chrome, similar to Firefox, using CTRL+F5 can only make the main page and its resource files skip the cache, while the frame page and its resource files are completely "read from the cache without request". The strange thing is that if CTRL+F5 is pressed once on the current page, each time F5 is pressed on the page, a Pragma: no-cache request header will be added to the HTTP request of the main page, that is, the browser will remember it. This is the case with the request with number 1. What's even more strange is that under the F5 operation, frame.html is always "read from the cache without request", which is different from other browsers. What's more troublesome is that Chrome cannot bring up the frame page with the right button.

Opera 12.50

Requests with numbers 1-6 are F5 operations, and requests with numbers 7-12 are CTRL+F5 operations. It can be seen that the performance is even more different under Opera. Even if only F5 is pressed, the request for the main page (number 1) also has the Pragma: no-cache request header. Under CTRL+F5, except for the frame page itself (number 8), all resource files skip the cache. This is closer to IE.

Safari

Requests with numbers 1-5 are F5 operations. Safari does not support CTRL+F5. Similar to Opera, F5 will cause the request for the main page (number 1) to include the Pragma: no-cache request header. Since skipping the cache is not supported, whether it is a frame page or not, in Safari you can only clear the cache by clicking the menu.

Solution

According to the above comparison, only IE browser performs as we want. Here is the solution for Firefox.

1. Install the extension
//img.jbzj.com/file_images/article/201301/2013124142805092/ReloadPassCache_jb51.rar
2. Install UC script
//img.jbzj.com/file_images/article/201301/2013124142805092/ReloadPassCache.uc.js

UC script is used by professional Firefox players. Here I will talk about how I implemented this function. Those who are interested in playing Firefox script can take a look. If you really don't understand it, you can skip it.

Copy code

The code is as follows:

//Bind keydown event in the browser main window
location
== "chrome://browser/content/browser.xul" &&
addEventListener("keydown",
function (event)
{
//If CTRL+F5 is pressed
if (event.which
=== 116 && event.ctrlKey) {
//Prevent bubbling and default operations, mainly to prevent the default refresh action. Otherwise, it will refresh twice
event.preventDefault();
event.stopPropagation();
(function (content)
{
//Bind the DOMContentLoaded event to the current tag, and refresh each frame after the main page DOM is loaded
gBrowser.mCurrentBrowser.addEventListener("DOMContentLoaded",
function self()
{
//Unbind DOMContentLoaded event
this.removeEventListener("DOMContentLoaded",
self, false);
//Traverse and refresh all frames
Array.prototype.slice.call(content.frames).forEach(function (win)
{
// Skip cache refresh
win.location.reload(true);
})
},
false);
// Start refreshing the main page
content.location.reload(true);
})(content)
}
//Capture mode, trigger the event processing function for the first time.
},
true)

After installing this extension, pressing CTRL+F5 can make all frame pages skip cache refresh just like IE. As for multi-layer frames (frames within frames), this extension does not apply. I think programmers will not be so unlucky.

UrlReriter

What is pseudo-static? 1. It is to convert the dynamic page into

Looks

It is a static page

Why use pseudo-static? 1. The browser does not include the tape? ' url 2. After opening a page (the url is exactly the same), opening it again will be very fast. Because the conversion page is done in memory, if the same page is opened again, it will not be converted again, but read directly from memory. Now the URL is changed every time a page is turned, so think about the memory usage yourself. . 3. It takes up less cup resources (refer to the previous item) 4. It looks more unified and can hide the language used for development. Under what circumstances should pseudo-static be used? 1. Only small websites and websites that are particularly concerned about browser inclusion use it (the content does not change frequently, but you hope that others can find it through search engines) 2. Portal websites can be used selectively, and communities can be used without it.

<<: Detailed explanation of Docker working mode and principle

>>: Disabled values that cannot be entered cannot be passed to the action layer