如何加速具有大量数据的服务器绑定控件的网页

Question

我正在处理一个包含多个服务器端下拉列表的页面，其中一个包含500个项目。根据选择的内容，我在回发期间显示/隐藏其他页面元素（我只在初始加载时绑定数据）。客户打开这个页面很多，我不希望他们每次打开它时都会拉下500个项目。目前，页面渲染大约需要2到5秒。我已经开始迁移到页面的完整javascript / jquery版本，但想要你的意见，因为我不喜欢新版本。

有没有办法让这个页面更快，并限制每次拉下所有500个项目？

注意：有些用户希望直接输入牙科程序代码。其他人需要查看。

Answer 1

我已经有一段时间了，因为我已经完成了asp.net，但是记住了一些来自Ajax控件工具包的东西，就像一组过滤下拉组合项目，所以你不必得到完整的列表。

例如，如果您获得所有汽车的列表，您可以将第一个下拉列为制造商，选择时会激活第二个下拉列表及其模型范围。它限制了您必须立即加载的数据量。

Answer 2

下拉列表不是500个项目的好容器，因为looong列表看起来很难看并且很难找到一个项目。您可以使用分页功能将其更改为类似于表格的控件（从服务器视图，网格视图或转发器）（例如，每页显示20个项目），还可以在表格上方添加一些文本框，用户可以通过快速查找项目输入一些关键字。之后，将表放在更新面板中，以便在单击某个按钮时使页面部分更新。

Answer 3

您可以在页面上执行的任何不需要整个页面更改的内容都可以通过将其封装在UpdatePanel中来制作AJAX-y。 UpdatePanels和ScriptManagers允许ASP.NET页面使用AJAX执行部分回发，这将通过大幅减少必须遇到的数据量来加速除了整页重新加载之外的任何内容。

其他表现提示/技巧：

• 如果您正在使用ORM或通用查询来提取记录，请尝试提取显示结果所需的最少量数据。来自数据库并被消化到视图模型中的数据越多，后端就越慢。
• 避免使用嵌套的MultiView。多视图非常适合以“选项卡”方式组织大量数据，但在幕后，MultiView将呈现为一系列带有CSS的div来隐藏/显示它们。这意味着必须在初始页面加载时呈现MultiView的每个选项卡。当多个MultiView嵌套为其他MultiView的视图时，问题就更复杂了。您可以通过使用代码隐藏来动态选择并将适当的控件插入到页面中，或者通过使用其他代码来检测此控件对应的View是否是当前选择的视图，并跳过任何繁重的数据检索来避免这种情况/处理否则会发生。您可以将这两种方法与一些AJAX组件结合使用。

Answer 4

我们处理的系统可以从下拉列表中选择用户名，然后在下面显示用户信息。大约有600个用户，其中一个利益相关者要求是用户必须在下拉列表中进行选择 - 利益相关者认为非技术用户更好地“了解”如何使用下拉列表。

我们加载下拉列表的表现非常好。我们执行以下操作：

1. 尽快加载页面但不要加载下拉列表
2. 在页面加载时，显示加载指示符，然后立即获取下拉列表的数据
3. 我们通过使用jQuery调用webservice获取数据，该jQuery仅返回用户名和ID，并以JSON格式返回数据
4. 请求数据的查询缓存在服务器上以供将来请求
5. 生成的JSON对象用于填充下拉列表
6. 隐藏加载指示器，您已完成

上述情况发生得非常快，可以提供非常愉快的用户体验。

如果有的话，请尽量做到以下几点：

• 即使您使用的是更新面板，也可以避免回发 - 如果您拥有较大的视图状态，这些会导致性能下降
• 仅返回填充下拉列表所需的绝对最小数据
• 不要访问任何不是立即需要的数据。尽可能快地加载页面，然后在用户阅读页面时获取剩余信息

向页面添加大量数据时，毫秒计数。您可以采取的任何措施来减少对数据的调用（以及随后将该数据添加到页面中），这将极大地改善用户体验。

Answer 5

我首先要正确索引数据库。

Answer 6

加速发展的一种方法是摆脱回发。显示/隐藏页面元素是客户端操作，不需要回发。如果您已经使用了jQuery，则可以.show()和.hide()页面上的任何元素。

这不一定能解决初始页面加载的性能问题，但会在与页面交互时提高整体用户体验的性能。

对于初始加载，可能会将各种数据绑定元素分解为在初始页面标记加载后在幕后发生的AJAX调用？我在黑暗中拍摄，却不知道有关页面的很多内容，但值得一试。也许在没有列表中的数据的情况下加载基本标记，然后在$(document).ready()上对服务器端处理程序进行AJAX调用，该处理程序返回第一个菜单的元素。然后，当选择每个菜单时，以相同的方式获取下一个菜单的元素。

整体加载时间大致相同（甚至可能只有几分之一秒），但UI会在此期间完全渲染，并且您将使用用户花在页面上的时间并开始与它交互，几秒钟，以加载其余的。

修改：针对您在上述问题中的一条评论，或许您可以使用jQuery UI Autocomplete来改善用户体验吗？用户是否一定要从列表中选择代码，或者他们是否更容易开始键入代码并缩小到正确的代码？从数据输入的角度来看，避免鼠标使用通常是一个好主意。

Answer 7

使用javascript或任何客户端脚本不是解决方案，因为客户端浏览器可能禁用了javascript ...

我建议你这些opmization，

1. 如果您的表包含500条记录，则优化数据库查询 不经常插入/更新操作然后创建非聚簇索引。

2. 如果不经常更改，请缓存数据。

3. 创建存储过程可以改进查询结果，因为它是预编译查询并防止sql注入攻击。