Browser cache topics

Browser cache is very important. For an interaction, more than 95% of the time is spent on processing the front-end. If the front-end performance can be improved, it is very helpful to improve the performance of the entire system. This topic focuses on how to better use browser cache, as well as some future browser cache development trends, such as globalstorage.

Factors affecting the local cache of browsers and Solutions
Factor: subdomain name
Description: berg.sharej.com/img/123.gif. If the image is shown in the format of sharej.com/berg/img/123.gif, the image will be duplicated. Similarly, different case sensitivity causes repeated downloads.
Solution: Use a single address to avoid repeated downloads.

Factor: Meta Header
<Meta HTTP-EQUIV = "Pragma" content = "no-Cache"> or use a script to output a header that requires the browser not to cache the web page
Solution: use it as needed.

Factor: Firefox Cache Mechanism
Specific description: even if no-Cache header is applied, Firefox must first cache and decide whether to use it based on the expiration settings. Via
Solution: Generally, no solution is required. Because Firefox caches these files only for forward and backward operations.

Factor: Random file name
Description: Can I use ABC. js? 2007120. A safer method is abc_v071201.js to reload the browser (which can be implemented through address rewriting ).
Solution: After the JS and CSS files are upgraded, you can perform this operation if necessary to avoid the old files cached by your browser.

Factor: innerhtml
Specific description: IE6 ignores the cache policy when using innerhtml in window. onload to dynamically insert images. When loading multiple identical images at a time, the request is repeated.
Solution: Avoid using innerhtml to insert images in window. onload.

Factor: the bug that IE6 cannot cache background images
Specific description: When "temporay Internet Files" in IE6 is set to "check when this page is accessed", the background image cannot be cached. When the mouse slides over the link and the background image is replaced, will flash.
Solution: document.exe ccommand ("backgroundimagecache", false, true); execute this statement in IE6. An error is reported when Firefox is executed (which can be solved by try-Cache ). Expression can also achieve this effect. It is best to use CSS Sprites to solve the problem.

Implementation of pre-cached images on the browser
Use Image () object Cache
Create a new image () object using JavaScript, and then pass the image URL you want to preload to this object. Load the data to the page synchronously using the onload () event handle. Demo

Cache multiple images through arrays (arrays)
Defines the variable I and the image () object named imageobj. Then the new array images [] is defined. Each array element stores the address source for the image to be preloaded. Finally, we use a for () loop to traverse the entire array and specify an image () object for each element to preload the image to the cache.
Demo

Both of the above methods require the support of Javascript in the browser for normal caching.

Hide the image to be cached using CSS
The display: None attribute of CSS is used to hide the image.
Demo

Use the background image in CSS
You can define a background style for an element and move the background image to an invisible position. IE6 is invalid when "temporay Internet Files" is set to "check this page each time.
Demo
Both of the above methods require the browser to properly interpret CSS for normal use.

Pre-loading of images in the album
The above mentioned four methods of pre-caching images. I personally feel that the second method is the best. Because the second method can easily control the loading time, without affecting the speed of opening the previous page, and can be used normally as long as the browser that supports Js.
Demo
This example is relatively simple, but it can be pre-loaded. When you open a thumbnail page, as long as the cache browser is enabled, the large image will be loaded one by one after the page ends. However, some specific loading policies have not been considered.

Switch over the background image
As mentioned above, when "temporay Internet Files" in IE6 is set to "check when this page is accessed", the background image cannot be cached, when the mouse slides over the Link (whether or not there is a background image switch), it will flash. Other browsers can easily set the background image through the hover of the hyperlink to move the mouse over and switch the background image.

Causes of IE6 flash
First, summarize the causes of flash in IE6, and finally provide a solution.

Define a style like this:

. Example {
Background-image: URL (some image );
}
The following are all causes of flickering:

Background
When this element's background is set to the following value, it will flash:
Background-color: transparent
Background-repeat: Repeat
Background-position: flashes as long as it is set.

Area of the element
If this element is not blinking, the area of the element must be greater than 2500px ^ 2. =. =

. Example {
Width: 50px;
Height: 50px;
Background-image: URL (some image );
}
. Example {
Width: 50px;
Height: 40px;
Background-image: URL (some image );
}
The above style won't flash, and the following style will flash ......

Whether the image is transparent GIF
When the background image is a GIF with a transparent effect, it will flash.

Cross-browser solution
<SCRIPT>
Try {
Document.exe ccommand ('backgroundcacache ', false, true );
} Catch (e ){}
</SCRIPT>
<Style>
A {Background: transparent url(logo.gif) No-repeat scroll left bottom; line-Height: 300px; padding: 30px ;}
A: hover {background-position:-2000px 100% ;}
</Style>
<A href = "/"> & nbsp; </a>
The logo is a large image that contains the original image and flipped image. Passed the test in IE6, IE7, firefox2.0, and opear9.

