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

时间:2013-12-29 06:19:09

标签: javascript performance browser performance-testing

我的JSP页面中有一个脚本。脚本代码非常大,我开始知道在JSP代码中拥有如此大量的脚本代码并不是最佳实践。

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

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

2 个答案:

答案 0 :(得分:0)

首先,我会查看我的服务器日志,如果每次加载主页时都没有加载.js文件,那么您的脚本可能会被缓存。但是要更直接地提出你的问题 -

我会在我的.JS文件中放入一些动态代码,这些代码会创建一个函数来对服务器进行回调并发送最后加载时的日期/时间戳。由于我不知道您正在编写哪种语言,因此我将使用一些概念符号,其中<<timeloaded>>被替换为url友好日期/时间值:

yourfile.js中的

包括这样的内容......

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

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

将该时间值插入到您的文件中可以采用多种不同的方式,这超出了您的问题的范围。

答案 1 :(得分:0)

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

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

要回答问题的第二部分,是的,确保您发送标题以使浏览器缓存您网站上任何静态的内容绝对是一个好主意。您无法使用Javascript来设置缓存标头,这需要由Web服务器完成。如何完全取决于您的环境,但可以通过编辑Web服务器配置来完成,或者如果您使用的是服务器端语言(如PHP),则可以通过脚本完成。