使用 javascript 完全生成 html 的优缺点答案

【问题标题】：Pros and cons of fully generating html using javascript使用 javascript 完全生成 html 的优缺点
【发布时间】：2012-01-25 01:49:25
【问题描述】：

最近，我想出了一些关于如何提高整体性能的想法一个 Web 应用程序，而不是从 Web 服务器生成准备显示的 html 页面，为什么不让它在客户端完全生成。这样做，只需要将纯数据（在我的例子中是 JSON 格式的数据）发送到浏览器。这会将 html 生成的工作从服务器卸载到客户端的浏览器，并且减小返回给用户的响应包的大小。

经过一番研究，我发现这个框架（http://beebole-apps.com/pure/）和我做的一样。

我想知道的是这样做的利弊。对于 Web 服务器来说，它肯定更快更好，并且使用现代浏览器，Javascript 代码可以快速运行，因此可以快速完成页面生成。

这种方法的缺点可能是 SEO。我不确定像谷歌这样的搜索引擎是否会适当地索引我的网站。 您能告诉我这种方法的缺点是什么吗？

Ps：我还附上了示例代码来帮助描述方法如下：

在头部，简单的javascript代码会这样写：

<script type='javascript' src='html_generator.js'/>
<script>
   function onPageLoad(){
      htmlGenerate($('#data').val());
   } 
</script>

body中只有一个元素，仅作为数据容器使用如下：

  <input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/>

当浏览器渲染文件时，会调用 html_generator.js 中的 htmlGenerate 函数，并在该函数中生成整个 html 页面。请注意，html_generator.js 文件可能很大，因为它包含很多 html 模板，但由于它可以缓存在浏览器中，因此只会下载一次。

【问题讨论】：

我为此使用 ExtJS：sencha.com/products/extjs
如果您正在构建一个具有真实用户功能的网络应用程序（例如，电子邮件系统或诸如此类），客户端生成方法可以很好地工作。如果您正在构建一种方法来提供（主要是静态查看的）供公众消费的内容（例如文档或公司营销网站），请发送 HTML 并使用不显眼的 JS 方法。

标签： javascript jquery html seo html-generation

【解决方案1】：

缺点

搜索引擎将无法为您的网页编制索引。如果他们这样做了，那你就很幸运了。
禁用 JavaScript 或在移动设备上的用户很可能无法使用它。
速度优势可能会被证明是微乎其微的，尤其是当用户使用像 IE 这样的慢速 JavaScript 引擎时。
可维护性：除非您自动生成 javascript，否则这将是一场噩梦！

总之

如果您只是为了提高速度，不建议使用此方法。但是，它通常在 Web 应用程序中完成，用户停留在同一页面上，但是您可能最好使用现有框架之一，例如 backbone.js，并确保它仍然可以通过关注 @ 987654322@ 或HTML5 PushState（由@rohk 建议）。

如果您只是在寻找性能，并且您的应用程序并不严格需要像这样工作，请不要这样做。但是，如果您确实采用这种方式，那么请确保您以标准化的方式进行操作，以便它保持快速和可索引。

【讨论】：

这取决于网站的重点是什么。一个公司的营销网站，html 和不显眼的 Javascript。对于专用的网络应用程序，单一加载站点并非不可能，使用这种方法可能更合适。
@Jared Farrish 对这个问题的评论很好地总结了它。
@Jared Farrish 然后你也评论了我的回答！非常真实。
糟糕，没有看到您的编辑。我所知道的是，我真的不喜欢基于 html 的非现代电子邮件网络应用程序（例如，雅虎）。但是，fancy-cuz-we-can 公司网站忽略了这一点，即尽可能简洁地传达公司的信息。在这种情况下，用户并不关心页面是如何“生成”的，并且浏览器是为解析 HTML 而构建的。此外，KISS 规则应该生效，而这种类型的故事驱动网站的功能并不总是“更快”。还有其他注意事项。
Hashbangs 已过时，仅由 Google 使用（因此其他引擎没有索引）...使用 HTML5 pushstate 来提高可抓取性 - lostechies.com/derickbailey/2011/09/26/…

