выпадающее меню, заполняющееся с задержкой при загрузке первой страницы

Question

Я создал перетаскиваемое меню с помощью бутстрапа. Выпадающие пункты меню заполняются с помощью вызова 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; 
     } 

Пожалуйста, дайте мне понять, почему я испытываю задержку при нажатии щелкнуло в первый раз, чтобы отобразить выпадающие пункты меню

Answer 1

обновление, пожалуйста, чтобы эти вопросы PHP with MySQL is Slow (SOLVED) и Why is the response on localhost so slow?

ниже уже не применяется

Первый вызов ajax для retrieveItemsOrdered.php будет иметь некоторую задержку, в зависимости от самого запроса, количества результатов и местонахождения сервера БД.

Второй звонок, например. второй раз, когда вы нажмете кнопку, вы получите более быстрые результаты, потому что результат запроса db будет кэширован обоими (mysqli и mysql-сервером).

Вы можете проверить/объяснить сам запрос БД и оптимизировать его, чтобы уменьшить задержку.

Answer 2

Это естественно, потому что вы используете AJAX звонок для получения записей из БД и не имеет никакого отношения ни к одному из styles или HTML.

Теперь, когда звонок совершает путешествие вплоть до вашей БД и дает вам ответ, так что вы испытываете задержку. Это было, когда вы нажимаете кнопку в первый раз. Когда вы снова нажимаете на кнопку для кругового путешествия, как вы видите, ответ, кэш из браузеров и ваших предыдущих записей, все еще присутствовал в списке, поэтому задержка была почти незаметной.

Задержка может быть вызвана многими причинами. Либо ваша БД находится в каком-то удаленном месте, либо ваш запрос БД занимает некоторое дополнительное время для оценки. Было бы даже хуже, если бы вы имели дело с большим объемом данных.

Помните, что вызов AJAX не означает, что ответ будет быстрее. Под обложками это то, как этот ответ будет обрабатываться скриптом, когда он поступит. Он появляется быстро, потому что он никогда не обновляется на полной странице. Вы можете получить помощь от встроенных инструментов разработчика браузера.

Рекомендации:

• Оптимизируйте DB запрос. Возьмите некоторую помощь от хороших учебников.Если вы все еще не можете понять решение, то положите краткий обзор своей проблемы с вашим кодом и установите StackOverflow с соответствующими сведениями.
• Для лучшего удобства пользователя нанесите нагрузочный счетчик или ожидающее сообщение в качестве одеяла.
• Это относится к большей части рефакторинга. Сохраните количество вызовов, которые вы сделали в БД. Возвращение JSON было бы лучше, чем HTML. Ваш HTML должен просто отображать возвращенные данные.