下拉菜单在第一页加载时出现延迟答案

【问题标题】：drop down menu populating with delay on first page load下拉菜单在第一页加载时出现延迟
【发布时间】：2015-09-16 18:22:04
【问题描述】：

我使用引导程序创建了切换下拉菜单。使用 ajax 调用填充下拉菜单项。 ajax 请求调用 PHP 脚本，该脚本从数据库中获取值并填充下拉菜单项。我使用无序列表在下拉菜单中显示项目。当我单击负责 ajax 调用的按钮时，项目正在被填充但有延迟。当我再次单击该按钮时，没有观察到延迟。

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;
        }

请让我了解为什么我在第一次单击按钮以显示下拉菜单项时遇到延迟

【问题讨论】：

标签： php jquery html css ajax

【解决方案1】：

更新，请看这些问题PHP with MySQL is Slow (SOLVED)和Why is the response on localhost so slow?

以下不再适用

对retrieveItemsOrdered.php 的第一次ajax 调用会有一些延迟，具体取决于查询本身、结果数量和数据库服务器所在的位置。

第二个电话，例如。第二次单击该按钮，将产生更快的结果，因为 db 查询结果将被驱动程序（mysqli 和 mysql 服务器）缓存。

您可以检查/解释数据库查询本身并对其进行优化以减少延迟。

【讨论】：

我要从中获取结果的表中只有 2 行。数据库服务器位于本地主机本身
您可以使用微调器进行延迟
直接点击php文件会有同样的延迟吗？
显示切换菜单时遇到延迟
您是在本地机器上工作还是在托管服务器上工作，您使用的是 apache 服务器吗？

【解决方案2】：

这是很自然的，因为您使用AJAX 调用从数据库中获取记录，与styles 或HTML 中的任何一个无关。

现在，该呼叫正在一路到达您的数据库并给您回复，因此您遇到了延迟。这是您第一次单击按钮时。如您所见，当您再次单击按钮进行往返时，浏览器缓存的响应和您之前的记录仍在列表中，因此延迟几乎不明显。

延迟可能是由于多种原因。您的数据库位于某个远程位置，或者您的数据库查询需要一些额外的时间来评估。如果您要处理大量数据，那就更糟了。

请记住，拨打AJAX 并不意味着响应会更快。在幕后，它是脚本到达时如何处理该响应。它看起来很快，因为它从来不是一个完整的页面刷新。您可以从内置的浏览器开发者工具中获得帮助。

建议：

尝试优化您的数据库查询。从那里的不错的教程中获得一些帮助。如果您仍然无法找到解决方案，请用您的代码很好地总结您的问题，并在 StackOverflow 上提供相关详细信息。
为了获得更好的用户体验，请将加载微调器或等待消息作为毯子。
现在需要进行大量重构。保存您对 DB 的调用次数。返回JSON 会比HTML 更好。您的 HTML 应该只显示返回的数据。

【讨论】：