【解决方案2】：

客户端模板常用于Single Page Applications。

你必须权衡利弊：

优点：

更灵敏的界面
减少您的网络服务器上的负载

缺点：

SEO 将比经典网站更难（除非您使用 HTML5 PushState）
可访问性：您严重依赖 javascript...

如果您要这样做，我建议您查看Backbone.js。你可以在这里找到教程和示例：http://www.quora.com/What-are-some-good-resources-for-Backbone-js

SPA 示例：

也看看这个答案：https://stackoverflow.com/a/8372246/467003

【讨论】：

“流体界面” - 这是什么意思？
@browser 历史记录：您可以完全创建每个页面或使用主题标签。这不是一个真正的骗局
@JaredFarrish : 当您使用 ajax 仅重新加载页面的一部分时，用户体验会更快
通常所说的“响应式界面”；至少在我看来，“流动性”是指页面布局是与浏览器视口宽度成正比还是与它的某种变化成正比。而且在很多情况下，所取得的收益完全有可能不值得构建和管理这样一个系统的成本。
事实上...我认为，除了真正的“基于网络的应用程序”之外，同样类型的网站也适合这种方法（即，相对简单的内容驱动网站）也不会从消除完整的往返行程中获得太多收益。看起来可以更好地工作的大型网站（戴尔的产品网站、eBay 等）是如此单一，并且有如此多的活动部件，因此简化浏览器界面可能是一项投资回报率的决定。

【解决方案3】：

哎呀。

jQuery 模板更接近您的想法。 Sanity 说你应该有一些可以随意修改的 HTML 模板。您希望 MAINTAINABILITY 不是让您在最糟糕的噩梦中辗转反侧的字符串连接。

你可以继续这种疯狂，但你最终会以艰难的方式学习。我聘请您首先使用 jQuery 模板和您的纯代码方式尝试一些原型。理智肯定会战胜你，我的朋友，我说这来自尝试你的方式一段时间。 :)

也可以使用 AJAX 动态加载您需要的模板中的内容。如果您有一种灵丹妙药的方法，即需要在单个请求中下载每个可以想象的模板，那是没有意义的。

【讨论】：

jQuery 模板现在不是一个死项目吗？作为一个 jQuery spaghetti 编码器，我希望他们有这样的东西，因为我已经了解了这个框架，但是我读到这已经死在水中了。
是的。我认为是这样。我在 2011 年 12 月 21 日回答了这个问题，所以是的。我会尝试 EJS，因为您无需学习任何新知识即可将 JavaScript 与您的模板一起使用，并且您可以在 Node.js 中重用它，我在 asp.net 上编程以及与我上次编写此代码时相比的更改。

【解决方案4】：

专业人士？我实在想不出来。您说在网络服务器中会更容易，但提供 HTML 是网络服务器旨在做的事情。

缺点？在构建网站时，它几乎违反了所有最佳实践：

搜索引擎将无法很好地为您的网站编制索引（如果有的话）
可维护性降低
无论 JS 引擎有多快，DOM 都是慢的，永远不会像在服务器上构建 HTML 那样快
一个 JS 错误，您的整个网站无法呈现。哎呀。然而，浏览器对 HTML 错误的容忍度非常高。

归根结底，HTML 是显示内容的绝佳工具。 JavaScript 是添加交互的好方法。像你建议的那样把它们混在一起简直是疯了，只会导致问题。

【讨论】：

【解决方案5】：

缺点

SEO
排除没有 javascript 的用户

优点

更快的工作流程/Fluider 界面
小负载减少

如果 SEO 对您来说并不重要，并且您的大多数用户都有 Javascript，您可以创建一个 Single Page Applications。它不会大大减少您的负载，但可以在页面上创建更快的工作流程。

顺便说一句：我不会将所有模板打包到一个文件中。这对于大型项目来说太大了。

【讨论】：