缓存 JavaScript 文件

IT技术 javascript http caching
2021-01-30 13:42:24

哪个是使浏览器使用缓存版本的 js 文件(来自服务器端)的最佳方法?

6个回答

或在 .htaccess 文件中

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
^ 这个问题没有提到 Apache,所以......任何东西都是有效的,C 也将是有效的。
2021-03-30 13:42:24
2021-04-04 13:42:24

我刚刚完成了我的周末项目cached-webpgr.js ,它使用 localStorage / Web 存储来缓存 JavaScript 文件。这种方法非常快。我的小测试显示

  • 从 CDN 加载 jQuery:Chrome 268ms,FireFox:200ms
  • 从 localStorage 加载 jQuery:Chrome 47ms,FireFox 14ms

实现它的代码很小,你可以在我的 Github 项目https://github.com/webpgr/cached-webpgr.js 中查看

这是如何使用它的完整示例。

完整的库:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

调用图书馆

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});

来自 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; 
}   

为我工作。

作为开发人员,您可能很快就会遇到希望缓存文件的情况,在这种情况下,请参阅使用主动 JavaScript 缓存的帮助

在您的 Apache .htaccess 文件中:

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

我也在这里写过它:

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