drop down menu populating with delay on first page load

Question

I created toggled dropdown menu using bootstrap. The drop down menu items are populated using an ajax call. The ajax request makes a call to a PHP script which fetches values from the database and populates the dropdown menu items. I used an unordered list to display items in the drop down menu. When I click on the button responsible for ajax call, the items are getting populated but with a delay. When I click on the button again, no delay is being observed.

JQuery:

$(document).on('click',"#itemsButton",function (e) {
                    e.preventDefault();
                    var osn = $("#osn").val();
                    //$("#items-dropdown").empty();
                    var dataString = 'searchString=' + osn;
                    if ($.trim(osn).length > 0) {
                     $.ajax({//create an ajax request to load_page.php
                            type: "POST",
                            url: "retrieveItemsOrdered.php",
                            data: dataString,
                            cache: false,
                            dataType: "html", //expect html to be returned
                            success: function (html) {
                                $("#items-dropdown").html(html); 
                            }
                        });
                    }

                });

HTML:

<div class='itemsmenu btn-group'>";
                    <button type='button' class='btn dropdown-toggle' data-toggle='dropdown' id='itemsButton'>
                    <span class=>Click here to view items&nbsp</span>
                    <span class='pull-right'><i class='fa fa-caret-down'></i></span>
                    </button>
                    <ul class='dropdown-menu ' role='menu' id='items-dropdown'>
                    </ul>
</div>

PHP:

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
       echo "<li class='ordeinfo-style'>";
       echo "<b>".$row['sku']."</b>";
       echo "</li>";
    }

CSS:

.dropdown-menu {
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none
        }       
        .itemsmenu .btn{
    text-align: center;
        }
        ul {
                min-width: 200px;
        }
        .items-dropdown{
            text-align: center;
        }
        ul b{
                font-weight: normal;
                display: inline block;
                font-size: 16px;
                font-weight: bolder;
                color: #000;
        }
        .quantity{
            font-size: 16px;
            margin-right: 20px;
            color: #000;
        }

Please let me understand why I am experiencing delay when button is clicked for the first time to display the drop down menu items

Answer 1

update, please see these questions PHP with MySQL is Slow (SOLVED) and Why is the response on localhost so slow?

the below is no longer applicable

The first ajax call to retrieveItemsOrdered.php will have some delay, depending on the query itself, number of results and where the DB server is located.

The second call, ex. second time you click the button, will produce faster results because the db query result will be cached by both the driver (mysqli and the mysql server).

You could inspect/explain the DB query itself and optimize it to reduce the delay.

Answer 2

This is natural because you are using AJAX call to get the records from the DB and has nothing to do with any of styles or HTML .

Now that call is making a journey all the way down to your DB and give you response back so you are experiencing the delay. This was when you click the button first time. When you click on the button again for a round trip as you see, the response cached by browsers and your previous records were still there in list so delay was almost unnoticeable.

The delay could be due to many reasons. Either your DB is at some remote location or your DB query took some extra time to evaluate. It would be even worst if you are dealing with large amount of data.

Remember, making an AJAX call does not mean the response would be faster. Under the covers it is how that response would get handled by the script when it arrives. It appears fast because it is never a full page refresh. You can get help from inbuilt browser developer tools.

Recommendations:

• Try optimizing your DB query. Take some help from nice tutorials out there. If you still can't figure out the solution then put a nice summary of your problem with your code and put on StackOverflow with relevant details.
• For a better user experience put a loading spinner or wait message as a blanket.
• This goes to much of a refactoring now. Save the number of calls you made to DB. Returning JSON would be better rather than HTML . Your HTML should just display returned data.