9

最近，我想出了一些关于如何提高 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>

在正文中，只有一个元素存在，仅用作数据容器，如下所示：

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

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

4

5 回答 5

7

缺点

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

总而言之

如果您只是为了提高速度而这样做，则不建议使用此方法。但是，它通常在 Web 应用程序中完成，用户停留在同一页面上，但是您最好使用现有的框架之一，例如骨干网，并通过遵循Google 的方法确保它仍然可抓取hashbang 指南或HTML5 PushState（如@rohk 所建议）。

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

于 2011-12-21T08:11:50.127 回答
3

客户端模板通常用于单页应用程序。

你必须权衡利弊：

优点：

  • 更灵敏的界面
  • 减少 Web 服务器上的负载

缺点：

  • 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

于 2011-12-21T08:09:08.453 回答
1

哎呀。

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

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

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

于 2011-12-21T08:05:11.707 回答
0

优点？我实在想不出来。您说在网络服务器中会更容易，但提供 HTML 是网络服务器的设计目的。

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

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

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

于 2011-12-21T08:09:24.917 回答
0

缺点

  1. 搜索引擎优化
  2. 排除没有 javascript 的用户

优点

  1. 更快的工作流程/流体界面
  2. 小负荷减少

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

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

于 2011-12-21T08:39:43.063 回答