JavaScript 模板(例如Underscore/Lodash): informative advice

Question

我目前正在学习 Javascript 模板，并且有一个信息丰富的问题​​。

与在服务器上收集 html 字符串(例如 PHP)并通过 jQuery Ajax 调用返回相比，使用来自服务器的 json 数据填充 javascript 模板有什么好处？

由于此模板是在客户端使用 Javascript 执行的，因此在服务器上创建模板不是会快很多吗(服务器比客户端更强大)？

做这个客户端的实际好处是什么？
我遇到这个问题是因为我目前正在学习如何使用 Backbone 开发 SPA，我想将其与 Marionette 一起使用并需要它。

谢谢。

Answer 1

你说服务器比客户端更强大。是的，但是如果您有 1000 个客户端请求该页面呢？这对服务器来说变得很困难，你尝试使用服务器端缓存、负载平衡等。所以客户端模板渲染可以让每个客户端关心自己。它极大地减轻了服务器的负担。例如，您可以提供一次 HTML 模板和 JavaScript 代码，浏览器将对其进行缓存。因此，服务器甚至不会在当前客户端的每个下一个请求中发送这些内容，而仅确保实际的数据提供和操作，例如通过 REST 架构。通过这种方式，您主要只传输数据。 Backbone 和其他客户端框架允许您减轻服务器的负担。当每个客户端为自己呈现页面或页面的一部分时，它的工作速度总是更快。 只需比较这两种情况下“GET Users”请求的响应即可:

JSON 响应 (REST) 用于客户端呈现:

[
    {"name": "Jimmy", "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d17141010043d1a101c1411531e1210" rel="noreferrer noopener nofollow">[email protected]</a>"},
    {"name:" "Billy", "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a78737676635a7d777b737634797577" rel="noreferrer noopener nofollow">[email protected]</a>"}
]

HTML响应(传统)由服务器呈现:

<table>
    <tr>
        <td>
            Jimmy
        </td>
        <td>
            <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076d6e6a6a7e47606a666e6b2964686a" rel="noreferrer noopener nofollow">[email protected]</a>
        </td>
    </tr>
    <tr>
        <td>
            Billy
        </td>
        <td>
            <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb0b5b5a099beb4b8b0b5f7bab6b4" rel="noreferrer noopener nofollow">[email protected]</a>
        </td>
    </tr>
</table>

显然，如果您有 100 个用户需要呈现，您将需要在服务器端呈现更多的 HTML 并通过 HTTP(CPU、RAM、带宽)进行传输。

但在客户端渲染的情况下，您只需要一个表格模板和一个(!)表格行(例如特定示例)的模板即可在循环中渲染用户。

所以服务器只关心数据、认证和授权。 该应用程序是分布式的。您卸载服务器的负载并允许浏览器执行所有非敏感工作。每个客户都关心自己。