Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML5 Application Cache VS Browser Cache
Despite being familiar with the phrase cache, you may not fully understand what it means in the context of the Web. Caching, as used in everyday speech, is the act of storing something in the event that it subsequently proves beneficial. Bulk or main storage can't keep up with client needs, thus cache is used. Cache minimizes latency, speeds up input/output (I/O) activities, and decreases data access times.
Let’s look into further for getting better understanding of HTML5 application cache vs browser cache.
HTML5 Application Cache
A web application is cached and available without an internet connection with the help of HTML5's Application Cache (AppCache). As long as the client is connected, browsers can prefetch any or all of a website asset, such as HTML files, photos, CSS, JavaScript, etc., according to the new HTML5 specification.
The user does not need to have previously viewed this content in order to fetch it. In other words, sites that have never been accessed and are thus unavailable in the standard browser cache can be prefetched by application cache. Although you are obviously wasting bandwidth to download those items initially, prefetching files can speed up the performance of the website.
Uses of Application Cache
Offline browsing − The users can visit the website whenever they want access the site when they’re offline.
Speed − When data is already stored, it is simple to access it quickly; cached resources load more quickly than uncached resources.
Reduced server load − Only newly updated resources will be downloaded by the browser from the server.
Example
In the following example we are creating a simple webpage with application cache.
<!DOCTYPE html>
<html manifest="tutorial.appcache">
<body>
Welcome to Tutorialspoint.
<p>
click to open <a href="https://www.tutorialspoint.com/index.htm"> the page</a>,
then go offline, and reload the page. The content
should still work.
</p>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of a link which is the main file. When you try to open the linked page, the next page will run. After that, if you go offline and reload the page, the content of the page remains the same.
Browser Cache
By saving a copy of frequently viewed pages and using that copy to render the page when you return to it, web browsers use caching to store HTML web pages. The computer utilizes the copy on your hard drive rather than downloading it again from the internet if the date on the page matches the date on the previously stored copy.
When you visit a website, your browser copies portions of the page and saves them to the hard drive of your computer. Your browser will also save some of the following items −
Images - logos, pictures, backgrounds, etc.
HTML
CSS
JavaScript
Simply put, "static assets" are portions of a website that do not change from visit to visit and are often cached by browsers. Browser caching offers many advantages that outweigh its drawbacks. You only need good firewalls, virus scanners, and common sense to keep your computer secure.
Difference
While AppCache offers the same speed advantages as the typical browser cache when the user is online, it was created particularly to enable websites to be made available offline.
The main distinction between this and the browser cache is that whereas the browser cache only saves the pages and associated assets you have actually visited, you can define all the assets the browser should cache in a manifest file (potentially your entire site).
98 Views
