caching JavaScript files

Question

Which is the best method to make the browser use cached versions of js files (from the serverside)?

Answer 1

From PHP:

function OutputJs($Content) 
{   
    ob_start();
    echo $Content;
    $expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere
    header("Content-type: x-javascript");
    header('Content-Length: ' . ob_get_length());
    header('Cache-Control: max-age='.$expires.', must-revalidate');
    header('Pragma: public');
    header('Expires: '. gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
    ob_end_flush();
    return; 
}

works for me.

As a developer you'll probably quickly run into the situation that you don't want files cached, in which case see Help with aggressive JavaScript caching

Answer 2

or in the .htaccess file

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000

Answer 3

I am heavily tempted to close this as a duplicate, this question appears to be answered in many different ways all over the site:

• http://stackoverflow.com/questions/301284/will-a-script-in-htmls-script-tag-with-extension-php-be-cached
• http://stackoverflow.com/questions/206783/when-does-browser-automatically-clear-javascript-cache
• http://stackoverflow.com/questions/54475/help-with-aggressive-javascript-caching
• http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers
• http://stackoverflow.com/questions/3224/how-can-i-make-the-browser-see-css-and-javascript-changes

Answer 4

In your Apache .htaccess file:

#Create filter to match files you want to cache 
<Files *.js>
Header add "Cache-Control" "max-age=604800"
</Files>

I wrote about it here also:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

Answer 5

Have a look at Yahoo! tips: http://developer.yahoo.com/performance/rules.html#expires.

There are also tips by Google: http://code.google.com/speed/page-speed/docs/caching.html