Foreword
Browser cache is a browser for quick reading or saving data to avoid duplicate resource requests optimization mechanisms, efficient use of cache to avoid duplication of web browser requests and quickly read local data, speed up page display to the user as a whole . The type of browser-side caching mechanism is more, the general summed up in nine , where a detailed analysis of the nine caching mechanism under the principle and usage scenarios. Open the debug mode of eight kinds of browser caching mechanism --Application have the right of your browser.
A, http cache
http browser cache is a file-level caching mechanism based on HTTP protocol. That is for the next repeat request file, the browser can be judged according to the protocol header request files from the server or from a local file to read, Network in chrome console that is displayed is http file-level browser's cache. The following is the entire browser cache mechanism process. Mainly for repeated http request, it is determined in the case where there is a cache process is mainly divided into three steps:
- Judgment expires, if not expired, directly read http cache files, do not send http request, otherwise the next step.
- Determining whether they contain ETag, there is the if-none-match belt transmission request, unmodified returns 304, 200 modify the return, otherwise the next step.
- Determines whether or not containing last-modified, there are if-modified-since belt transmission request is invalid return 200, a valid return 304, or request directly to the server.
If the last-modified by etag and determination, even if there are at least 304 returns a http request, but returns to return content 304, instead of the file contents. Therefore, a reasonable design and implementation expires parameter can be reduced more browser requests.
Two, WebSQL
websql this way only newer chrome browser support, and it appears as a separate standardized form, has the following characteristics:
- Web Sql database API is not actually part of the HTML5 specification;
- Before HTML5 already exist, a separate specification;
- It is the data stored in the form of a database on the client, to read on demand;
- The difference is that with Storage: Storage and Cookie are in the form of key-value pairs;
- Web Sql easier to retrieve, allowing the sql statement to query;
- Let browsers implement small database storage capabilities;
- This database is integrated in the browser, the current major browsers already support base;
websql API mainly consists of three core methods:
- openDatabase: This method uses an existing database or create a new database to create database objects.
- transaction: This method allows us to control the transaction is committed or rolled back under the circumstances.
- executeSql: This method is used to perform real SQL queries.
openDatabase ways to open an existing database, it does not exist, create:
openDatabase DB = var ( 'MyDatabase', '2.0', My DB ', 2 * 1024);
openDatabasek are the five parameters: the database name, version, description, size of the database, create a callback. Create a callback can not create a database.
database.transaction () function is used to query, executeSql () for executing sql statement.
Three, indexDB
IndexedDB is able to store a considerable number of client configuration data, and using high-performance index search API on that data. Although DOM storage, for storing small amounts of data are very useful, but it has a lot to store structured data becomes insufficient. IndexedDB provides such a solution.
IndexedDB respectively, provides a single API for synchronous and asynchronous access . Synchronous API for internal purposes only supposed to use Web Workers, but not yet implemented any browser. Asynchronous API can be used in internal and external Web Workers, another browser may limit the size of 50M indexDB, the average user to save data and require large numbers of users need to search for the scene between the data.
Four, cookie
Cookie (or Cookies), refers to the data (typically encrypted) to identify the general site user, and for tracking session stored on the user's local terminal. Usually cookie is sent to the server through an http request at the head together. A cookie record is mainly composed of key values, domain, expiration date, size, composition, general user to save user's authentication information. The maximum length of the cookie and the domain name is determined by the number of different browsers, as follows:
Browser support for IE7 maximum length of the number of domain name more than 50 4095B Firefox 50 Ge Ge 4097B Opera 30 4096B Safari / WebKit unlimited 4097B
cookie information between the different domains are independent, if you need to set sharing can be set on the server side of the cookie path and domain to be shared. Browser cookie may be acquired by document.cookie, and the value can be easily read / cookie provided by js browser.
五、localstorage
localStorage is a new HTML5 local caching scheme, currently used more generally to data storage ajax returned to speed up the rendering speed when the next page opens.
The maximum length of IE9 browser more than 5M Firefox 8 above 5.24M Opera 2M Safari / WebKit 2.6M // localStorage core API: localStorage.setItem (key, value) // set the record localStorage.getItem (key) // get record localStorage.removeItem (key) // delete a single record localStorage.clear this domain () // delete all the records under the domain name
is worth noting that, localstorage size is limited, not suitable for storing too much data, if the data is stored beyond the maximum limit will complain and remove the first save of data.
六、sessionstorage
sessionStorage and localstorage similar, but the browser is closed will delete all the same api and localstorage, actual projects to use less.
七、application cache
application cahce is the most graphic assets, js, css and other static resources on the manifest file configuration. When the page opens to read local files through manifest file or file server request.
Offline access increasingly important for network-based applications. While all browsers have caching mechanisms, but they are not reliable, not necessarily always act as expected. HTML5 interface can be solved by using ApplicationCache offline bring parts of the puzzle. The premise is that you need to access the web page is accessed online at least once.
Use cache interface provides the following three advantages for your application:
- Offline browsing - users can navigate your full site while offline.
- Speed - cached resources are local, and therefore load faster.
- Less server load - the browser will only download server resource changes from happening.
Eight, cacheStorage
CacheStorage in ServiceWorker defined specification. CacheStorage can save the cache object for each serverWorker stated, cacheStorage have open, match, has, delete, keys five core method, you can respond differently to different matching cache object.
cacheStorage.has()
If you include the object cache, a promise object is returned.
cacheStorage.open()
To open a cache objects, a promise object is returned.
cacheStorage.delete()
Delete cache objects, the success of a promise object is returned, otherwise false.
cacheStorage.keys()
A string containing any of the keys, a promise object is returned.
cacheStorage.delete()
Matching the object key cache contains the string, it returns a promise object.
Nine, flash cache
In this way the basic need, this method is mainly based on flash read and write local directory browser functionality, but can also provide api call to js, the page can be invoked by js flash disk to read and write specific directory, to local the purpose of the data cache.