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

I am working on a project for a client to make their roster viewing and entry paper-free. Some things rely on user input, but others are varied constants and are pulled from a database. One of the dropdowns pulling its information from said database is loading very slowly in my testing environment - I click it, and it takes two to three seconds for the items to actually show up.

I assume this is because the dropdown contains easily close to 400 items. What I'd like to know is if there is any way I can optimize this to make the loading faster. Cutting off at halfway or even a fourth of the way and making more dropdowns is outside of specification for the project, so a suggestion like that would have to go through the client for the go ahead. If that's the only solution, though, I'll do that.

Thanks in advance for suggestions.

EDIT:

  1. This is the kind of oversight that makes me laugh, but I was wrong about my conservative estimate of 400 items - the list contains 12,700 items.
  2. For all who assume the SQL query may be slow - I am doing a simple SELECT DISTINCT from one table, with only one WHERE condition.

Before this question can be answered well, you'll need to do more testing and debugging to figure out what exactly is slowing things down.

  • Is this just a problem with your machine running something slowly? Test things out on a real webserver and see how things go.

  • Is the select from the database slow? If so, that's a problem, selects from mysql should be really fast.

  • Is the php slow? If so, you can use an IDE like PhpStorm to see exactly what functions take how long to run.

  • Is the rendering in the client browser slow? If so, we can look at optimizing the javascript/html.

As noted in a comment above, we also need to know when you are getting data from the database (before the page loads, or ajax). So before you can really look at how to speed this up, you need to know what is taking so long. Start there. Also make sure to check your javascript and html for any errors. Copy/paste the entire page's html into here, and fix all errors and warnings: http://validator.w3.org/#validate_by_input For javascript, check the debugger console.

You could use an infinite scroll to break up the amount of data being returned. Take a look at this answer:

infinite scroll select

This may not be the underlying issue though. I would check the performance of your query to ensure that is not where the issue lies.