性能与模块化：将 JS 集成到 PHP 中或分离 custom.js答案

【问题标题】：Performance vs modularity: Integrate JS into PHP or separate custom.js性能与模块化：将 JS 集成到 PHP 中或分离 custom.js
【发布时间】：2012-09-06 17:18:04
【问题描述】：

我是 Javascript 和一般开发的新手，并且有一个绝对初学者的问题：我想更多地了解以下两个星座的优缺点，尤其是在执行速度和服务器负载/请求方面。

将所有自定义 JS 代码放入 PHP 代码中并从那里调用它
将所有自定义 JS 代码放在 custom.js 中，然后在 PHP 中调用 JS 函数

一方面，我更喜欢将我的所有 JS 代码分开以保持整洁，但另一方面，我认为由于额外的服务器请求，加载页面需要更长的时间。当我将所有代码放在自定义 JS 文件中时，会不会有明显的速度差异？有没有什么特定的场景建议把 JS 放在 PHP 里面或者分开放置？

谢谢

【问题讨论】：

定义“显着”。如果它在一个单独的文件中，则对您的 Web 服务器还有另一个请求，但从用户的角度来看，它可能可以忽略不计，除非他们的连接非常糟糕。单独的文件也有助于重用。不在乎的用户永远不会“注意到”。监视请求的高级用户每次都会知道，因此他们会“注意到”但他们可能不会“关心”。
将 JS 放在一个单独的文件中会更有效，因为它会异步加载，PHP 不必再把它放在页面上。可能我有一个非常小的差异，但是将 JS 分开也会大大提高您的可读性。如果您有可在多个页面上使用的功能，也有助于分开。如果没有必要，永远不要做两次！
不太确定这里的问题... php 运行服务器端，除非您在谈论服务器端 js 实现（node.js），否则两者应该相互独立。

标签： php javascript performance

【解决方案1】：

Http 请求并行运行，因此加载一个 js 文件可能根本不明显，假设您还必须等待图像和其他资源加载。好处大于潜在的缺点。

作为一个额外的好处，js 文件通常会被缓存，而 html 会在每次请求页面时重新加载。

注意：如果您有大量脚本，您将遇到加载速度问题，因为浏览器对可以并行发出的请求数有限制。在这种情况下，您应该考虑缩小和组合它们。尝试使用 php 自动缩小 code.google.com/p/minify。

最后：在 php 中有 js 代码对于可维护性来说是很糟糕的。

【讨论】：

就像注释一样。使用一个文件 - 这真的不是问题。但是在单独文件中有很多 JS 的网站上，如果文件单独加载，我发现速度会明显下降，但是您可以将所有这些文件合并到一个文件中以提高速度。问题是浏览器对并行请求有不同的限制。例如，IE 一次只能加载 6 或 7 个文件。
@FAngel 您可以解决一些异步加载库（如 require.js）的问题。但是，如果您有大量脚本，则应该考虑缩小和组合它们。尝试使用 php 自动缩小 code.google.com/p/minify。
嗯，require.js 不会扩展浏览器限制，但是是的 - 它可以用于在视觉上加速页面（因此脚本下载不会阻止其他所有内容）。 “你应该考虑缩小和组合它们”——这就是我要说的。
@FAnglel 好点。虽然我相信 OP 正在谈论单个 js 文件，但许多文件的问题在这里不会发挥作用。将编辑答案以说明这一点。

【解决方案2】：

JS 在单独的文件中 - 附加请求。但我不会说这是一个问题，因为它会被浏览器缓存。如果您有很多 js 文件 - 将它们收集到一个文件中以避免多个请求（有特殊工具可以将单独的 JS 文件编译为一个文件并最小化其大小）。

把它放到 PHP 代码中实在是太糟糕了。它应该在单独的文件中。

一方面我更喜欢将我所有的 JS 代码分开以保持整洁，但另一方面我认为解析整个代码需要更长的时间。

为什么？ JS 在客户端执行。不在服务器端。 PHP 不会解析 JS 文件。同时 - 如果您将 JS 代码放在 PHP 文件中 - PHP 需要将其回显到浏览器，这是 PHP 引擎的额外工作。另外，在 PHP 代码中，它会在 PHP 执行的任何时候发送到浏览器。

【讨论】：

我编辑了那部分，因为我表达得不清楚，我的意思是实际上由于加载 JS 而导致页面加载时间更长，而不是由于代码解析导致页面加载时间更长。
@Socrates 很好......您将拥有单独文件的唯一额外时间是连接到服务器的时间。你必须以这种或那种方式获得一些 JS 代码。但是使用适当的缓存设置 - 它只会从服务器获取一次。另外-如果它是单独的文件，您可以使用某些工具将其最小化。很快，我的回答是：永远不要将 JS 放入 PHP 文件中。如果您对脚本加载时间有疑问 - 查看最小化程序、编译器（多个较小文件中的一个文件）、gzip 压缩。

【解决方案3】：

始终在干净可读的代码方面犯错，以免陷入premature optimization 陷阱。

您始终可以重构性能不佳的代码以使其更快，从低级优化转移到更抽象的设计比反过来（抽象到低级）要困难得多

【讨论】：