客户端或服务器端处理？答案

【问题标题】：Client-side or server-side processing?客户端或服务器端处理？
【发布时间】：2011-03-05 02:08:20
【问题描述】：

所以，我是动态网页设计的新手（我的网站大多是静态的，使用一些 PHP），我正在尝试学习网页开发中的最新技术（似乎是 AJAX），我想知道，如果您要传输大量数据，是在服务器上构建页面并将其“推送”给用户更好，还是在客户端“拉”所需的数据并围绕它创建 HTML 更好使用 JavaScript？

更具体地说，我使用 CodeIgniter 作为我的 PHP 框架，使用 jQuery 作为 JavaScript，如果我想（动态）向用户显示数据表，使用 CodeIgniter 格式化 HTML 会更好（创建表，向元素添加 CSS 类等），还是只使用 JSON 提供原始数据，然后使用 jQuery 将其构建到表中会更好？我的直觉是在客户端进行，因为它可以节省带宽，并且页面可能会通过所有这些浏览器现在拥有的新 JavaScript 优化更快地加载，但是，如果不使用 JavaScript 的人，网站就会崩溃......

感谢您的帮助

【问题讨论】：

AJAX 自 2005 年就出现了，所以在某些方面它并不是什么新鲜事。
AJAX 这个名字从 2005 年就出现了。使用 Javascript 异步更新网页的技术至少从 2000 年就已经出现了。哦，人们用隐藏的 iframe 和长轮询拼凑在一起的东西。 .
re: 生成 HTML 服务器端或客户端，你会发现像 facebook 这样的网站两者都做 -- 有时它是 JSON 响应，有时它只是一个原始 HTML 的 blob。对于简单的事情（例如，突出显示包含不可接受值的字段）不要传输标记。对于复杂的东西（任何有十几个标签的东西）传输一大块 HTML。请记住，Chrome 可能很快，但仍然有很多人使用 IE6。
另外，请记住 80% 的页面呈现时间在客户端，即使对于仅使用适量 JavaScript 的网站也是如此。
有一些新的更好的东西：node.js（还有其他的）。这是客户端javascript。这意味着您可以使用 1 种语言编写您的网站：javascript 用于后端、前端，也可以使用它来代替 sql (mongodb)。另外 - 不需要 apache，因为 node.js 是一个服务器。

标签： php javascript jquery codeigniter dynamic

【解决方案1】：

恭喜您迁移到动态网站！我想说你做客户端布局必须满足以下条件（不用说你应该总是做过滤数据库查询和控制访问权限服务器端的事情）：

客户端浏览器和连接功能可以满足绝大多数用例的需求
SEO 和移动/旧版浏览器降级不是大问题（合成 HTML 服务器端时容易得多）

即便如此，进行客户端布局也会使测试变得更加困难。它还会产生相当麻烦的同步问题。对于加载部分内容的 AJAX 站点，如果页面的一部分出现问题，您可能永远不会知道，但是通过常规的服务器端组合，整个页面会在每次请求时重新加载。它还为错误/超时处理、会话/cookie 处理、缓存和导航（浏览器后退/前进）增加了额外的挑战。

最后，如果有人想与朋友分享链接或为自己添加书签，则生成永久 URL 会有点困难。我在我的博文here 中介绍了一种解决方法，或者您可以使用一个显眼的“永久链接”按钮来显示动态呈现的永久链接。

总的来说，尤其是刚开始的时候，我会说要使用更洁净、更好支持、更多教程的传统方法，将 HTML 服务器端放在一起。然后在这里和那里浸入一些 AJAX（可能从表单验证或自动完成开始），然后继续前进。

祝你好运！

【讨论】：

【解决方案2】：

在服务器端完成繁重的工作要好得多。

在 CodeIgniter 中，您创建一个视图，循环遍历表中的所有行，添加类或您需要的任何其他内容。没有理由在 Javascript 中执行此操作。

Javascript 是一种病态滥用的语言，其语法很糟糕。你到底为什么要加载一个页面，然后发出一个 AJAX 调用来加载一些 JSON 对象以推送到一个表中，这超出了我的理解。没有理由这样做。

Javascript（和 jQuery）用于增强最终用户。让事物滑动、闪烁、消失！即使在最轻微的负载下，它也不用于数据处理。最终用户体验会很糟糕，因为当您拥有一个功能无限强大的服务器时，您依赖他们的机器来处理所有数据甚至专门为此而设计。

【讨论】：

@Josh K 但是如果连接速度很慢，并且您发送的数据量呈指数级增长（而不是 JSON），那么连接速度会消除您认为看到的任何收益。尤其是在涉及无线设备的情况下，发送更少，而不是更多。
@Doug：他在谈论使用“最新技术”并提到 AJAX。我怀疑通过将其卸载到客户端是否会减少服务器负载任何合理的数量。
@Doug Neiner：如果您要发送这么多数据，那么它不太可能是格式化的，但更有可能是实际内容，如果您通过 JSON 传输它，无论如何大小几乎相同。而且我肯定不想使用我所有手机的内存来处理巨大的网页，因为网站管理员不想使用他的服务器资源。
@Josh K，前端技术真的是我的最爱。我也一直在使用服务器，但是如果像 OP 这样的人所听到的只是您在答案和这些 cmets 中提供的相同过时信息，他们将如何学习。 JS 不仅仅是为了让东西“滑动”或弹出，它还可以用于更多用途。但我怀疑你不明白这一点，因为你认为：“Javascript 是一种被滥用的语言，语法很糟糕。”
@Josh K，你误解了我的 cmets。过时的信息是您所做的这些声明：“没有理由这样做永远”、“不要使用 javascript 来格式化 HTML。”、“它即使在最轻微的负载下也不适用于数据处理。”...所有这些陈述从根本上来说都是不正确的、具有误导性的，而且正如我之前所说的那样，已经过时了。

