最佳实践：include（或<script src =“）

Question

我对我的JavaScript和CSS进行了缩小处理。

现在，哪个更好？

<script type="text/javascript">
<?
  $r = file_get_contents('min.js');
  if($r) echo $r;
?>
</script>

或者

<script type="text/javascript" src="min.js"></script>

对于CSS的问题同样适用。

如果答案是“有时是因为浏览器同时获取文件？” 什么浏览器，以及在这两种情况下的示例时间是什么？

- Issac Kelly

---

这个标签错误地被打上了“http”。 - Andrei Rînea

Answer 1

<script type="text/javascript" src="min.js"></script>

...更好，因为用户的浏览器可以缓存文件。

向src添加一个参数，例如文件的最后修改时间戳，甚至更好，因为用户的浏览器将缓存文件，但当文件被修改时，始终检索最新版本。

<script type="text/javascript" src="min.js?version=20081007134916"></script>

- insin

---

有20-60%的用户缓存为空，是减少HTTP请求还是使用缓存结果更好呢？ - Issac Kelly

浏览器不应该从HTTP头中获取那些信息吗？ - Issac Kelly

艾萨克 - 关键词：“应该”。很多时候，JS文件的缓存非常积极。 - Greg

此外，这是更好的实践，因为它将行为逻辑与展示逻辑分离开来。如果不是HTML，则不应该出现在.html文件中。 - Tom

有20-60%的用户具有空缓存，这意味着40-80%的用户没有空缓存。 - nickf

Answer 2

大多数情况下最好包含javascript和css文件，因为这样浏览器就能缓存javascript/css文件。这样即使在其他几个页面中包含文件，浏览器也只加载一次文件。

但是只有当您通过php或Apache mod_expires为javascript和css文件设置适当的过期和/或缓存控制标头时，才会成立。

根据雅虎卓越表现的建议，只有一个例外：

唯一的例外是主页，例如Yahoo！的主页和My Yahoo！。每个会话仅有少量（可能只有一个）页面视图的主页可能会发现，内联JavaScript和CSS会导致更快的终端用户响应时间。

我强烈建议您尝试使用“YSlow for Firebug”插件。它可以回答很多关于缓存和浏览器/客户端性能的问题。

另请参见： Apache mod_expires 加速网站速度的最佳实践

{{链接1：YSlow}}

- Joe Scylla

Answer 3

请记住，浏览器最多可以同时从同一域名下载两个文件（这是现代浏览器的默认设置 - 我确定IE6和IE7，但不确定其他浏览器）。这意味着如果您的页面引用了20个小的JavaScript文件，则许多文件将按顺序下载。

补充一下已经说过的内容：请记住，如果您合并/压缩JavaScript文件，最好将它们全部合并成一个文件 - 压缩效果会更好。此外，即使您不压缩文件，请记得在Web服务器配置中打开GZIP；然后，如果您将所有JS文件合并为一个文件并将该文件包含为

- Alex

---

只要你使用了gzip，Packer就会适得其反。JSMin、YUI Compressor和Packer几乎具有相同的gzip占用空间，但是Packer在eval()时会引入客户端延迟。如果需要混淆，Packer非常好用。 - Dave Ward