There is a php script that receives data through steam api, but at the same time the download of the entire page is simply monstrously long (10-15 seconds)

It is necessary to make the page (header, footer, body) load immediately, without waiting for the script to receive data from variables, and the script receives the data it needs after loading the main page

How can this be implemented? Or you need any other solution to the problem of download speed

    4 answers 4

    Option two.

    1. To load all the necessary data in advance (by a demon or by krone) and add it to the database, when forming the page, just get it from the database.

    2. After loading the main part of the page, make an ajax request for the necessary data; take all the logic of receiving data from the main page handler to the ajax request handler.

    • The page will be run continuously (for each individual user). In addition, there are constantly floating data (price). About 2 points. Can it be more specific? My knowledge is still not enough for much - DREMBASS
    • More specifically, your question is not answered. Read the tutorials. If you use any php-framework, it is a good idea to read the documentation on this framework regarding ajax. - Pavel Mayorov

    I would suggest using ajax on the user side and dividing the page currently generated by the server into two: first, the user loads the page without this data, then from js, an ajax request is sent to the secondary page for this data (it may even be the same page, but with some get or post request: for example /путь/index.php - without data, and /путь/index.php?data=true - with data (and the second page can even be better facilitated so that there is nothing superfluous except this data was not))

    • The php code is currently in a separate file, can you somehow make a simple conclusion without a tambourine? - DREMBASS
    • By and large, this is the best option, I think. You can, of course, try to drive in the iframe - if it doesn't matter to you). Well, except for getting data from an already loaded page using js, you’re unlikely to be able to perform distributed content loading in any way - Grinya Lesnoy 2015 at 2:29 pm
    • I tried through the frame, the same thing, it loads for a long time. Through Ajax data does not load at all. I saw similar modules, there, as I understood it, js is used (the loading indicator was displayed, well, after some time the data is already displayed). I did not find anything like this in Google. Is it possible to rewrite code under js? I am more a designer than a coder. I don’t understand much yet) - DREMBASS
    • In this case, also through Ajax, it is done, only timeout is forced (there are all kinds of loading bars and other pranks - often nothing more than tricks to calm the nerves of the waiting user. At the moment I cannot help with the ready solution, but a quick search brought me here - here, as I understood, a person with a similar problem suffered, or ask here on the site a separate question on js about Ajax and a long wait for the server to answer - there is sure to be someone who can write you more details - Grinya Lesnoy

    I for example would take Solr or ElasticSearch as a basis. Once I downloaded all the data and would work fine (of course, if the server fell, it would be necessary to wait until all the data was loaded back). For example, I did this for an online store, where every time a product was taken through an API from a third-party service. The speed was very cool.

      The easiest solution to your problem is the iframe tag. Create two pages - output one to the user:

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

      And on the second (main.php, in the example), generate the loaded data.

      The best option is AJAX . There is nothing difficult in this; on the contrary, simply receiving the data and inserting it inside the specified block is almost the basis of JavaScript.

      For starters, you should learn two things:

      • Back end (server side) - the code responsible for processing user requests and, in the case of a website, executed on the server on which this site is located.
      • Front End (client part) - the code responsible for receiving user commands for the server part and outputting the final result of its work. In the case of Internet resources, the client part is the code executed by the user's browser.

      Here I give a simplified private definition of the above concepts, the minimum necessary to understand this answer. Those wishing to better understand the issue I recommend, first, to contact Wikipedia .

      The most commonly used front-end language in web development is JavaScript, since it is supported by all popular browsers without requiring the installation of third-party plug-ins. The server part, in your case, is written in PHP, but this method is suitable for any interpreted server language, since the frontend works only with the backend results, but not with it.

      In your case, the frontend will consist, for example, of an HTML page (main.html), a JavaScript script (script.js) and style sheets that look something like this:

      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
      In my example, I used the ajax method of the jQuery cross-browser JS library, but this does not mean that you absolutely must do the same. You can write in pure JavaScript (although it’s harder) or use any other suitable library.

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

      If you need to send any parameters to the server, just enter them in the data parameter of the $.ajax method. For example, the above code will load in main result of such a request to the server:

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

      About the style sheet just say that it is.

      Your server part will consist of PHP files, one of which (server.php) was accessed by the $.ajax method in the example script. On the server side, nothing will change for you, except that you only need to generate the contents of the main container, not the entire document.

      The above data download option is far from perfect , its only merit is simplicity. The correct approach to the web application architecture assumes that the backend will only transfer to the frontend the data needed to generate the page, for example, in the form of a JSON object, and the front-end will generate the page based on this data. This method requires a deeper study of JavaScript, but will allow you to minimize the load on the server, which will only take data from the API, all page generation leaving the user's computer.