最佳实践：include( 或 <script src="

Posted 2023-02-24

【中文标题】最佳实践：include( 或 <script src="

【英文标题】：Best Practice: include( or <script src="

【发布时间】：2010-09-15 17:57:48

【问题描述】：

我已经缩小了我的 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 的同样问题。

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

【问题讨论】：

这被错误地标记为“http”。

【参考方案1】：

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

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

将参数添加到src 会更好，例如文件的最后修改时间戳，因为用户的浏览器会缓存文件，但在修改文件时始终会检索最新版本。

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

【讨论】：

由于 20-60% 的用户缓存为空，是减少 HTTP 请求还是缓存结果更好？

浏览器不应该从 HTTP 标头中获取该信息吗？

Issac - 关键词； “应该”。很多时候对 js 文件的缓存非常激进

此外，这是一种更好的做法，因为它将行为逻辑排除在表示逻辑之外。如果它不是 html，那么它不属于 .html 文件。

“20-60% 的用户有一个空缓存” - 这意味着 40-80% 没有有一个空缓存。

【参考方案2】：

最好包含 javascript 和 css 文件，因为这样浏览器就可以缓存 javascript/css 文件。这样，即使您将文件包含在其他几个页面中，浏览器也只会加载一次文件。

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

根据 Yahoo Exceptional Performance 的建议，只有一个例外：

最好使用内联的唯一例外是主页，例如 Yahoo! 的首页和 My Yahoo!。每个会话只有很少（可能只有一次）页面查看的主页可能会发现内联 JavaScript 和 CSS 可以加快最终用户的响应时间。

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

另见：

Apache mod_expires

Best Practices for Speeding Up Your Web Site

YSlow

【参考方案3】：

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

补充已经说过的内容：请记住，如果您合并/缩小您的 javascript 文件，最好将它们全部合并为一个 - 压缩效果会更好。此外，即使您不压缩文件，请记住在您的 Web 服务器配置中打开 GZIP；然后，如果您将所有 JS 文件合并为一个并将该文件包含为 ，则 GZIP 压缩效果最佳（因为将两个 JS 文件压缩在一起比单独压缩每个文件会产生更好的结果）。

如果您正在寻找一个好的 JS 缩小实用程序，请尝试 JS Packer (http://dean.edwards.name/packer/)

【讨论】：

只要你在压缩，Packer 就会适得其反。 JSMin、YUI Compressor 和 Packer 都具有几乎相同的 gzipped 占用空间，但 Packer 引入了客户端延迟，因为它是 eval()'d。如果您需要混淆，Packer 非常棒。