Как использовать JS для выполнения тяжелой функции PHP после загрузки страницы, чтобы ускорить процесс?

Question

У меня есть веб-страница, которая отображает некоторый контент.Сам запрос довольно медленный (4000 мс).

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

Есть ликаким образом я могу прикрепить некоторый код до и после тега в моем HTML-шаблоне, который будет «задерживать» выполнение этой функции до тех пор, пока все остальное не будет отрисовано?

Например:

<javascript code that tells the page not to render what comes next until very last>

<?php my_heavy_php_function(); ?>

</javascript>

Answer 1

Как я понимаю из вашего вопроса, вы должны перейти на AJAX: сначала вы загружаете страницу без тяжелого контента, а когда страница готова, вы делаете AJAX-вызов в веб-сервис для получения и отображения данных, показывая сообщение «Обработка, пожалуйста, подождите» для пользователя.

Answer 2

Либо оптимизация запроса, либо выполнение AJAX-вызова. Вот простой JS-способ выполнения AJAX. Я нашел этот скрипт в поиске Google и изменил его, чтобы использовать функцию обратного вызова, чтобы вы могли анализировать данные или делать другие вещи, кроме простой загрузки содержимого прямо в элемент HTML:

функция ajax: Исходная функция, которую я обнаружил неизмененной

function ajaxRequest(Url, callback) {
  var AJAX;
  try {
      AJAX = new XMLHttpRequest();
  }
  catch (e) {
      try {
          AJAX = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
          try {
              AJAX = new ActiveXObject("Microsoft.XMLHTTP");
          }
          catch (e) {
              alert("Your browser does not support AJAX.");
              return false;
          }
      }
  }
  AJAX.onreadystatechange = function() {
      if (AJAX.readyState == 4) {
          if (AJAX.status == 200) {
              callback(AJAX.responseText);
          }
          else {
              alert("Error: " + AJAX.statusText + " " + AJAX.status);
          }
      }
  }
  AJAX.open("get", Url, true);
  AJAX.send(null);
}

Использование:

<div> some normal content </div>
<div id="loadlater">loading data...</div>
<div> more content that loads before the data</div>

<script>
  ajaxRequest('/echo/html/', function( response) {
    document.getElementById('loadlater').innerHTML = response;;   
  });
</script>

Рабочий пример здесь: JSFiddle

Answer 3

Использование Ajax

Используя метод запроса jQuery Ajax , вы можете отправить данные электронной почты в сценарий (submit.php).$(function(){ }); выполняется, когда дом готов.Кроме того, вам может понадобиться использовать параметр «timeout», если вы собираетесь выполнять длинный запрос.

note - я бы предложил использовать объект ответа ajax, чтобы убедиться, что скриптвыполнено успешно.

$(function() {
   $.ajax({
      type: 'POST',
      url: 'submit.php',
      timeout: 10000,
      error: function()
      {
         alert("Request Failed");
      },
      success: function(response)
      {  
         //response being what your php script echos.
      }
   });
});

Несмотря на то, что jQuery ни в коем случае не требуется для выполнения ajax-запроса, я настоятельно рекомендую использовать какую-то платформу для поддержки поддержки x-browse.вы используете большой набор данных, я настоятельно рекомендую использовать json для кодирования ваших ответов.Это делает разбор довольно простым.Вот пример с jQuery $. GetJSON () API, а также как вы можете кодировать его с помощью PHP

Answer 4

символическая запись: document.onload = ajax call