如果一个外部包含的文件（例如 JavaScript 或 CSS）在一个页面上包含两次（或更多），是否会有两个（或更多）网络请求？答案

【问题标题】：If an externally included file (e.g. JavaScript or CSS) is included twice (or more) on a page will there be two (or more) web requests?如果一个外部包含的文件（例如 JavaScript 或 CSS）在一个页面上包含两次（或更多），是否会有两个（或更多）网络请求？
【发布时间】：2010-11-16 02:55:31
【问题描述】：

假设因为有条件的注释或只是粗心，某些浏览器甚至所有浏览器的用户都存在相同的包含文件。例如：

<!--[if lte IE 8]>
     <script src="mygreatincludefile.js" type="text/javascript"></script>
<![endif]-->

<!--[if lte IE 6]>
     <script src="mygreatincludefile.js" type="text/javascript"></script>
<![endif]-->

当页面被渲染时，浏览器是否知道不再费心去抓取该文件，或者它会发出请求，浏览器将返回 304（未修改）。最好的情况似乎是第一个，可接受的情况似乎是第二个选项，而最坏的情况是因为浏览器不知道它刚刚抓取了这个，所以想要发出一个新的请求。

你有亲身经历过这种事情吗？你期望会发生什么？你观察到发生了什么？我是不是应该不用担心这一点，并在记住可能是我的情况下打击做这件事的人？

【问题讨论】：

标签： html performance http browser caching

【解决方案1】：

在大多数用户代理（包括 IE）中，文件应该被获取一次，但在 JavaScript 的情况下，代码将被执行两次。最好的例子是<img> 标签。图片会加载一次，但可以多次使用。

至于你的例子。两次做同样的操作似乎是徒劳的。您基本上是在说“如果小于或等于 IE8”，然后继续加载“如果小于或等于 IE6”相同的文件，如果它触发了第一条规则，它将自动加载。

【讨论】：

我知道。我意识到它在做什么。我只是想提出这个问题，因为我在这里没有看到这个问题，而且这些天这是一个很大的话题。我还想知道我应该对自己有多恼火（当然，如果我确实这样做了）。谢谢！

【解决方案2】：

查看Fiddler 以调试您的http 活动。还有 ie6/7 的 IE Developer Toolbar（ie8 有自己的）或 FireFox 中的 FireBug。

这些将使您能够查看您的请求并确认您的假设和其他人的响应。

现在，取决于是否指定了任何 http 标头通知浏览器不要缓存任何内容，然后假设如果该资源在磁盘上不存在，则只会对该资源发出 1 个请求。上述实用程序将能够为您确认这一点。

【讨论】：

【解决方案3】：

当以这种方式包含两次相同的 CSS 文档时，Chrome Inspector 会显示给定 CSS 元素的重复和冗余条目。不过我不确定这会如何影响浏览器的性能。

【讨论】：