将HTML页面拆分为较小的块并使用AJAX进行组合是否更好？或者将它作为单个页面更好？

Question

我们正在处理一个包含多个标签的页面，这些标签包含标签和文本框等所有静态信息，用于检索注册信息。我们使用Jquery UI选项卡，因此我们将所有选项卡详细信息作为Divs放在同一页面中。我的同事觉得很难管理页面，因为它有近800行的HTML代码。如果我们将页面拆分为多个html文件并使用AJAX提供标签，那会不会成为性能问题？

先谢谢。

此致 拉加

Answer 1

1. 仅在您需要时加载您需要的内容。如果可能的话，仅此而已。
2. 自由使用AJAX，但编写AJAX返回代码，以便可以通过AJAX调用或包含在服务器中，然后
3. 返回首次加载时从服务器可见的页面部分。至少，返回页面的大部分内容，只留下轻量级非关键方面以便以后加载AJAX。

通过仔细考虑＃2，您将获得良好的初始性能以及使用AJAX的能力。

如果页面变得太长以至于难以维护，那么将主页分成单独的功能部分是合理的。为此使用服务器端包含。注意这与＃2完全吻合！你如何分解你的代码取决于你。

在所有情况下，尝试编写可重用的组件来处理事情而不需要重复相同的代码。在有意义的情况下使用额外的间接层（并非总是如此）。

当涉及到避免重复时，不仅仅是代码，而且html也是候选者。如果在类似元素的多个实例周围存在一些相同的任意结构，也许您可​​以将其移动到函数中而不是一遍又一遍地嵌入。它可能有助于停止将Web页面视为文档，更像是您正在编写要输出的程序的XML数据流。您希望尽可能使该程序简单，优雅，可维护和合理。

下次您决定在网页中更改一些重复的html元素时，您会感谢自己将代码移动到一个只需要在一个地方进行更改的功能。

随着时间的推移练习这种编码风格会提高你的技能，并且下次以这种方式编写代码时会更容易，更自动。

Answer 2

绝对是宗教问题。如果您的开发环境不支持书签或其他内容，请创建多个文件并在上传前使用一些简单的脚本进行组合。
当仅使用第一页时，使用AJAX是合理的，而其他文件是可选的。

Answer 3

你在服务器端使用了什么？ PHP？ Ruby on Rails？ Groovy的？ Java的+ JSP的？

如果您是，可能会将页面拆分为不同的页面。但不是通过AJAX加载它们，而是将它们包含在主页面中。表现应该不是问题。

Answer 4

如果主页中只有初始标签html，它可以帮助提高性能。然后在主页加载后使用AJAX拉入其他选项卡。

初始页面下载较小，当用户已经有需要查看时，其他选项卡会加载。

Answer 5

该页面的正常用法是什么？

如果用户一次访问所有页面是常见的，那么在一个页面上加载所有页面会更快（由于请求数量较少）。它还具有更易于使用的好处：人类和机器人。

但是，如果大多数用户只看到读取/使用一小部分内容，那么使用AJAX会更有效。

从可用性方面来看，另一件要问的问题是：一切都必须在一个页面中吗？你能把它分成多个小页面吗？你可以省略可选字段，并在以后需要时询问它们吗？

如果您使用的是服务器端语言，则应该能够通过包含（或类似功能）将页面分成更小的文件。

Answer 6

我不一定称之为性能问题。实际上，您可能会注意到初始页面加载速度稍快一些。根据客户端与服务器之间连接的性能，这些选项卡可能需要一段时间才能加载。

如果我是你，我会更加关注将AJAX引入您的应用程序会产生什么影响（特别是搜索引擎索引，如果这对您来说很重要）。通过AJAX加载的内容将无法索引，您必须弄清楚如何优雅地处理标签加载时间等。

Answer 7

我个人会使用渐进式增强功能。首先，将每个标签拆分为单独的页面以开始。每个页面都显示选项卡行，每个选项卡链接到相应的页面。

然后使用ubobtrusive Javascript向每个标签添加onclick方法，而不是加载整个新页面，只需通过AJAX加载选项卡中的内容。

您可能需要使用参数调用页面，说明您是否使用AJAX - 如果不是，则返回包含其设计的页面。如果您使用的是AJAX，它将只返回选项卡的代码。