0

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.
3
  • 2
    You need to provide far more details, if you'd like to get meaningful help. But first, measure where the time is actually spent.. 400 is not a huge number, so there ought to be some way to speed things up..
    – xs0
    Commented Dec 8, 2017 at 16:05
  • 2
    As @xs0 said, please enter some code demonstrating how you're populating the dropdown. Based on the question, I'm assuming you're making a request to the server on dropdown open, which is going to take time. It would be better to prefetch the results and store it in the DOM Commented Dec 8, 2017 at 16:06
  • Additionally, while 400 items sounds like a lot, in terms of the performance of a browser dropdown that really barely matters. Look at this fiddle for a basic demonstration: jsfiddle.net/zv03dkym Commented Dec 8, 2017 at 16:11

2 Answers 2

1

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.

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.