【解决方案3】：

最好在服务器端做尽可能多的事情，因为 1) 你不知道客户端是否会启用 JavaScript 以及 2) 你不知道客户端处理的速度有多快。如果他们的计算机速度很慢，而您让他们处理整个站点，那么他们将会非常成功。 JavaScript/jQuery 应该只用于增强您的网站，而不是处理它。

【讨论】：

@Nick：这是一个查询问题。添加LIMIT 0,10 以获取前十个条目。 LIMIT 10,10 为接下来的十个。 LIMIT 20,10 之后的十个。除了使用 AJAX 加载数据并进行处理之外，还有更智能的方法。
@Nick：不，PHP 在格式化方面会快很多。您可以提取 10 个格式化条目，然后使用 JavaScript 将它们粘贴到站点中。这将比使用 JavaScript 处理它们快得多。
哦好吧..每个人似乎都强烈反对使用 JavaScript，所以我想我会走专家的路线。谢谢！
@Nick：没有那么多强烈反对使用，只是强烈反对滥用。
许多包含 Noscript 图标的巨大黄色框 = 放弃希望所有进入这里的人。当您完整填写表格，单击提交时，更令人沮丧，但没有任何反应。为什么只通过 javascript 将表单提交链接到验证，而您可以轻松地让我通过并在服务器端进行验证？

【解决方案4】：

您正确地进行了权衡。但是，请记住，您可以在服务器端激活压缩，这可能会使添加重复标记以格式化表格的带宽成本很小。

还要记住，编写适用于所有浏览器（包括手持设备）的 Javascript 比在 PHP 中编写相同的服务器端更复杂。并且不要忘记，“新的 JavaScript 优化”不适用于手持设备的浏览器。

【讨论】：

它们也不适用于 IE6（或 7），遗憾的是这仍然很常见。

【解决方案5】：

这取决于您的目标市场和您网站的目标。

我强烈相信尽可能使用客户端从服务器上卸载工作。显然，正确地执行此操作很重要，因此对于最终用户来说它仍然很快。

在无 js 支持很重要的网站（公共网站等）上，您可以回退到服务器。在这些情况下，您最终会加倍代码，但收益是非常有益的。

对于高级 Web 应用程序，您可以决定是否值得以失去（非常）少数用户为代价。对我来说，如果我对目标市场有一定的控制权，我就会把它作为一项要求并继续前进。花大量时间支持一小部分潜在受众几乎从不有意义。（除非将时间花在可访问性上，这是不同的，而且无论有多少人适合您网站上的这个组，它都非常重要。）

要记住的重要一点是，尽可能少地接触 DOM 以完成工作。这通常意味着构建一个 HTML 字符串并使用单个 append 操作将其添加到页面，而不是循环遍历一个大表并一次添加一行。

【讨论】：

Doug，你有什么理由建议不要碰 DOM？我总是觉得发送我想要添加到页面的 JSON 表示更舒服（例如，当用户在分页列表中加载下一组时）并让浏览器将其放在 HTML 中生成 HTML 段服务器-边。在我看来，这违反了 AJAX 站点的一项期望原则，即以 AJAX 侦听器作为翻译器将逻辑与呈现分开。
@Steven Xu，我完全同意你的看法。人们在浏览器中所说的“慢”的大部分内容是当您添加 100 行时，但您一次只添加 1 行。那是 100 个 appendChild 电话，带有信息。我只是说，在 JS 中构建一个 HTML 字符串，然后通过一次调用将其附加到页面中。这允许浏览器只进行一次繁重的提升。而如果你做对了，它甚至不重，它只是一个innerHTML = 语句，并且添加了数据。
@Doug：但实际处理速度非常慢。在 100 行数据中可能不那么明显，但是将后端处理与客户端处理进行比较，并且每次都是后端获胜。
@Josh K，但你不是在比较苹果和苹果。在比萨店做披萨比在你家做披萨要快，但你必须考虑旅行、给司机小费等。总是比简单地“处理数据”更危险。
@Doug：现在你把水搅浑了。你说的是付钱让司机带着食材从比萨店开车到你家（不要拿小费！）然后然后自己制作比萨。

【解决方案6】：

我从事大量 AJAX 应用程序开发工作，我可以根据我的经验告诉您这一点。两者之间的良好平衡是关键。

在服务器端执行原始数据，但使用 javascript 进行任何您需要的修改。比如分页、列排序、行条带化等。

我绝对喜欢在 AJAX 中做所有事情，呵呵.. 但是使用 AJAX 做这件事有一些不足之处，那就是 SEO。搜索引擎不读取 javascript，因此为了您网站的页面排名，我会说将所有数据提供给服务器端，然后格式化并在客户端看起来很酷。

我如此喜欢 AJAX 的原因是，它极大地加快了用户对您 APP 的使用速度，因为它只在您需要加载它的地方加载您需要加载的数据，而不是在您每次执行某项操作时加载整个页面。 ..您可以做很多事情，例如隐藏/显示行/列（我们在这里讨论表格操作，因为您提到了一个表格），即使使用这些显示/隐藏操作，也可以在单击删除时添加删除操作行或按钮，它不仅在视觉上删除该行，而且在数据库中删除该行，所有这些都通过对服务器端代码的 AJAX 调用完成。

简而言之。

原始数据：服务器端以 html 布局向客户端发送原始数据（用于表格结构化数据的表格，但我在 div 和其他灵活的 html 标记中执行其他所有操作，仅针对列/行样式数据执行表格）

数据格式化：客户端，还包括与数据交互的任何方式。添加到它，从中删除，对它进行不同的排序等。这实现了两件事。 SEO 和用户体验 (UX)。

【讨论】：