如何检查我的JavaScript是否正确缓存

Question

我的JSP页面中有一个脚本，该脚本代码非常大，我知道在JSP代码中包含如此大量的脚本代码不是最佳实践。

我已将脚本分离为一个js文件，并将该js文件包含在JSP页面中。 我有以下问题：

1. 如何验证我的js文件是否已缓存？ 有没有可用的浏览器工具来检查我的js文件是否已被缓存？
2. 我应该编写任何代码来缓存js文件吗？

Answer 1

首先，我将查看服务器日志，如果每次加载主页时都未加载.js文件，则可能已缓存了脚本。 但更直接地回答您的问题-

我会在.JS文件中放入一些动态代码，以创建一个函数以对服务器进行回调并发送上次加载时间的日期/时间戳。 由于我不知道您使用的是哪种语言，因此我将使用一些概念性的符号将<<timeloaded>>替换为url友好的日期/时间值：

在yourfile.js中包括这样的内容...

function (){
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "lastload.htm?<<timeloaded>>", false );
}()

因此，当浏览器第一次请求yourfile.js时，服务器端应用程序代码会将时间动态插入js文件中。 然后，每次浏览器“加载”该文件时，它将调用您的服务器以查找名为lastload.htm的文件，并传递.js文件的加载时间。

可以将时间值插入文件中的方法很多，这超出了您的问题范围。

Answer 2

如果您使用的是Chrome，请打开检查器（右键单击“检查元素”），然后单击“网络”选项卡。 现在重新加载页面。 您应该看到为该页面加载的所有元素的列表。

要确定是否已缓存Javascript（或任何元素），您要查找的是“大小”列。 浏览器缓存的数据将显示“（来自缓存）”作为“大小”值。 如果您看到Size的其他内容，则表示它是通过网络加载的，不是从浏览器缓存加载的。

要回答问题的第二部分，是的，确保发送标头绝对是个不错的主意，以使浏览器在您的网站上缓存任何静态内容。 您不能使用Javascript设置缓存标头，而这需要由Web服务器来完成。 具体操作方式完全取决于您的环境，但是可以通过编辑Web服务器配置或脚本（如果使用的是服务器端语言，例如PHP）来完成。