将 javascript 与 php 混合时的性能和缓存答案

【问题标题】：performance and caching when mixing javascript with php将 javascript 与 php 混合时的性能和缓存
【发布时间】：2011-11-15 09:03:57
【问题描述】：

在对该主题进行了大量阅读后，我意识到许多开发人员将 javascript 和 php 混合在同一个文件中（通过添加 .php 扩展名或使用其他方式）。

另一方面，如果我选择将 javascript 与 php 分开并将其存储在外部可缓存的静态文件中，我会获得一些性能优势，但我还需要找到创造性的方法将服务器端数据传递到javascript。

例如，由于我不能在 .js 文件中使用 php foreach 循环，我需要使用 json_encode 将 php 数组转换为 json 对象。在其他情况下，我需要在原始 php 文件中声明 gloabl javascript 变量，以便可以在外部 js 文件中使用它们。由于服务器端处理被认为比 javascript 更快，因此转换为 js 数组并使用全局变量也可能是一个坏主意...

底线是我试图理解这里的权衡。哪个对性能影响更大，可以缓存 js 文件，还是通过避免全局 js 变量和多维度 js 数组来保持更简洁的代码？

【问题讨论】：

仅供参考，任何理智的人都不会混合使用 Javascript 和 PHP（PHP 代码之间的 HTML 是人类自二战以来所见过的最可怕的事情）。
赞发只是说它很难维护。我认为heredoc syntax 您几乎可以将生成 HTML 的 PHP 视为 HTML 模板，只需将您的视图放在一起，并将您的 PHP 函数放在可重用的包含/类中。
@Zanfa 这是你的个人观点，大多数 PHP 人不同意。
@Lee 这是很难维护的heredoc。而原生 HTML 是维护 HTML 的最佳方式。
@Col.Shrapnel 我认为大多数 PHP 人都喜欢模板解决方案的抽象，而不是任何美感。它仍然是标记化的 HTML，没有模板解决方案是“本机 HTML”。所以这不是最好的方法，不是吗？

标签： php javascript performance caching static

【解决方案1】：

您是在谈论服务器或浏览器的性能吗？

我个人的看法是，在让服务器变慢或让浏览器变慢之间做出选择时，您应该始终选择让浏览器变慢。

通常，“慢”意味着“需要 100 毫秒”左右，这在单个浏览器上并不明显，但如果您有数百个请求到服务器并且它们都被延迟，效果是累积，反应变得迟缓。很明显。

让浏览器接受打击。

【讨论】：

所以我知道您建议避免混合使用 js 和 php 以启用缓存并减少服务器请求。对吗？
如果你打算用 PHP 生成 JS，它应该是最低限度的。在外部文件中提供静态函数，在 PHP 中提供动态变量。显然，这过于简单化了。如果您想真正了解速度，请获取 Steve Souders 的《高性能网站》一书

【解决方案2】：

我认为这取决于您尝试做什么。我个人的看法是，阻止你的动态 JavaScript 被缓存是有点痛苦的。

你的静态 JS 文件需要包含你的函数并且没有动态数据。您的 HTML 页面可以包含您的动态数据。无论是在 SCRIPT 块中（您将能够在其中使用 PHP foreach），或者通过将您的数据放入 JavaScript 可以读取的 DOM 中，它可以是可见的（在表格中）或不可见的（例如在评论中） -取决于您的数据是否可呈现。

您也可以使用 AJAX 来获取您的动态数据，但这将是一个额外的请求，就像包含数据的外部 JS 文件一样。

正如 Kae 所说，向客户端添加额外负载将使您的服务器在可扩展性方面受益（您可以随时为多少用户提供服务）。

【讨论】：

感谢您的明确答复。我将尝试按照您的建议在脚本块中使用 foreach 循环。

【解决方案3】：

数据：

如果动态数据量不是太大且不断变化（一定不能被浏览器缓存），我建议将其添加到 HTML 的头部。为了防止它污染全局命名空间，您可以使用闭包或命名空间（对象）来包含所有相关变量。在性能方面，我认为在这种情况下，将数据循环成 JS 友好的格式或在服务器上处理最精细的细节（JS 变得非常快）之间没有太大区别。

当数据量很大（100+kbs 到兆字节）时，事情会稍微复杂一些。如果数据几乎是恒定的且可缓存的，您应该生成一个外部数据文件（不是实际的新文件，而是一个唯一的 URL），然后您可以将其包含在内。在名称中使用时间戳或正确设置缓存标头将使您能够节省服务器端（生成对 JS 友好的输出）和客户端（下载数据）的时间，并且仍然提供最新数据。

如果你有很多数据，但它在不断变化，我仍然会使用 PHP 生成的外部 JS 文件，但你必须格外小心禁用浏览器缓存，这会使你不断变化的数据几乎保持不变。您还可以进行动态加载，通过 JS 请求并行和按需拉取不同部分的数据。

代码：