Use of userdata in IE
Cookies can also play the role of caching data on the client. However, the cookie size limit is very strict (4 K), so it cannot be used to cache too much user data. The emergence of userdata solves this problem. The data size in the userdata storage area of each webpage can reach 64 KB, and each domain name can reach 640 kb.
IE 5 or above supports userdata. On the user machine, userdata is stored in this location by default: C: documents and settingsyour login nameapplication datamicrosoftinternet assumeruserdata
Userdata behavior allocates a userdata storage area for each object through sessions. Use the SAVE and load methods to save the userdata stored in the cache. Once the userdata storage area is saved, even if the IE browser is closed or refreshed, the next time you enter the page, the data can be reloaded without being lost.
When userdata is applied to HTML, Head, title, and style tags, an error occurs when the SAVE and load methods are used.

Before use, you must declare the style:

Or use the script to bind:
Object. style. Behavior = "URL ('# default # userdata ')"
Object. addbehavior ("# default # userdata ")

The userdata member and method table are listed in csdn.

Demo

Scope of userdata
When I execute u once on the/FORUM/a page. save ("Sss", "just a forum", 365, "Forum"); an SSS [1] is displayed in the userdata directory. XML file with the following content:

At the same time, when you execute alert (U. Load ("Sss", "Forum"); on the/FORUM/B page, you can get the content in userdata. On the "/" page, the content just stored in cannot be obtained. Similarly, the content cannot be obtained in "/topic/1234.
Similarly, execute U. Save ("Forum", "just a forum", 365, "value"); and then alert returns the same result as the preceding one.
I personally think that userdata is related to path like cookies. All pages in the same directory can share the same attribute in the same file ). Therefore, pay attention to the directory structure when using it.

Userdata timeout settings
Expires is used to set the timeout value of userdata. The timeout setting of userdata is for a file. Once it expires, the entire file expires and the expiration time of each attribute cannot be set separately.

Other problems
If userdata is manually deleted, the following error occurs when o. getattribute () and O. setattribute () are executed: "error: Invalid Data ." Before using these two methods, try-catch O. Load () can block this error, but userdata cannot be used normally unless you modify the stored file name.

When deleting userdata, you cannot use new date (0) to create an expiration time like deleting a cookie. 315532799000 is GMT, January 1, December 31, 1979. This is the first effective expires time to delete userdata.

If userdata is repeatedly deleted or written in a browser process, the userdata space will soon be fully occupied, because each deletion is a logical deletion, And the deletion will not be performed until the browser process ends.

Non-IE browser "userdata" SOLUTION
Sessionstorage
Starting from Firefox 2.0, HTML5 is supported, and sessionstorage is also supported. This is an object that can only be used within the session lifecycle, the biggest purpose is to save some temporary data to prevent users from accidentally refreshing the page. Meanwhile, when the browser accidentally closes and recovers the page, the information stored in sessionstrorage is also restored. Firefox allows a domain name to store KB data by default.
Demo (it must be uploaded to the server for normal operation)

The following is an HTML5 interface:
Interface storage {
Readonly attribute unsigned long length;
Domstring key (in unsigned long index );
Domstring getitem (in domstring key );
Void setitem (in domstring key, in domstring data );
Void removeitem (in domstring key );
};

Scope Problems
Sessionstorage in Firefox can be stored on any page under the domain name, and projects under the entire domain name can be used.

Other problems
After the browser crash, the session on the restore page also disappeared (firefox2.0 ).

Globalstorage
This is also proposed in HTML5. After the browser is closed, the information stored in globalstorage can still be retained, and the storage capacity is much larger than that of userdata in IE. The storage capacity of a domain is 5120 kb. Like sessionstorage, information stored on any page in the domain can be shared by all pages.

Scope
Globalstorage ['z .baidu.com '] All pages under z.baidu.com can use this space.
Globalstorage ['Baidu. com'] All pages under Baidu.com can use this space.
Globalstorage ['com']: This space can be shared by all Com domain names.
Globalstorage ['']: space available for all pages

Currently, Firefox only supports globalstorage in the current domain. If a public domain is used, a similar error "security error" Code: "1000" may occur ".

Expiration time
According to the HTML5 description, globalstorage will expire only when there is a security issue or when the user requires it. the browser should avoid deleting the data that is being accessed by the script, and userdata should be writable by the user.

Therefore, our scripts must be able to control the expiration time. They can store the expiration time in a certain region of globalstorage and determine whether the expiration time is expired during load. This can solve the expiration time problem to some extent.

Storage expiration time
Save = function (content, expires, attribute, filename ){
VaR date = new date ();
Date. setseconds (date. getseconds () + expires );
Globalstorage [domain] [filename + "_ expires"] = date. gettime ();
}
When load is used, determine whether it expires. If it expires, delete it:
Load = function (attribute, filename ){
VaR date = new date ();
If (parseint (globalstorage [domain] [filename + "_ expires"]) <parseint (date. gettime ())){
D. Remove (attribute, filename );
D. Remove (attribute, filename + "_ expires ");
}
Return globalstorage [domain] [filename + attribute];
}