客户端或服务器端 dom 附加哪个更快？ [关闭]答案

【问题标题】：Which is faster, client side or server side dom appending? [closed]客户端或服务器端 dom 附加哪个更快？ [关闭]
【发布时间】：2012-05-06 23:17:00
【问题描述】：

在 asp.net mvc3 视图中，我有一个 $.get() ajax 调用到一个控制器操作，它返回 80 行 html 代码。是更快（从.get 调用到完成渲染）在服务器端创建 dom 元素然后只传递一个巨大的元素附加到 DOM，还是只传递大量原始数据更快到客户端，然后在那里创建和追加所有 DOM？

返回（或生成）的 html 创建了一个仪表板，其中包含大约 5 层嵌套 div、一些 span、文本等。

【问题讨论】：

@ta.speot.is - 服务器速度一般，没什么特别的。客户就是浏览者。
由于浏览器在后台处理它的方式，通常附加大块 HTML 比构建 DOM 更快。不过，不幸的是，我无法引用这一点。（意思是我基本上是在猜测：p）
似乎尽可能多地分配计算是有意义的。如果您有 1000 个不同的客户端连接，您宁愿让一台机器完成这部分工作，还是 1000 台机器？
@cliffsofinsanity - 取决于这 1000 台机器是踏板自行车还是喷气发动机。换句话说，服务器处理字符串创建的速度相当快，而客户端有时会在创建 DOM 元素时遇到困难。
@TravisJ：我们是在谈论 10000 个元素还是更多，比如数百个？即使是前者，我还是会在客户端做，只是对数据做一些异步处理，这样用户体验就不会受到影响。

标签： c# javascript ajax asp.net-mvc-3

【解决方案1】：

我建议您自己进行基准测试，因为这取决于很多因素，例如您的受众设备（计算机/移动设备）、互联网速度、数据计划等。首先了解您的目标受众，然后做得更好。

返回格式化的 HTML 会增加流量，但允许您将其直接附加到 DOM。这对于使用宽带的笔记本电脑/台式机的人来说很好。

返回原始数据更快，但会让您在现场创建 DOM。但是，这通常适用于高性能机器或移动设备，这些设备的付款基于传输的数据量。

【讨论】：

会的。我总是对标准化方法感到好奇，但似乎我经常自己动手做 :) 对我有用，我喜欢自己动手。
@TravisJ：顺便说一下，对于客户端 DOM 操作，使用 EJS 或任何类似的 JavaScript 模板库学习一些 JavaScript 模板可能很有用。
@Sk8erPeter - 如果需要太复杂的东西，我会使用 razor 引擎从 c# 生成 javascript。否则，在我看来，使用字符串作为 html 是非常糟糕的做法。我试图坚持创造实际的元素。 var el = document.createElement("div") 然后与他们合作。 var sp = document.createElement("span")，el.appendChild(sp) 类型的东西。它允许设置更动态的环境，以便轻松插入变量。
@TravisJ：你有没有向下滚动链接页面？！你看过 EJS 的例子吗？它的目的（类似于其他模板库）是防止连接 HTML 字符串，因为这是一种非常糟糕和丑陋的做法......我同意，必须避免 HTML 字符串连接。您应该查看这些模板库的示例。 :)
@Sk8erPeter - 是的，我通读了。这是一个很好的例子，但我自己已经做了类似的事情是我的观点。我比较喜欢自己写。感谢您的链接！ :)

【解决方案2】：

这两种方法完成的主要 CPU 工作是解析 HTML、生成 DOM 并将其绘制在屏幕上。在服务器上准备响应并不能逃避这一点。您不能在服务器上创建 DOM 或在服务器上执行此工作。

所以问题是客户端上的字符串连接与服务器上的字符串连接并通过网络发送。这是一种不费吹灰之力的事情。

【讨论】：

服务器以一种或另一种方式发送数据......不会绕过那个。因此，剩下的唯一比较是服务器字符串连接和字符串创建与单个客户端追加与 multiplicity 在客户端追加 dom 以及字符串连接、字符串创建和 dom 元素创建。跨度>
@TravisJ 是的，服务器必须以任何一种方式发送数据，区别在于有无标记。然后，您的客户端可以将字符串与客户端模板连接起来，这是与仅从服务器发送所有内容不同的唯一 CPU 工作。在这两种情况下，您都需要客户端解析 html、生成 DOM 并将其绘制在屏幕上。
在服务器端的情况下，客户端不必解析任何html或生成DOM。它所要做的就是渲染。你曾经使用过 MVC 框架吗？我感觉你对 asp.net 不是很熟悉。
@TravisJ 我感觉您对 HTML、浏览器、服务器技术和语言以及 HTTP 不是很熟悉。否则你不会做出如此愚蠢和错误的主张。
@TravisJ asp.net 因像这样抽象 HTTP 而臭名昭著。你说的是不可能的，服务器只能向客户端发送文本数据，而不是它在内存中的对象表示。请阅读en.wikipedia.org/wiki/HTTP#Technical_overview