javascript - 我应该使用 JavaScript 还是服务器来呈现这个模板?

标签 javascript html templates backbone.js

我正在呈现新闻提要。

我打算将 Backbone.js 用于我的 javascript 内容,因为我厌倦了使用 JQuery 进行手动 DOM 绑定(bind)。

所以现在我正在考虑 2 个选项。

  1. 当用户加载页面时,“新闻提要”容器是空白的。但是该页面触发了一个 javascript,它将新闻提要的项目呈现到屏幕上。这将与 Backbone 的模型和集合等相关。

  2. 当用户加载页面时,“新闻提要”由服务器呈现。即使关闭了 javascript,项目仍然会显示,因为服务器通过模板引擎呈现它。

我想使用 Backbone.js 来保持我的 javascript 干净。所以,我应该选择#1,对吧??但是#1比#2复杂得多。

顺便说一句,我问这个问题的原因是因为我不想使用 Backbone.js 的路由功能。我会单独加载每个页面,并将 Backbone 用于页面的各个项目。换句话说,我在中途使用 Backbone.js。

如果我要使用 Backbone.js 的路由功能,那么显而易见的答案就是 #1,对吧?但是我担心构建路线系统会花费太多时间,而且时间也应该平衡到我的方程式中。

如果这个问题令人困惑,我很抱歉:我只想知道使用 Backbone.js 并节省时间的最佳实践。

最佳答案

两者各有利弊,所以我想说的是:根据你的要求选择最适合的选项。

我不知道 Backbone.js,所以我将保留我对客户端渲染与服务器端渲染的回答。

客户端渲染

这种方法允许您在服务器端快速渲染结构,然后让用户的 JavaScript 获取实际内容。

优点:

  • 更快的用户体验:如果在初始渲染中有足够的静态内容,那么用户可以更快地返回他们的页面(或至少是它的开头),他们不会被打扰动态内容,因为它很可能也会以相当快的速度呈现。
  • 更好地控制缓存:通过要求浏览器发出多个请求,您可以将服务器设置为对每个 URL 使用不同的缓存 header ,具体取决于您的要求。通过这种方式,您可以允许用户缓存初始页面呈现,但要求用户每次都获取动态(变化的)内容。

缺点:

  • 用户必须启用 JavaScript:这是一个显而易见的问题,我什至不需要提及它,但如果你不这样做,你将削减(非常小的)一部分用户群'不要为你的 JS 重的网站提供一个优雅的替代方案。
  • 复杂性:这有点主观,但在某些方面,将所有内容都使用服务器端语言会更简单,并且不需要太多来回。当然,它可以是双向的。
  • 后处理慢:这取决于浏览器,但事实是,如果在检索动态内容后需要进行大量 DOM 操作或其他后处理,则可能会更快如果服务器未充分利用,则让服务器执行此操作。大多数浏览器都擅长基本的 DOM 操作,但如果您必须进行 JSON 解析、排序、算术等,其中一些在服务器上可能会更快。

服务器端渲染

这种方法允许用户一次接收所有内容,也适合没有良好 JavaScript 支持的浏览器,但这也意味着在浏览器获得第一个 标签。

优点:

  • 内容同时出现:如果您的服务器速度很快,它会一次性渲染所有内容,仅此而已。没有乱七八糟的 XmlHttpRequest(还有人直接使用它们吗?)。
  • 快速后处理:就像您不希望应用程序层对数据库查询集进行排序一样,因为数据库更快,您可能还希望在服务器端。如果您针对客户端方法进行设计,则很容易忘乎所以并将处理放在错误的位置。

缺点:

  • 感知用户体验较慢:在服务器完成所有工作之前,用户将无法看到单个字节。当然,服务器可能会快速通过它,但在用户方面仍然需要几秒钟的时间,您可以通过立即渲染来帮他们一个忙。
  • 由于服务器在请求上花费更多时间而无法扩展:您可能真的希望服务器快速完成请求并继续进行下一个连接。

其中哪些对您的要求最重要?这应该会影响您的决定。

关于javascript - 我应该使用 JavaScript 还是服务器来呈现这个模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8372099/

相关文章:

java - 如何在 Rhino 中子类化内部(静态)类?

javascript - 将鼠标悬停在另一个div上时,将其定位到特定div

javascript - 带有原型(prototype)的 Ajax 请求 - 如果不仅仅是 responseText,那么传输是什么?

javascript - 如何将页面背景图像设置为引用页面的背景图像

c++ - 如何使内部模板类成为外部模板类的类型?

javascript - 遍历javascript中的整数,其中每个值都等于一个数字

html - 将div边框放在包含文本的前面(固定显示)

html - Shiny 的应用程序 - 单击新选项卡后,该选项卡仍被浏览器选中

c++ - 为什么特化论证必须无效?

javascript - 使输入的disabled属性与Meteor帮助程序 react 的最佳方法是什么?