混合javascript和php时的性能和缓存


performance and caching when mixing javascript with php

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

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

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

最重要的是我试图理解这里的权衡。哪个对性能有更大的影响,启用缓存的js文件或保持一个更干净的代码,避免全局js变量和多维js数组?

你是在谈论服务器的性能还是浏览器的性能?

我个人的观点是,如果让服务器变慢或者让浏览器变慢,你应该选择让浏览器变慢。

通常,"慢"意味着"花费100ms"之类的东西,这在单个浏览器上并不明显,但如果您有几百个请求到服务器并且它们都因此而延迟,则影响是累积的,并且响应变得缓慢。很明显。

让浏览器承受打击。

我想这取决于你想做什么。我个人的观点是,防止动态JavaScript被缓存有点麻烦。

你的静态JS文件需要包含你的函数,而不是动态数据。HTML页面可以包含动态数据。无论是在一个脚本块(在那里你将能够使用PHP foreach),或通过把你的数据到DOM JavaScript可以读取它,它可以是可见的(在一个表)或不可见的(例如在一个评论)-取决于你的数据是否可呈现。

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

正如Kae所说,在客户端上添加额外的负载将使您的服务器在可伸缩性方面受益(每次可以服务多少用户)。

Data:

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

当数据量很大(100+ kbps到兆字节)时,事情就有点复杂了。如果数据非常稳定且可缓存,则应该生成一个外部数据文件(不是实际的新文件,而是一个唯一的URL),然后可以包含该文件。在名称中使用时间戳或正确设置缓存头将使您能够节省服务器端(生成js友好的输出)和客户端(下载数据)的时间,并且仍然提供最新的数据。

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

代码:

代码的功能部分应该遵循前面的解释:现在的问题是JS应该内联到HTML还是分开。这很大程度上取决于代码,主要取决于代码的长度和可重用性。如果只有20行JS,其中10行是由PHP生成的数组等,那么将代码留在HTML中会更有意义,因为HTTP请求(所有资源交付给客户端的方式)是昂贵的,请求一个小文件不一定是一个好主意。

然而,如果你有一个更大的文件,有很多功能等(10s的kbs),这将是明智的,包括它作为一个单独的。js文件,以使它可缓存,并保存它从每次下载。

无论你是将JS包含在模板/PHP中还是单独包含,PHP和JS的性能都没有区别。这只是一个使项目易于管理的问题。无论您做什么,都应该认真研究使用模板。

读了很多书之后

这就是你可能做错的地方。

有很多人喜欢写文章(在Stackovervlow上也有答案),他们很少有经验,他们的知识是基于…在他们读的其他文章上!
不要学他们的坏榜样。

比起"大量阅读",你必须做大量的分析!

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

希望有帮助。

QDF到您的问题是发送数据在一个隐藏的HTML表

HTML表很容易在php中生成,也很容易在JavaScript中准备。

我有一个解决方案,当情况是传递信息从php到js和保持大多数js外的主php文件。使用js对象或js函数。编写一些需要php数据的代码。当页面加载时,一些小的js代码从php生成。如:

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

就完成了。服务器直接在代码中指定param1、param2和param3

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