0

Имеется php скрипт, который получает данные через steam api, но при этом загрузка всей страницы просто чудовищно долгая (10-15 секунд)

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

Как это можно реализовать? Либо же нужно любое другое решения проблемы скорости загрузки

4 ответа 4

3

Варианта два.

  1. Грузить все нужные данные заранее (демоном или по крону) и складывать в БД, при формировании страницы просто доставать их из БД.

  2. После загрузки основной части страницы делать ajax-запрос нужных данных, всю логику получения данных вынести из основного обработчика страницы в обработчик ajax-запроса.

2
  • Страница будет выполняться постоянно (для каждого отдельного пользователя) К тому же есть постоянно плавающие данные (цена) По поводу 2 пункта. Можно конкретней? Знаний моих пока хватает не на многое
    – DREMBASS
    31 июл 2015 в 12:46
  • Конкретнее на ваш вопрос не ответить. Читайте учебники. Если используете какой-нибудь php-фреймворк - хорошей идеей будет почитать документацию по этому фреймворку относительно ajax. 31 июл 2015 в 12:53
3

Я бы предложил использовать ajax на пользовательской стороне и разделением генерируемой сейчас сервером страницы на две: сначала пользователю грузится страница без этих данных, далее, из js, отправляется ajax-запрос на вспомогательную страницу за этими данными (это может быть даже та же страница, но с каким-нибудь get или post запроом: например /путь/index.php - без данных, а /путь/index.php?data=true -с данными (причем, вторую страницу можно и лучше даже облегчить, чтобы там ничего лишнего кроме этих данных не было ) )

