I'm building a web app using Yii2 (php, mysql). Users can click on others' game results to see what item the user used for this result. There can be from 100 to 1000 results displayed on a single page. I don't know which option is the best in terms of speed for the page and the server :
1- On page load, a modal is loaded for every result and displayed when users click on a result. This way, there can be from 100 to 1000 modal loaded on the page. Is this too heavy considering that only a few of them will be used? Or even none of them sometimes.
2 - Load only one modal that is brought up when users click on any results and dynamically adjust his content using an ajax request to the server depending on which results was clicked. This way, less code loaded on the page but more requests to the server.
First option is easier to code but I think the second one might be better for page load. I'm far from expert in terms of page size and server requests handling, so I'd like to get some opinions.
I think you've answered the question yourself.
The second option is right. Only one modal (per type of action -- edit, view, etc) should exist. Then use ajax to load data only when requested.
Your users will thank you. The page size and load times will be significantly better.
Related
I have a pretty lengthy form with about 10 select fields that all load data from other tables (mysql). My question is should I load the data using php/mysql as the page loads or should I let the page load first and then grab the select options for each field using ajax? If I load the select fields using php/mysql I would have 10 trips to the server before the page completely loaded (if my thinking is correct).
My initial thought is to first load the page and then load the select fields using ajax. Would this give me a faster load time or should I just load all the select fields using php/mysql on page load?
Any thoughts, theories or strategies would be helpful. I want my pages to load as fast as possible. Thank you.
I would say do it on the server-side (in php) because if you do it in ajax you're doing a client side request to the server to do the same thing. If i'm not mistaken from what you're saying ------- its 10 separate selects done in php that happens before the page loads... as opposed to an ajax request to do 10 separate selects as the page loads in javascript (meaning its a second request to do the same thing).. server side would be the best option in this case
If I understand you right, it would be faster to do it on the server-side before any headers are sent to the browser. Then your data is send along with the rest of the page to load. One trip. With AJAX you're sending the page first, then the javascript you just sent has to do a separate request for the data. Two trips instead of one. AJAX is best used when you can avoid requesting new http headers, but if you're doing that anyway, I'd skip it.
I have a webpage that is auto-refreshed every 240 seconds with the generic HTML Meta tag. During the refresh it pulls data from a database which takes the site about 15 to 20 seconds to build before it's shown to the user. During this time I wish to show a small DIV with a loading message telling the user that it's loading data.
The more complicated thing about this is that the user has a few menu options to filter out specific data from the database. When clicking such an option the page is reloaded again and takes 15 to 20 seconds to build.
Users that aren't familiar with this loading time might feel the need to click the same menu option over and over again within a few seconds hoping that the page will load faster. But instead it will most likely cause the database server to get overloaded with requests.
So, to tackle this I wish to use jQuery to show a loading message, then have it load the data from the database (with a PHP script) and finally dump the data on the page.
I've done something similar but that was limited to users clicking a link which caused a jQuery script to load the data while showing the waiting DIV (using CSS rules).
I can't figure out how to implement this solution for an auto-refresh.
Some help would be nice.
You can use the same solution with auto-refresh as well, with the mention that the initial page load doesn't container the data that requires the DB call, but instead shows a loading message and starts an AJAX call to a server side script that returns the data.
Your page load:
Request
Server query DB
DB Response
Page loads (with data)
Ideal page load:
Request
Page loads (without data) <- loading message here
AJAX call
Server query DB
DB Response
Page updates (with data)
I'd second megawac's comment. Don't use a meta refresh. Also, 15-20 seconds is a very long time for generating a database report that is going to be generated every 4 minutes; odds are that you're bogging down your server pretty badly. Very few queries should really take that long, especially queries that need to be run nearly continually. I would strongly recommend refactoring your queries or doing some caching to speed things up. If you post some code, I'm sure people would be happy to look at it.
I am using php, html, css to create a bingo game (There will be nxn boxes. It will be filled in random order for 2 players. Players has to select numbers one by one. One who fills up rows or columns or diagonals five times wins the game).
I created player1.php and player2.php. I am having 9 boxes and populating it from databases. If user clicks a button I'll update the corresponding values as 0 so that when page loads I'll disable the button if the text is 0.
If player1 clicks a button in player1.php, it should reflect in player2.php. How can I do that? Is that possible by reloading page every second? Is it good to do that?
As short answer: no it is not.
Pure PHP is not the most suited for interactive game like that but there are few things you can do.
You could use javascript with Ajax to do this. Let's say you have X players (each using playerX.php although i would put it into player.php and determine each player by GET parameter or something). When one of the player clicks a link, it goes a server-side script, in PHP (possibly using Ajax if you want), that updates your database.
Now the tricky, each player page 'asks' the server every certain amount of time for the state of the game, and updates the page accordingly. The easiest way to do this is create a script (lets call it state.php) that will output data from your database using JSON. You can read the request using ajax and update your page using javascript.
I suggest you read about jQuery and Ajax (which can be also used with jQuery).
If you want to avoid having to refresh the page each time, learning javascript and ajax is your best bet.
i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.
My web application utilizes page reloads in places where the page structure changes.
For content changes initiated by the user it is all handled by Ajax.
However I'm planning on removing all the page reloads and replacing them with ajax calls that simply update the page using innerHTML for the body and head tags.
To do this I know have to manually call functions that are normally called by the onload event.
When I am done I will have a complete ajax application. My question is, is this standard practice now....I see a lot of applications where you do something and the whole page reloads, where even common elements are reloaded.
For example go to Apple.com and hit on the first button you see "Store"...you will see the whole page reload even the menu bar that does not change is reloaded wasting bandwidth..
Because I don't see other people using complete ajax solutions...I wonder if I am headed down a wrong path.
My question?
Is a complete ajax based web application best practice? (of course file uploads aren't supported, omitting this, is it best practice).
If so why do big sites not do it? I see few sites that actually employ ajax instead of page reloads.
There are a number of reasons not to go fully ajax. A few are:
If the user refreshes the page they'd be sent back to the home page;
if they pressed the back button, they'd go back to the previous site
they visited.
Search engines won't be able to index anything past the home page.
Anyone without javascript enabled or on IE 6 (or it's equivalent) wouldn't be able to use the site.
Lastly, it can be hell to debug a problem -- I went full ajax on a project a while ago and ended up regretting it.
If none of the above are important to your project, and you're looking to do something different, then by all means -- the real question you need to ask is "does the added complexity justify the savings in bandwidth?".
The concept of ajax is reload certain content of the page when you don't need to change all the content.
Your example of apple.com: it isn't a best practice to use ajax in navigation, because the history of browser don't handle this (use the back button of the browser and the navigation will not respond if you use ajax, keep that in mind).
If you have a box with testimonials and want them to change from time to time, so it's a good place to use ajax, avoiding the whole page to reload.
You can also have a static page with all testimonials to let search mecanisms to index that content.
Example of big sites? The search of google. When you type only the box of results is reloaded to view one preview.
So you have to choose when use and when not use ajax.