什么是通过提供静态HTML并使用AJAX / JSON生成内容的优点？

Question

https://urbantastic-blog.tumblr.com/post/81336210/tech-tuesday-the-fiddly-bits/amp

Heath来自Urbantastic，他写了关于他的HTML生成系统的文章：

Urbantastic中的所有HTML都是完全静态的。 所有动态数据都以JSON格式通过AJAX发送，然后使用Javascript与HTML组合。 换句话说，Urbantastic的服务器软件仅生成和消耗JSON。 HTML，CSS，Javascript和图像都通过不同的服务（纯净的Nginx服务器）发送。

我认为这是一个有趣的模型，因为它在物理上将表现与数据分离。 我不是架构专家，但似乎效率和稳定性会有所提高。

然而，以下内容让我担忧：

---

• [主观] Clojure非常强大；Javascript则不是。用为其他目的创建的语言来编写所有内容生成将会带来一些痛苦（想象一下在CSS中编写类似于Javascript的代码）。除非他有一个用于生成Javascript的宏系统，否则Heath可能需要经常在JavaScript和Clojure之间不断切换。他还将有很多JS代码；可能比Clojure多得多。从我们转向基于LISP的语言时所看到的所有东西来看，这可能不利于功能、快速开发、简洁性等方面。

• [性能] 我不确定，但在用户的机器上呈现所有内容可能会导致滞后。

• [可访问性] 如果禁用JS，则无法使用该网站。

• [可访问性＃2] 我怀疑使用JavaScript进行大量动态数据填充将创建跨浏览器问题。

有人可以发表评论吗？我对这种架构类型的意见很感兴趣。

参考资料：

1. 链接 到 HN 上的讨论。
2. 链接 到 /r/programming 上的讨论。

- mannicken

---

Javascript非常强大。我的意思是您不一定真正理解Javascript。它提供的编程范式和选项比C++或Lisp都要多。它确实缺少一些速度，但对于所需完成的工作量来说，这点速度可以忽略不计。 - Robert Gould

任何速度上的缺陷都可以在传输完整页面时弥补数据开销（至少大部分时间是这样）。Javascript让你能够轻松地创建一个庞大的处理集群。（观众来完成工作 ;)） - Kent Fredric

相对于感知的速度实际上并不是问题。仍然存在问题的是IO边界。 - annakata

Answer 1

"在Urbantastic中，所有的HTML都是静态的。所有动态数据都以JSON格式通过AJAX发送，然后使用Javascript与HTML组合。" "我认为这是RIA的标准模型。重点似乎是'全部'。因为在许多网站上，许多动态内容仍然不是通过Ajax获取的，只有关键功能是通过Ajax获取的。" "如果您没有大量元素的巨大网页，则呈现问题不会是主要瓶颈。" "JS的可访问性确实是一个问题。但是，想要体验AJAX的用户必须启用JS。您对有多少用户未启用JS进行了调查吗？"

- Cyril Gupta

---

如果您没有一个有很多元素的巨大网页，个人认为即使是这样也不会有问题。我们有一些在服务器端渲染的巨大页面，这会拖慢所有用户的服务器！传输数据只占完全呈现HTML的I/O的10%。 - Kristen

如果我们的服务器比客户端快100倍，而我们编译的应用程序是解释JavaScript的100倍，但模板+JSON数据仅占完全呈现HTML的10％，那么我的直觉是客户端模板合并将足够快，并减少服务器和带宽资源需求。 - Kristen

我同意你的看法，Kristen。我只是想采取保守的态度 :) - Cyril Gupta

Answer 2

这样做的好处是，你可以通过CDN（如Akamai）提供99%（按重量计算）的内容，甚至可以将其放在外部存储器上（例如S3）。仅提供JSON，网站几乎不可能被slashdoted。

- vartec

---

只有在没有提供非脚本替代方案的情况下才是真实的。最好的计划是使用普通的非脚本标记链接，并在页面加载时使用JS调用with JS来替换这些链接。 - annakata

目前有97-99%的用户启用了JS。剩下的1-3%不会使服务器超载。 - vartec

Answer 3

当AJAX开始流行起来时，即2005年末，我编写了一个客户端模板引擎，并将我的博客模板转变为完全成熟的AJAX体验。

问题是，这个模板东西真的很容易实现，而且消除了很多苦力活。

以下是它的实现方式。

<div id="blogger-post-template">
<h1><span id="blogger-post-header"/></h1>
<p><span id="blogger-post-body"/><p>
<div>

然后在JavaScript中：

var response = // <- AJAX response
var container = document.getElementById("blogger-post-template");
if (!template) { // template context
    template = container.cloneNode(true); // deep clone
}
// clear container
while(container.firstChild) 
    container.removeChild(template.firstChild);

container.appendChild(instantiate(template, response));

实例化函数会对模板进行深度克隆，然后在克隆体中搜索标识符，并用响应中找到的数据替换它们。最终结果是一个填充了数据的 DOM 树，该树最初是在 HTML 中定义的。如果我有多个结果，我只需循环执行上述代码。

- John