我应该使用 JavaScript 还是服务器来呈现这个模板? [英] Should I render this template using JavaScript or the server?
问题描述
我正在渲染新闻提要.
我打算将 Backbone.js 用于我的 javascript 内容，因为我厌倦了使用 JQuery 进行手动 DOM 绑定.
I'm planning to use Backbone.js for my javascript stuff because I'm sick of doing manual DOM binds with JQuery.
所以现在我正在考虑 2 个选项.
So right now I'm looking at 2 options.
当用户加载页面时，新闻提要"容器是空白的.但是页面会触发一个 javascript，它将新闻提要的项目呈现到屏幕上.这将与 Backbone 的模型和集合等相关联.
When the user loads the page, the "news feed" container is blank. But the page triggers a javascript which renders the items of the news feed onto the screen. This would tie into Backbone's models and collections, etc.
当用户加载页面时，新闻提要"由服务器呈现.即使关闭了 javascript，项目仍会显示，因为服务器通过模板引擎呈现它.
When the user loads the page, the "news feed" is rendered by the server. Even if javascript was turned off, the items would still show because the server rendered it via a templating engine.
我想使用 Backbone.js 来保持我的 javascript 干净.所以，我应该选择#1，对吧??但是#1 比#2 复杂得多.
I want to use Backbone.js to keep my javascript clean. So, I should pick #1, right?? But #1 is much more complicated than #2.
顺便说一句，我问这个问题的原因是因为我不想使用Backbone.js的路由功能.我会单独加载每个页面，并为页面的各个项目使用 Backbone.换句话说，我在使用 Backbone.js 中途.
By the way, the reason I'm asking this question is because I don't want to use the routing feature of Backbone.js. I would load each page individually, and use Backbone for the individual items of the page. In other words, I'm using Backbone.js halfway.
如果我要使用 Backbone.js 的路由功能，那么显而易见的答案将是 #1，对吗?但我担心建立路线系统会花费太多时间，并且时间也应该平衡到我的等式中.
If I were to use the routing feature of Backbone.js, then the obvious answer would be #1, right? But I'm afraid it would take too much time to build the route system, and time should be balanced into my equation as well.
如果这个问题令人困惑，我很抱歉:我只想知道使用 Backbone.js 和节省时间的最佳实践.
I'm sorry if this question is confusing: I just want to know the best practice of using Backbone.js and saving time as well.
推荐答案
两者各有优缺点，所以我想说的是:根据选择最适合你的选项em>您的要求.
There are advantages and disadvantages to both, so I would say this: choose the option that is best for you, according to your requirements.
我不知道 Backbone.js，所以我将保留我对客户端与服务器端渲染的回答.
I don't know Backbone.js, so I'm going to keep my answer to client- versus server-side rendering.
这种方法允许您在服务器端快速呈现您的结构，然后让用户的 JavaScript 获取实际内容.
This approach allows you to render your structure quickly on the server-side, then let the user's JavaScript pick up the actual content.
优点:
- 更快的感知用户体验:如果初始渲染中有足够多的静态内容，那么用户可以更快地返回他们的页面(或至少是它的开头)并且他们不会被打扰动态内容，因为它很可能也会以相当快的速度呈现.
- 更好地控制缓存:通过要求浏览器发出多个请求，您可以将服务器设置为针对每个 URL 使用不同的缓存标头，具体取决于您的要求.通过这种方式，您可以允许用户缓存初始页面呈现，但要求用户每次获取动态(更改)内容.
- Quicker perceived user experience: if there's enough static content on the initial render, then the user gets their page back (or at least the beginning of it) quicker and they won't be bothered about the dynamic content, because in all likelihood that will render reasonably quickly too.
- Better control of caching: By requiring that the browser makes multiple requests, you can set up your server to use different caching headers for each URL, depending on your requirements. In this way, you could allow users to cache the initial page render, but require that a user fetch dynamic (changing) content every time.
缺点:
- 用户必须启用 JavaScript:这是一个显而易见的问题，我什至不需要提及它，但是如果您不这样做，您将削减(非常小的)用户群的一部分不为您的 JS 密集型网站提供优雅的替代方案.
- 复杂性:这有点主观，但在某些方面，将所有内容都用服务器端语言编写会更简单，不需要太多的来回.当然，它可以双向进行.
- 后处理慢:这取决于浏览器，但事实是，如果在检索动态内容后需要进行大量 DOM 操作或其他后处理，则可能会更快如果服务器未充分利用，则让服务器执行此操作.大多数浏览器都擅长基本的 DOM 操作，但如果您必须进行 JSON 解析、排序、算术等，其中一些在服务器上可能会更快.
- User must have JavaScript enabled: This is an obvious one and I shouldn't even need to mention it, but you are cutting out a (very small) portion of your user base if you don't provide a graceful alternative to your JS-heavy site.
- Complexity: This one is a little subjective, but in some ways it's just simpler to have everything in your server-side language and not require so much back-and-forth. Of course, it can go both ways.
- Slow post-processing: This depends on the browser, but the fact is that if a lot of DOM manipulation or other post-processing needs to occur after retrieving the dynamic content, it might be faster to let the server do it if the server is underutilized. Most browsers are good at basic DOM manipulation, but if you have to do JSON parsing, sorting, arithmetic, etc., some of that might be faster on the server.
这种方法允许用户一次接收所有内容，也迎合了没有很好的 JavaScript 支持的浏览器，但这也意味着在浏览器获取第一个 标签.
This approach allows the user to receive everything at once and also caters to browsers that don't have good JavaScript support, but it also means everything takes a bit longer before the browser gets the first <html> tag.
优点:
- 内容一次全部显示:如果您的服务器速度很快，它将一次性呈现所有内容，仅此而已.没有凌乱的 XmlHttpRequests(还有人直接使用它们吗?).
- 快速后处理:就像您不希望应用程序层对数据库查询集进行排序一样，因为数据库速度更快，您可能还希望在服务器端.如果您针对客户端方法进行设计，则很容易忘乎所以并将处理放在错误的位置.
- Content appears all at once: If your server is fast, it will render everything all at once, and that's that. No messy XmlHttpRequests (does anyone still use those directly?).
- Quick post-processing: Just like you wouldn't want your application layer to do sorting of a database queryset because the database is faster, you might also want to reserve a good amount of processing on the server-side. If you design for the client-side approach, it's easy to get carried away and put the processing in the wrong place.
缺点:
- 感知用户体验较慢:在服务器的工作全部完成之前，用户将无法看到一个字节.当然，服务器可能会快速通过它，但在用户方面仍然需要几秒钟的时间，您可以通过立即呈现您可以做的事情来帮他们一个忙.
- 扩展性不佳，因为服务器在请求上花费更多时间:您可能真的希望服务器快速完成请求并继续进行下一个连接.
- Slower perceived user experience: A user won't be able to see a single byte until the server's work is all done. Sure, the server is probably going to zip through it, but it's still a few extra seconds on the user's side and you would do them a favor by rendering what you can right away.
- Does not scale as well because server spends more time on requests: It might be that you really want the server to finish a request quickly and move on to the next connection.
其中哪些对您的要求最重要?这应该会影响您的决定.
Which of these are most important to your requirements? That should inform your decision.
这篇关于我应该使用 JavaScript 还是服务器来呈现这个模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
