HTML下拉菜单加载速度很慢[关闭]答案

【问题标题】：HTML Dropdown Menu very slow to load [closed]HTML下拉菜单加载速度很慢[关闭]
【发布时间】：2018-05-22 21:53:54
【问题描述】：

我正在为客户开展一个项目，以使他们的花名册查看和条目无纸化。有些东西依赖于用户输入，但有些东西是变化的常量，是从数据库中提取的。从所述数据库中提取其信息的下拉列表之一在我的测试环境中加载非常缓慢 - 我单击它，项目实际显示需要两到三秒。

我认为这是因为下拉列表很容易包含接近 400 个项目。我想知道的是是否有任何方法可以优化它以加快加载速度。在中途甚至四分之一处切断并制作更多下拉菜单超出了项目的规范，因此这样的建议必须通过客户才能继续进行。不过，如果这是唯一的解决方案，我会这样做。

提前感谢您的建议。

编辑：

这种疏忽让我发笑，但我对 400 项的保守估计是错误的 - 该列表包含 12,700 项。
对于所有假设 SQL 查询可能很慢的人 - 我正在从一个表执行简单的 SELECT DISTINCT，只有一个 WHERE 条件。

【问题讨论】：

如果您想获得有意义的帮助，您需要提供更多详细信息。但首先，测量实际花费的时间。400 并不是一个巨大的数字，所以应该有一些方法可以加快速度。
正如@xs0 所说，请输入一些代码来演示您如何填充下拉列表。基于这个问题，我假设您在打开下拉菜单时向服务器发出请求，这需要时间。最好预取结果并将其存储在 DOM 中
此外，虽然 400 个项目听起来很多，但就浏览器下拉菜单的性能而言，真的几乎不重要。看看这个小提琴的基本演示：jsfiddle.net/zv03dkym

标签： php html mysql

【解决方案1】：

在能够很好地回答这个问题之前，您需要进行更多的测试和调试，以确定究竟是什么导致了速度变慢。

这只是您的机器运行缓慢的问题吗？在真实的网络服务器上进行测试，看看情况如何。
从数据库中选择慢吗？如果是这样，那就有问题了，从 mysql 中选择应该非常快。
php 慢吗？如果是这样，您可以使用像 PhpStorm 这样的 IDE 来查看究竟哪些函数需要运行多长时间。
客户端浏览器中的渲染速度慢吗？如果是这样，我们可以看看优化 javascript/html。

正如上面评论中提到的，我们还需要知道您何时从数据库中获取数据（在页面加载或 ajax 之前）。因此，在您真正了解如何来加快速度之前，您需要知道什么花了这么长时间。从那里开始。还要确保检查您的 javascript 和 html 是否有任何错误。将整个页面的 html 复制/粘贴到此处，并修复所有错误和警告：http://validator.w3.org/#validate_by_input 对于 javascript，请检查调试器控制台。

【讨论】：

【解决方案2】：

您可以使用无限滚动来分解返回的数据量。看看这个答案：

infinite scroll select

但这可能不是根本问题。我会检查您的查询的性能，以确保这不是问题所在。

【讨论】：