4
  • php код находится в данный момент в отдельном файле, можно как-нибудь без бубна сделать простой вывод?
    – DREMBASS
    31 июл 2015 в 12:52
  • по большому счету, это какраз - самый оптимальный вариант, я считаю. Можешь, конечно, в iframe попробовать загнать - если тебе не принципиально). Ну а так, кроме как получать данные из уже загруженной страницы при помощи js, у тебя врядли как-либо удастся осуществить распределенную загрузку содержимого 31 июл 2015 в 14:29
  • Через ифрейм пробовал, тоже самое, грузится долго. Через аякс данные не грузит вообще. видел подобные модули, там, как я понял используется js (выводился индикатор загрузки, ну а через какое-то время уже выводятся данные). В гугле ничего подобного не нашел. Есть возможность переписать код под js? Я больше дизайнер, чем кодер. Многого еще не понимаю)
    – DREMBASS
    31 июл 2015 в 14:37
  • В этом случае также через Ajax делается, только задается принудительно timeout (всякие там полосы загрузки и прочие шалости - зачастую, не более чем ухищрения чтобы успокоить нервы ожидающего пользователя. В данный момент я помочь с готовым решением не могу, но беглый поиск привел меня сюда - здесь, сколь понял, человек с похожей же проблемой мучился. Или задай здесь на сайте отдельный вопрос по js про Ajax и долгое ожидание ответа сервера - наверняка найдется кто-нибудь, кто тебе распишет решения поподробнее 31 июл 2015 в 14:57
1

Я бы например взял за основу Solr или ElasticSearch. Один раз загрузил все данные и нормально работал бы (конечно если сервак упал, нужо будет ждать пока все данные обратно загрузятся). Например так делал для интернет магазин, где каждый раз товар брался через API из стороннего сервиса. Скорость была очень классная.

0

Самый простой вариант решения вашей задачи - тег iframe. Создаёте две страницы, - одну выводите пользователю:

<!DOCTYPE html> <!-- HTML5 -->
<html>
  <head>
    <!-- Заголовки страницы -->
  </head>
  <body>
    <header>
      <!-- Тут шапка сайта -->
    </header>
    <!-- Тег main обозначает основное содержимое сайта. Может быть только один на странице -->
    <main>
      <iframe src="main.php" seamless></iframe>
      <!-- Параметр seamless говорит рассматривать содержимое фрейма, как часть 
      страницы-родителя. Размеры фрейма будут подогнаны под размер встраиваемой страницы, 
      границы и полосы прокрутки скрыты, к содержимому фрейма будут применены стили 
      страницы-родителя. -->
    </main>
    <footer>
       <!-- А тут - подвал -->
    </footer>
  </body>
</html>

А на второй (main.php, в примере) формируете подгружаемые данные.

Оптимальный вариант - AJAX. Ничего сложного в этом нет, напротив, простое получение данных и вставка их внутрь указанного блока - это едва ли не основы JavaScript.

Для начала, вам следует усвоить два понятия:

  • Back end (серверная часть) - код, отвечающий за обработку запросов пользователя и, в случае вебсайта, выполняемый на сервере, на котором этот сайт расположен.
  • Front End (клиентская часть) - код, отвечающий за получение пользовательских команд для серверной части и вывод конечного результата её работы. В случае интернет-ресурсов, клиентская часть - это код, выполняемый браузером пользователя.

Здесь я привожу упрощённое частное определение вышеуказанных понятий, минимально необходимое для понимания этого ответа. Желающим глубже разобраться в вопросе рекомендую, для начала, обратиться в Википедию.

Чаще всего используемый в веб-разработке язык фронтенда, это JavaScript, так как он поддерживается всеми сколько-нибудь распространёнными браузерами, не требуя установки сторонних плагинов. Серверная часть, в вашем случае, написана на PHP, однако данный метод подойдёт для любого интерпретируемого серверного языка, так как фронтенд работает только с результатами работы бэкенда, но не с ним самим.

В вашем случае, фронтенд будет состоять, например, из HTML-страницы (main.html), скрипта JavaScript (script.js) и таблицы стилей, которые будут выглядеть примерно так:

main.html

<!DOCTYPE html> <!-- HTML5 -->
<html>
  <head>
    <title>
      <!-- Здесь будет заголовок окна браузера -->
    </title>
    <!-- Задаём кодировку и тип данных страницы -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <!-- Прописываем таблицу стилей,... -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- ...вспомогательную библиотеку и ваш скрипт -->
    <script type="text/javascript" src="query-1.9.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <script  type="text/javascript">
      $(document).ready( //Выполнить, когда дерево элементов готово (jQuery)  
        function(){
          load_main ();         
        }
      );
    </script>
    <header>
      <!-- Тут шапка сайта -->
    </header>
    <!-- Тег main обозначает основное содержимое сайта. Может быть только один на странице -->
    <main>
      <!-- Куда-то сюда будет загружаться изменяемый контент -->
    </main>
    <footer>
       <!-- А тут - подвал -->
    </footer>
  </body>
</html>

script.js
В своём примере использовал метод ajax кроссбраузерной JS-библиотеки jQuery, но это не означает, что вы прямо-таки обязаны поступить так же. Можете писать на чистом JavaScript (правда, это сложнее) или взять на вооружение любую другую подходящую библиотеку.

function load_main () { //Функция, получающая данные с сервера методом ajax
  $.ajax({  
    type: "POST", //Метод передачи параметров на сервер: GET или POST
    cache: false, //Кешировать ли полученные данные
    url: "server.php", //Откуда берём данные
    data: { 
      count: 5,
      page: "game",
      tab: "weekly_top"
    }, //Какие-то параметры которые вы хотите передать на сервер.
    async: true, //Асинхронная загрузка - грузить фронтенд не дожидаясь ответа сервера
    success: function (html) {  // Что делаем, если данные успешно получены.
      $("main").prepend(html); //Добавить html код, сгенерированный сервером, в начало
                              //контейнера main
    }   
  });
}

Если вам надо передать на сервер какие-либо параметры, просто впишите их в параметр data метода $.ajax. Например, приведённый код загрузит в main результат такого запроса к серверу:

server.php?count=5&page=game&tab=weekly_top

Про таблицу стилей просто скажем, что она есть.

Ваша серверная часть будет состоять из файлов PHP, к одному из которых (server.php) мы с вами обращались методом $.ajax в скрипте-примере. На серверной части для вас ничего не поменяется, кроме того, что вам надо будет генерировать лишь содержимое контейнера main, а не весь документ.

Приведённый вариант загрузки данных далеко не идеален, его единственное достоинство - простота. Правильный подход к архитектуре веб-приложения предполагает, что бекэнд лишь передаст фронтенду данные, необходимые для генерации страницы, например, в виде объекта JSON, а уже фронтенд сгенерирует страницу, на основе этих данных. Такой метод требует более глубокого изучения JavaScript, но позволит вам минимизировать нагрузку на сервер, который будет лишь забирать данные от API, всю генерацию страниц оставляя компьютеру пользователя.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.