代码的功能部分应遵循之前的说明：现在是 JS 应该内联到 HTML 还是分开的问题。这高度依赖于代码，主要是它的长度和可重用性。如果只是 20 行 JS，其中 10 行是 PHP 生成的数组等，那么将代码留在 HTML 中会更有意义，因为 HTTP 请求（所有资源如何传递给客户端的方式）是昂贵且请求小文件不一定是个好主意。

但是，如果您有一个更大的文件，其中包含很多功能等（10s 的 kbs），将它包含为一个单独的 .js 文件是明智的，以便使其可缓存并避免每次都被下载.

无论是在模板/PHP 中包含 JS 还是单独包含 JS，PHP 或 JS 的性能都没有区别。这只是使项目易于管理的问题。无论您做什么，都应该认真考虑使用模板。

【讨论】：

您可以将 PHP 放入 Javascript 文件中，只需调用 Javascript 文件 'file.php' 并将其包含在
好吧，duuuh。从来没有说过你不能。我只是在解释问题的不同方面，所以如果这就是 -1 的用途，您可以将其删除。
我用的是codeigniter，所以已经有了MVC结构。无论哪种方式，HTML 中都必须有一些 PHP，以便将数据从数据库传递到视图。如果我想管理外部 js 文件，那么 html 中也必须有一些小的 js 代码，以便分配这些 php var 或简单地调用外部 js 函数。因此，不惜一切代价避免将这 3 个混合在一起并不是完全可行的。您答案的最后一部分是有道理的，可以帮助避免服务器负载。谢谢
你在这里错过了大局。
好吧，现在是早上所以我稍微误解了原来的问题：P 说得非常清楚，模板中不一定要有PHP，模板中不一定要有JS，JS中不一定要有PHP。保持 3 是完全可行的。我重读了你的问题并修正了我的答案。

【解决方案4】：

读了很多遍

这就是你可能做错的事情。

有很多人喜欢写文章（以及 Stackovervlow 上的答案），他们的经验很少，他们的知识是基于……他们阅读的其他文章！
不要效仿他们的坏榜样。

您必须进行大量分析！，而不是“大量阅读”。

首先，您必须找出瓶颈并查看它们是否与缓存相关。
接下来你必须决定你的系统需要什么样的缓存。
只有这样您才能开始寻找解决方案。

希望对你有帮助。

【讨论】：

您假设我相信并实施了我读到的所有不正确的东西。我所说的是许多开发人员混合使用 JS 和 PHP，这是一个简单的事实。正是因为我不相信我读到的所有内容，我在一个非常受欢迎的论坛上发布了这个问题，希望能从经验丰富的开发人员那里找到答案，这些开发人员也证明了其他问题也能给出聪明的答案。我希望我的意图现在更清楚了。不管怎样，谢谢你的回答
不，你的意图还不清楚。只是因为您根本不知道是否需要任何缓存。但是，当然，询问对您的服务器一无所知的陌生人比对其进行分析要好。继续前进。
我需要缓存，否则我不会问这个问题，因为这里没有权衡。如果我不需要 cahching，我会采用混合 php 和 js 的方法，避免寻找将服务器数据传递给外部 js 文件的麻烦
有些事实是真实的，与特定的服务器配置无关。有一个所谓的 80/20 规则 yuiblog.com/blog/2006/11/28/performance-research-part-1 准确地解释了为什么您的服务器配置可能不那么重要（或根本不重要）。一些事实是普遍的，例如减少 HTTP 请求的数量和使所有内容尽可能可缓存。
此外，始终对您不完全熟悉的主题进行研究，以确保您知道要寻找什么。我已经对我自己的 JS 项目进行了一些认真的优化，但我确信我自己不会想出其中的一些。当然，一切都需要根据您的应用程序进行微调，这就是分析和基准测试至关重要的地方。

【解决方案5】：

QDF 解决您的问题是在隐藏的 HTML 表中发送数据。

HTML 表格易于在 php 中生成，在 JavaScript 中易于准备。

【讨论】：

【解决方案6】：

当情况是从 php 向 js 传递信息并将大多数 js 保留在主 php 文件之外时，我有一个解决方案。使用 js 对象或 js 函数。您编写了一些需要来自 php 的数据的代码。当页面加载时，一些小的 js 代码是从 php.ini 生成的。喜欢：

<script type="text/javascript">
a(param1, param2, param3)
</script>

然后就完成了。服务端直接在代码中指明param1、param2、param3。

函数位于缓存的 .js 文件中。这样可以减少服务器的上传和页面 js 启动的时间。客户端的代码有点慢，但你赢得了下载时间，服务器变得更快。

【讨论】：

谢谢，我之前使用过这种方法，并通过编写（使用您的示例）将 php 数组（带有 db 数据）传递给 js 函数： a( ）。顺便说一句，如果我使用这种方法，如果我知道在这种情况下数据更改频率很少，我是否可以缓存 PHP 数组？
这样你可能无法使用缓存。但是，您可以使用 Storage 接口和函数中的参数告诉信息是相同的，并且浏览器可以使用信息的缓存版本，如果缓存版本不存在，则执行对该信息的 AJAX 请求（查看AJAX方法的其他答案来解决这个问题）
Stroage接口是指HTML5 Web Storage吗？