Prevent the browsers to use old cached CSS and JS files
Browser cache is very useful when users download the same CSS and JS files multiple times. Some browsers, however, use the old CSS and JS files from the cache, even though they have been updated. This may lead to unpleasant situations, when the pages are displayed to the user with the wrong styles or pages will work incorrectly.
Fortunately, these unpleasant situations is easy to avoid and let the browsers cache files as long as they are changed.
Basic example with static HTML-pages
Original CSS ja JS file names:
<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test2.css" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test3.css" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test4.css" /> <script type="text/javascript" src="/js/test1.js"></script> <script type="text/javascript" src="/js/test2.js"></script> <script type="text/javascript" src="/js/test3.js"></script>
Changed CSS ja JS file names:
<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?20091105" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?20091105" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?20091105" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?20091105" /> <script type="text/javascript" src="/js/test1.js?20091105"></script> <script type="text/javascript" src="/js/test2.js?20091105"></script> <script type="text/javascript" src="/js/test3.js?20091105"></script>
The same example with a PHP and adding last modified time stamp after the file names
PHP code:
<?php ... echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?' . date("YmdHis", filemtime("/css/test1.css")) . '" />'; echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?' . date("YmdHis", filemtime("/css/test2.css")) . '" />'; echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?' . date("YmdHis", filemtime("/css/test3.css")) . '" />'; echo '<link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?' . date("YmdHis", filemtime("/css/test4.css")) . '" />'; echo '<script type="text/javascript" src="/js/test1.js?' . date("YmdHis", filemtime("/js/test1.js")) . '"></script>'; echo '<script type="text/javascript" src="/js/test2.js?' . date("YmdHis", filemtime("/js/test2.js")) . '"></script>'; echo '<script type="text/javascript" src="/js/test3.js?' . date("YmdHis", filemtime("/js/test3.js")) . '"></script>'; ... ?>
Output HTML look like this:
<link type="text/css" rel="stylesheet" media="all" href="/css/test1.css?20091105110212" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test2.css?20091105110212" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test3.css?20091105110212" /> <link type="text/css" rel="stylesheet" media="all" href="/css/test4.css?20091105110212" /> <script type="text/javascript" src="/js/test1.js?20091105110212"></script> <script type="text/javascript" src="/js/test2.js?20091105110212"></script> <script type="text/javascript" src="/js/test3.js?20091105110212"></script>
The good thing about this implementation is that if only one file is changed, then all file names are not changed, but just the right file name.
Related posts:
- Delete files permanently with shred command in Linux – Remove absolutely
- CSS compression with own PHP class VS CSSTidy
- Linux Encrypt Files/Decrypt Files – GPG Interactive/Non Interactive Modes
- Linux Tip: How to handle a files with a dash as first character from command line
- Linux locate command: Find Files and Directories Quickly and Efficiently
