【问题标题】：Pushing HTML to a web page (JS VS PHP)将 HTML 推送到网页（JS VS PHP）
【发布时间】：2015-10-01 18:09:32
【问题描述】：

我只是对标题感到好奇，因为我一直在使用 PHP 来加载带有 HTML 的搜索结果，现在我已经开始为此目的使用 javascript。

以前我在我的网站上执行以下操作以在页面上加载搜索结果

<?php
//example code
echo ' <div class = "container">
<div class = "box"> <p> Searh result e.g foo bar </p> </div>
 </div>'

?>

现在，当我调用一个 ajax 函数将搜索文本发布到 PHP 页面时，上面的方法将起作用，页面将返回所有匹配的结果以及 HTML，jQuery 会将结果推送到我的页面上

我现在正在做的是通过 ajax 将搜索文本发布到 PHP 页面，但这次不是返回包含在 HTML 标记中的所有搜索结果，而是返回一个 JSON 类型的数组，其中只有数据

现在，当我从 PHP 接收到这个数据数组时，我将它发送到一个自定义（自制）javascript 函数，该函数遍历数组并生成如下 HTML（例如）

 for (myData in data) 
    {
            results+='<li>'+
                '<div class="row">'+
                    '<div class="col-xs-12 col-sm-9 no-margin">'+
                        '<a href="">'+data[myData].name+'</a>'+
                        '<div class="price">'+
                            '<div class="">'+data[myData].price+'</div>'+
                        '</div>'+
                    '</div>'+
            '</li>';
    }

最后，变量results 包含了所有的 HTML 以及随后通过 jQuery append 推送到页面的数据。

所以在第一种方法中，所有工作都在服务器端完成，它返回大量数据，因为 HTML 标记将乘以返回的结果数

而在第二种方法中，服务器只会返回一个 JSON 类型的数据数组其余的工作将在客户端完成。所以问题是，第二种方法是否比第一种方法更好？

提前致谢

【问题讨论】：

除了流量我想说可维护性可能是一个问题 - 但这取决于您关注的技术。
第二个更好，因为您不必从服务器向客户端传递太多数据，只需发送json 并在另一端做一些技巧

标签： javascript php jquery html performance

【解决方案1】：

这两种方法同样有效，但每种方法都有几点需要考虑：

PHP

即使用户禁用了 JavaScript，它也能正常工作

JavaScript

处理被卸载到客户端，减少了服务器的负载。
- 实际的负载量可以忽略不计，因为唯一的“处理”是构建 HTML
流量较少，但如果您的服务器正在压缩响应（很可能是这样），那么这并不是真正的明显差异。
如果您使用 ajax，页面会更快、响应更快，因为它不必重新加载整个页面。
如果用户禁用了 JavaScript，则不起作用。

最后，除非你知道有很多用户禁用它，否则我会使用 JavaScript。

理想情况下，您应该在 PHP 创建 HTML 时使用无 JS 后备。

【讨论】：

【解决方案2】：

当你在谈论小型简单网站时，做你喜欢的......

当涉及到更复杂的应用程序时，您必须将数据与演示文稿分开。所以我认为正确的方法是首先使用模板。

然后，你可以选择边：

客户端会更好，当使用某些框架或您的应用程序 HTML 会立即发生变化。您获得所需的数据并将其呈现在客户端上。使用模板引擎。

服务器端如果你需要构建大量的 HTML 并且需要它一次或两次，这可能会很好......

也可以两边使用同一个模板引擎，这样就可以组合起来了。

我认为，这始终关乎多种方式的组合，因此请为这两种方式准备您的应用。（也许从一开始就为 REST 设计）

附：可能会有所帮助：Sharing Templates Between PHP and JavaScript

【讨论】：

【解决方案3】：

不是一个实际的答案......但它们都很糟糕：-/ 为什么不看看像 Knockout.js 这样的东西。您可以使用“仅包含数据的 json 类型数组”来更新您的视图模型，并且您可以像魔术一样查看更新；-)

只是说说而已！

【讨论】：