服务器端与客户端 (AJAX) 加载
我想知道什么是最佳实践。假设我有一个下拉选择小部件。当从服务器提供页面时是否应该预加载内容，或者加载页面后是否应该发出 AJAX 请求来检索内容然后填充它？
我有点喜欢将其加载为空并发出 AJAX 调用来检索内容的想法。但这是否会导致页面加载时间变慢？特别是如果页面有多个需要从服务器加载内容的小部件？
加载的内容量重要吗？
对于下拉列表示例，我指的是下拉列表中的选项。因此，如果我有一个员工下拉列表可供选择，我指的是该员工列表。我是否加载一个空的下拉列表并在控制器初始化时让它检索员工并填充下拉列表？
但后来我想到了一个包含 200 行员工的数据网格以及存储在数据库中的一些员工数据。我是否加载页面，并且当页面加载时有一个控制器，其 init 函数检索员工的数据集并填充和显示数据网格？
或者，当从服务器提供页面时，它会在服务器端检索数据集，并在服务器端创建数据网格并随后加载。 这是我过去习惯于主要完成 PHP、JSP 和 ASP 内容的编程世界。仅使用 JavaScript 来实现一些很酷的页面效果等。
但我似乎喜欢这样的想法：一旦页面加载（或正在加载），就发出 AJAX 请求来检索填充当前屏幕上的小部件/内容所需的数据。我只是担心页面的加载可能看起来笨重或缓慢，因为我现在向服务器发出更多请求来绘制页面。对页面的初始请求，然后对填充小部件所需的每个数据集的请求。
I was wondering what is considered best practice. Let's say I have a dropdown select widget. Should it be preloaded with content when the page is served up from the server or once it is loaded, should an AJAX request be made to retrieve the contents and then populate it?
I kinda like the idea of loading it empty and issuing an AJAX call to retrieve the contents. But is that going to result in slower page loading times. Especially if the page has several widgets that need to be loaded with content from the server?
Does it matter on the amount of content being loaded?
For the dropdown example, I meant the options in the dropdown. So if I had a dropdown of employees to choose, from I am referring to that list of employees. Do I load an empty dropdown and on init of the controller have it retrieve the employees and populate the dropdown?
But then I think about a datagrid of let's say 200 rows of emplyees and some employee data that is stored in a database. Do I load the page and when the page loads have a controller whose init function retrieves the dataset of employees and populates and displays the datagrid?
Or when the page is served up from the server does it retrieve the dataset on the server-side where it also creates the datagrid and it gets loaded then.
This is the programming world that I am used to having done mostly PHP, JSP and ASP stuff in the past. Only using JavaScript for some cool page effects, etc.
But I seem to like the idea of once the page is loaded (or being loaded), make AJAX requests to retrieve the data needed to populate the widgets/content on the current screen. I am just concerned that the loading of page might seem clunky or slow since I am now making more requests to the server to paint the page. The initial request for the page, and then a request for each dataset needed to populate a widget.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为最好的答案是“这取决于你的框架”。我见过可以用两种方式处理这个问题的 Web 框架。我确实认为，特别是当大量数据被填充到 DOM 中时，从性能角度来看，最好在初始 HTTP 响应中加载尽可能多的页面，并且仅根据需要通过 AJAX 进行更新。请注意，对于大型数据集，与通过 JavaScript 执行大量 DOM 操作的影响相比，额外 HTTP 请求的性能开销相对较小 - DOM 操作在某些浏览器中可能非常慢。
如果您添加您正在使用的框架，您可能会得到更详细的答案。
I think the best answer is "it depends on your framework". I've seen web frameworks that handle this problem both ways. I do think that, especially when a lot of data is being populated into the DOM, it's preferable from a performance perspective to load as much of the page as possible in the initial HTTP response, and only update as needed via AJAX. Note that for large data sets, the performance overhead of an additional HTTP request is relatively small compared to the impact of performing substantial DOM manipulation via JavaScript -- DOM manipulation can be extremely slow in some browsers.
You might get more detailed answers if you add which framework(s) you're using.
正如您自己指出的那样，使用 AJAX 加载所有内容都会使页面变慢。事实上，加快网页速度的最佳实践之一就是减少 http 请求的数量。
话虽如此，在某些情况下，AJAX 可以使页面加载速度更快。一个例子是文本框的自动完成。如果在不使用 AJAX 的情况下实现这样的功能，则需要网页在第一次加载时加载每个可能的查询。该页面将需要很长时间才能加载所有数据。但是，一旦页面加载，自动完成可能看起来比正常情况有更多响应。
我的建议是从你能想到的最简单的解决方案开始，然后在需要的地方添加 AJAX、缓存和其他优化功能。
As you point out yourself, loading everything with AJAX is going to make the page slow. In fact, one of the best practices for speeding up web pages is to reduce the number of http requests.
That being said, there are some cases where AJAX makes the page load faster. One example is auto complete for a text box. If implemented such a feature without using AJAX that would require the web page to load every single possible query in the first load. The page would take forever to load all that data. But the auto complete would probably seem more response than normal once the page had loaded.
My advice is to start out with the most simple solution you can think of, and then add AJAX, cache and other optimizing features where needed afterwords.
这取决于您显示的数据，如果您想从数据库快速更新，ajax 方法就可以了。
但是如果你的数据是固定的（或者你不关心页面加载后更新它），那么我不应该使用ajax方法，这是更多的工作（请求json，解析它，填充选择或其他什么）并且你不会获得太多好处。
It depends of the data you are displaying, if you want quick updates from the database the ajax approach is fine.
But if your data is fixed (or you don't care about updating it once the page is loaded) then I shouldn't go with the ajax approach, is more work (requesting json, parsing it, populating the select or whatever) and you don't gain much benefit.