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?
我想知道什么是最佳实践。假设我有一个下拉式选择小部件。当从服务器上提供页面时，它应该预先加载内容，还是加载页面之后，应该发出AJAX请求来检索内容并填充它?
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?
我有点喜欢将其空装载并发出AJAX调用来检索内容。但这会导致页面加载速度变慢吗?特别是如果页面有几个需要从服务器加载内容的小部件?
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?
对于下拉列表示例，我指的是下拉列表中的选项。如果我有一个员工名单，我指的是员工名单。我是否加载了一个空下拉列表，在控制器的init中让它检索员工并填充下拉列表?
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?
然后，我想到了一个datagrid，比如200行emplyees和一些存储在数据库中的员工数据。我是否加载页面，当页面加载时，是否有一个控制器的init函数检索员工的数据集并填充并显示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.
或者，当从服务器端提供页面时，它会在服务器端检索数据集，在服务器端也创建datagrid，然后加载数据集。这是我过去经常做的编程世界，主要是PHP、JSP和ASP。只使用JavaScript实现一些很酷的页面效果，等等。
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.
但是我似乎喜欢这样的想法:一旦页面被加载(或被加载)，就发出AJAX请求来检索填充当前屏幕上的小部件/内容所需的数据。我只是担心页面的加载可能会显得笨拙或缓慢，因为我现在向服务器发出了更多的请求来绘制页面。页面的初始请求，以及填充小部件所需的每个数据集的请求。
3 个解决方案
#1
3
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.
我认为最好的答案是“这取决于你的框架”。我见过web框架以两种方式处理这个问题。我确实认为，特别是当大量数据被填充到DOM中时，从性能的角度来看，最好在初始HTTP响应中加载尽可能多的页面，并且只通过AJAX进行必要的更新。注意，对于大型数据集，与通过JavaScript执行大量DOM操作相比，附加HTTP请求的性能开销相对较小——在某些浏览器中，DOM操作可能非常慢。
You might get more detailed answers if you add which framework(s) you're using.
如果您添加正在使用的框架，您可能会得到更详细的答案。
#2
1
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.
正如您自己指出的，使用AJAX加载所有内容将使页面速度变慢。事实上，加速web页面的最佳实践之一是减少http请求的数量。
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.
也就是说，有些情况下AJAX使页面加载速度更快。一个例子是文本框的自动完成。如果实现这样的特性而不使用AJAX，则需要web页面在第一次加载中加载每个可能的查询。加载所有数据需要花很长时间。但是，一旦页面加载完毕，自动完成看起来可能会比正常情况下响应更多。
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、缓存和其他优化特性。
#3
0
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.
这取决于您所显示的数据，如果您希望从数据库中快速更新，那么ajax方法是可以的。但是，如果您的数据是固定的(或者您不关心在页面加载后更新它)，那么我就不应该使用ajax方法，这需要更多的工作(请求json、解析它、填充select或其他)，而且您也不会得到什么好处。
#1
3
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.
我认为最好的答案是“这取决于你的框架”。我见过web框架以两种方式处理这个问题。我确实认为，特别是当大量数据被填充到DOM中时，从性能的角度来看，最好在初始HTTP响应中加载尽可能多的页面，并且只通过AJAX进行必要的更新。注意，对于大型数据集，与通过JavaScript执行大量DOM操作相比，附加HTTP请求的性能开销相对较小——在某些浏览器中，DOM操作可能非常慢。
You might get more detailed answers if you add which framework(s) you're using.
如果您添加正在使用的框架，您可能会得到更详细的答案。
#2
1
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.
正如您自己指出的，使用AJAX加载所有内容将使页面速度变慢。事实上，加速web页面的最佳实践之一是减少http请求的数量。
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.
也就是说，有些情况下AJAX使页面加载速度更快。一个例子是文本框的自动完成。如果实现这样的特性而不使用AJAX，则需要web页面在第一次加载中加载每个可能的查询。加载所有数据需要花很长时间。但是，一旦页面加载完毕，自动完成看起来可能会比正常情况下响应更多。
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、缓存和其他优化特性。
#3
0
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.
这取决于您所显示的数据，如果您希望从数据库中快速更新，那么ajax方法是可以的。但是，如果您的数据是固定的(或者您不关心在页面加载后更新它)，那么我就不应该使用ajax方法，这需要更多的工作(请求json、解析它、填充select或其他)，而且您也不会得到什么好处。