使用javascript完全生成html的利弊

最近，我提出了一些关于如何提高系统整体性能的想法 一个web应用程序，与其从web服务器生成一个随时可以显示的html页面，为什么不让它完全在客户端生成呢。 这样做，只需要将纯数据（在我的例子中是JSON格式的数据）发送到浏览器。 这将把生成html的工作从服务器转移到客户端的浏览器和服务器上 减小发送回用户的响应数据包的大小

经过一些研究，我发现这个框架(http://beebole-apps.com/pure/) 做和我一样的事

我想知道这样做的利弊。 对于web服务器和现代浏览器来说，Javascript代码的运行速度肯定更快更好，因此可以快速生成页面

这种方法的缺点可能是搜索引擎优化。 我不确定像谷歌这样的搜索引擎是否会为我的网站建立适当的索引。 你能告诉我这种方法的缺点是什么吗？

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

在head中，简单的javascript代码如下所示：

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

函数onPageLoad（）{
htmlGenerate（$（'#data'）.val（））；
} 

在主体中，仅存在一个元素，仅用作数据容器，如下所示：

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

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

Yikes

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

你可以继续这种疯狂的行为，但最终你会学到艰苦的方法。我建议您首先使用jQuery模板和纯代码方式尝试一些原型。理智肯定会战胜你，我的朋友，我要说的是，经过一段时间的尝试，你的理智会战胜你

---

可以使用AJAX动态加载所需模板的内容。如果您需要在一个请求中下载每一个可想到的模板，那么使用万灵药方法是没有意义的。

客户端模板通常用于

你必须权衡利弊：

优点：

• 更灵敏的接口
• 减少web服务器上的负载

缺点：

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

如果你走这条路，我建议你看看。 您可以在此处找到教程和示例：

SPA示例：

---

再看看这个答案：

优点是什么？我真的想不出有什么。您说在web服务器中会更容易，但web服务器的设计目的是提供HTML

犯人？在构建网站时，它与几乎所有最佳实践背道而驰：

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

最终，HTML是显示内容的好工具。JavaScript是添加交互的好方法。像你建议的那样把它们混在一起只会导致问题。

缺点

• 搜索引擎将无法为您的页面编制索引。如果他们这样做了，你就很幸运了
• 禁用JavaScript的用户或移动设备上的用户很可能无法使用它
• 速度优势可能是最小的，特别是如果用户使用的是像IE一样的速度较慢的JavaScript引擎
• 可维护性：除非自动生成javascript，否则这将是一场噩梦

总而言之 如果您只是为了提高速度而使用此方法，则不建议使用此方法。然而，这通常是在web应用程序中完成的，在web应用程序中，用户保持在同一个页面上，但是您可能最好使用现有的框架之一来实现这一点，例如，并确保它通过遵循或（如@rohk所建议的）保持可爬行状态

如果这只是你想要的性能，而你的应用程序并不需要严格按照这种方式工作，那就不要这样做。但是如果你这样做了，那么一定要以标准化的方式来做，这样它才能保持快速和可转位。

Cons

排除没有javascript的用户

专业人士

更快的工作流/Fluider界面

小负荷减载

如果SEO对你来说并不重要，而且你的大多数用户都有Javascript，那么你可以创建一个搜索引擎。它不会大大减少您的负载，但可以在页面上创建更快的工作流

---

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

我使用ExtJS来实现这一点：如果你正在构建一个具有真正用户功能的web应用程序（例如，电子邮件系统或诸如此类），客户端生成方法可以很好地工作。如果你正在构建一种为公众消费提供（大部分是静态查看的）内容的方法（例如，文档或公司营销网站），发送HTML并使用不引人注目的JS方法。这取决于网站的关注点。一个公司的营销网站，html和不引人注目的Javascript。对于专用的web应用程序，s