Table of Contents
Let’s get started.
What is Browser Caching ?
Browser cache is some what a storage for browsers. When we regular visit a site on regular basis it download website images, data, and documents for faster loading the site in future.
By storing a local copy of website and their information, browser will be able to load faster and reduces the load time. Not all pages data but they save some piece of data which reduces load time.
The downside is that when we load a website may have data and information changed but due browser caching it loads browser data which is an older version.
It is always recommended that we need to clear browser cache in a regular basis to work & run web applications efficiently.
Methods to Prevent Browser Caching
- Browser Hard Refresh [ Browser based ]
- Using .htaccess file
Browser Hard Refresh [ Browser based ]
We need to use Ctrl + F5 (or Ctrl + refresh button) to hard reload the page. It will clear a bit of cache and works. In Chrome browser, we use the above given key.
Timestamp or Some Version Number
We will use some PHP functions like time(), rand() to generate some dynamic random numbers. These random numbers we use them as a version number.
<!-- It generates the current time into a timestamp value --> <script src="/assets/script.js?ver=<?php echo time(); ?>"></script> <link href="/assets/style.css?ver=<?php echo time(); ?>"></link> <!-- It generates a random value ranges in between 1 to 10 --> <script src="/assets/script.js?ver=<?php echo rand(1,10); ?>"></script> <link href="/assets/style.css?ver=<?php echo rand(1,10); ?>"></link>
Using .htaccess file
<filesMatch "\.(js|css|jpg|jpeg|png|gif)$"> FileETag None <ifModule mod_headers.c> Header unset ETag Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate" Header set Pragma "no-cache" Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT" </ifModule> </filesMatch>
More About at Browsers Level
Delete/clear your browser’s cache and cookies
Set your browser to delete/clear each time it closes
- Bootstrap Growl jQuery Notification Plugin
- SweetAlert2 jQuery Notification Plugin
- Toastr jQuery Notification Plugin
- Get Latitude and Longitude of Location Using jQuery
- How To Integrate CKEditor 4 in HTML And jQuery
- Add Loading Icon on Processing Ajax Request
- Window localStorage Property
- Add Remove Input Fields Dynamically Using jQuery
- Download File with Timer Count
- Complete jQuery DataTable Tutorial