Browser cache topic [reprint]

ArticleDirectory

• Background
• Area of the element
• Whether the image is transparent GIF
• Scope Problems
• Other problems
• Scope
• Expiration time

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 that affect the local cache of the browser and the solution factors: 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.

Use the image () object cache function to pre-Cache images on the browser.

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:

1. . Example {
2. Background-image: URL (some image );
3. }

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. =. =

1. . Example {
2. Width: 50px;
3. Height: 50px;
4. Background-image: URL (some image );
5. }

1. . Example {
2. Width: 50px;
3. Height: 40px;
4. Background-image: URL (some image );
5. }

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

1. <SCRIPT>
2. Try {
3. Document.exe ccommand ('backgroundcacache ', false, true );
4. } Catch (e ){}
5. </SCRIPT>
6. <Style>
7. A {Background: transparent url(logo.gif) No-repeat scroll left bottom; line-Height: 300px; padding: 30px ;}
8. A: hover {background-position:-2000px 100% ;}
9. </Style>
10. <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, you must 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,You cannot set the expiration time for each attribute separately.

Other problems

If userdata is manually deleted, an error is returned when o. getattribute () and O. setattribute () are executed:"Error: the data is invalid ."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 occupiedBecause each deletion operation is a logical deletion, the deletion operation 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];
}

A client-cached instance

Mongoj will launch a function recently, which will use a large number of client caches. Wait for a while! Busy at work. I don't have much time to go home at night.

References

Dom storage answers: http://ejohn.org/blog/dom-storage-answers/
Dom storage: http://ejohn.org/blog/dom-storage/
Mozilla Developer Center: http://developer.mozilla.org/en/docs/DOM:Storage
Minimize flickering CSS background images in IE6: http://fivesevensix.com/studies/ie6flicker/