Your SlideShare is downloading. ×
simple Browser caching by http headers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

simple Browser caching by http headers

591

Published on

You can leann to how to store your content into browser cache by playing with http headers of any file . …

You can leann to how to store your content into browser cache by playing with http headers of any file .

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
591
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Browser Caching(store content into browser cache memory) Every time a browser loads it has to download all web files to display webpage. Files can be : html, css, js, img etc. Some pages might only consist of few files and can be very small size (in some kb) while some pages are having big size files (can be in mb) Example : twitter home page (2mb+) Now issues we can face : 1 : large files take longer to load and they are so painful with slow internet connection . 2 : Each file make a request to server and we know one time more request we get to server ,more work we have to do. Now Browser caching can help us to store our file locally in the user's browser . When user visits webpage first time we store file into user's browser cache , so next time when user will access that webpage we do not need to hit on server again browser can return data from it's own loacl storage cache. Simply put, caching allows you to store your web assets on remote points along the way to your visitors’ browsers. Of course the browser itself also maintains an aggressive cache, which keeps clients from having to continually ask your server for a resource each time it comes up Cache configuration for your web traffic is critical for any performant site. If you pay for bandwidth, make revenue from an e-commerce site, or even just like keeping your reputation as a web-literate developer intact, you need to know what caching gets you and how to set it up. Advantages : 1 : Reduce load/hits on web server How to do : we have to enable browser caching to edit your http headers by setting some parameters.
  • 2. Client Browser No , request to server Web Server (continue using cached copy) Browser Cache There are two primary headers , Cache-Control , Expired to perform browser caching . Cache-Control : most important header to set as it effectively ‘switches on’ caching in the browser. With this header in place, and set with a value that enables caching, the browser will cache the file for as long as specified. Cache-Control : private; content can be cache byThere are a number of situations in which Internet Explorer needs to check whether a cached entry is valid: • The cached entry has no expiration date and the content is being accessed for the first time in a browser session • The cached entry has an expiration date but it has expired • The user has requested a page update by clicking the Refresh button or pressing F5 If the cached entry has a last modification date, IE sends it in the If-Modified-Since header of a GET request message: end use client (browser). Cache-Control : public; content can be cache by end use client (browser) as well as by intermediate proxies. Cache-Control : public, max-age=31536000 ; timeperiod that how long page will be cached.
  • 3. Expires When accompanying the Cache-Control header, Expires simply sets a date from which the cached resource should no longer be considered valid. From this date forward the browser will request a fresh copy of the resource. Until then, the browsers local cached copy will be used: Note: If both Expires and max-age are set max-age will take precedence. While Cache-Control and Expires tells the browser when to next retrieve the resource from the network a few additional headers specify how to retrieve the resource from the network. These types of requests are known as conditional requests. Conditional requests Conditional requests are those where the browser can ask the server if it has an updated copy of the resource. The browser will send some information about the cached resource it holds and the server will determine whether updated content should be returned or the browser’s copy is the most recent. In the case of the latter an HTTP status of 304 (not modified) is returned. Client Browser (continue using is my file is the most resent ? Web Server Yes, Http 304 (not modified) cached copy) Browser Cache Though conditional requests do invoke a call across the network, unmodified resources result in an empty response body – saving the cost of transferring the resource back to the end client. The backend service is also often able to very quickly determine a resource’s last modified date without accessing the resource which itself saves non-trivial processing time.
  • 4. Time-based A time-based conditional request ensures that only if the requested resource has changed since the browser’s copy was cached will the contents be transferred. If the cached copy is the most up-to-date then the server returns the 304 response code. To enable conditional requests the application specifies the last modified time of a resource via the Last-Modified response header. Cache-Control:public, max-age=31536000 Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT The next time the browser requests this resource it will only ask for the contents of the resource if they’re unchanged since this date using the If-Modified-Since request header If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT If the resource hasn’t changed since Mon, 03 Jan 2011 17:45:57 GMT the server will return with an empty body with the 304 response code. Content-based The ETag (or Entity Tag) works in a similar way to the Last-Modified header except its value is a digest of the resources contents (for instance, an MD5 hash). This allows the server to identify if the cached contents of the resource are different to the most recent version. This tag is useful when for when the last modified date is difficult to determine. Cache-Control:public, max-age=31536000 ETag: "15f0fff99ed5aae4edffdd6496d7131f" On subsequent browser requests the If-None-Match request header is sent with the ETag value of the last requested version of the resource. If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f" As with the If-Modified-Since header, if the current version has the same ETag value, indicating its value is the same as the browser’s cached copy, then an HTTP status of 304 is returned. There are a number of situations in which Internet Explorer needs to check whether a cached entry is valid: • The cached entry has no expiration date and the content is being accessed for the first time in a browser session • The cached entry has an expiration date but it has expired • The user has requested a page update by clicking the Refresh button or pressing F5
  • 5. If the cached entry has a last modification date, IE sends it in the If-Modified-Since header of a GET request message: Visibility Most modern browsers include robust request/response visualization and introspection tools. The Web Inspector found in both Chrome and Safari shows the response and request headers in the ‘Network’ tab. Cache prevention Highly secure or variable resources often require no caching. For instance, anything involving a shopping cart checkout process. Unfortunately, merely omitting cache headers will not work as many modern web browsers cache items based on their own internal algorithms. In such cases it is necessary to tell the browser to explicitly to not cache items. In addition to public and private the Cache-Control header can specify no-cache and nostore which informs the browser to not cache the resources under any circumstances. Both values are required as IE uses no-cache, and Firefox uses no-store. Cache-Control:no-cache, no-store
  • 6. If the cached entry has a last modification date, IE sends it in the If-Modified-Since header of a GET request message: Visibility Most modern browsers include robust request/response visualization and introspection tools. The Web Inspector found in both Chrome and Safari shows the response and request headers in the ‘Network’ tab. Cache prevention Highly secure or variable resources often require no caching. For instance, anything involving a shopping cart checkout process. Unfortunately, merely omitting cache headers will not work as many modern web browsers cache items based on their own internal algorithms. In such cases it is necessary to tell the browser to explicitly to not cache items. In addition to public and private the Cache-Control header can specify no-cache and nostore which informs the browser to not cache the resources under any circumstances. Both values are required as IE uses no-cache, and Firefox uses no-store. Cache-Control:no-cache, no-store

×