I currently have a webpage that's taking a while to load. The php side of the page does a lot of data processing and computation, and that's (unfortunately) unavoidable. I would like to display something on the page while the php is processing. Unfortunately, the majority of the page depends on the php computation.
The current solution I have is the following:
The HTML/PHP (beginning):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="preLoading.js"></script>
</head>
<body onload="onLoad()">
<?php
flush();
?>
<?php
// computation.
?>
The javascript:
document.write('<span id="loading">Please wait... Loading and processing data.</span>');
function onLoad() {
if (document.getElementById) {
var loading = document.getElementById("loading");
loading.style.display="none";
}
}
It works well in the sense that while the page is rendering, there's a little waiting message displayed while the page renders. But it does not work in the sense that the page still waits for all the data to be received before rendering anything. How can I accomplish the latter?
One thing of note: the blank line before the doctype contains 1024 spaces, because I read in some places (including StackOverflow) that browsers wait until reading a certain number of characters before attempting to render anything.
Any ideas would be appreciated. Browsers are filled with arcane tricks and hacks that mystify me.
A better choice would be to have only the page's skeleton sent out, and then fetch the computational expensive data via AJAX calls. That way you can put up a placeholder page and fill in things as they become available.
The upside of this is that you're not dependent on flushing buffers - which do not guarantee that the data will actually be sent to the client, only that the next higher layer in the software stack should get everything that's available right now.
The downside is that now you'll have at least two HTTP requests to generate the page - one to fetch the page's skeleton, and at least one or more for the AJAX request(s) to fetch the "fill in the blanks" data.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type ="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$.get('data.php',
function(output) {
$('#dataDiv').html(output).fadeIn(250);
});
});
</script>
</head>
<body>
<div id="dataDiv"> Please wait while loading... </div>
<?php
// computations placed in data.php file
?>
Please note this requires the use of jQuery and you to move your php computations to the "data.php" file.
Try using
flush(); ob_flush();
as stated in the php manual. This brings the output as close to the browser as possible.
More information about pushing the buffer to the browser can be read in the php manual for flush();
For the beginning try placing the loader message straight after body tag. This way browser should display it asap.
Check configuration for not having compression (e.g. gzip) on by default.
Don't use tables. They are not rendered before fully loaded.
Load the content that takes forever with an Ajax call.
You need to turn output buffering off and implicitly flush output as your PHP process does its job.
You might want to checkout Output Buffering. Also note that flushing the buffer is dependent on the browser and how much it expects before it shows output.
A related question that you might find useful.
Related
Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...
In my login system in my site I wanted the user's selected CSS to be loaded after validation was complete. The only problem is that my PHP is located in the body element and I ECHOed the user's CSS link there. I know this is "bad", but what else can I do?
if (isset($_SESSION['loggedin'])){
ECHO $_SESSION['style'];
}
else
{
ECHO 'green';
}
ECHO ".css' />";
The PHP script echos some text in the body after the user is logged in, this is why I cannot put the PHP script in the header.
I'm under the assumption that you're not at all familiar with the basics of PHP, so I'll break it down as simply as I can. If your document is able to execute PHP (which it sounds like it can because you have things happening in the body), all you need to do is wrap the PHP code with <?php and ?> for it to parse as PHP.
You shouldn't put stylesheets inside your body. Indeed, that is something that no one will recommend. What you can do, however, is execute PHP in the head of your document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<?php
echo "<link rel='stylesheet' href='{$_SESSION['user_css']}'>";
?>
<script src="script.js"></script>
</head>
<body>
<?php
echo 'body text';
?>
</body>
</html>
It doesn't matter where you decide to inject PHP code into your document, it will render as you wish. I'd suggest an MVC solution, but if this is just a small, one-off file, feel free to inject PHP wherever you want it, as often as you need it.
http://php.net/manual/en/language.basic-syntax.phptags.php
You can load the user css after the document is loaded using jQuery.
<script>
$(document).ready(function() {
$(head).append('<style>
<?php echo($user_css); ?>
</style>');
});
</script>
Though just adding a section to output the CSS in the head would be easier to maintain in the future and doesn't need the page to load. A dramatic enough change on a slow(ish) connection and the user will see the flicker as the CSS loads their style.
you could use some jQuery to append the style in the <head>:
$(head).append('<style><?php echo user_css ?></style>');
i would like to do some JQuery stuffs on the content of the php buffer before sending the content of the buffer. I have this code:
<?php ob_start() ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
<link rel="stylesheet/ucss" href="style.css" />
</head>
<body>
//some html and php code
</body>
</html>
<?php $bufferContent = ob_get_clean(); ?>
Also I'd like to do some DOM stuff with JQuery on the content of the $bufferContent var.
I already know the V8JS PECL extension but i don't know how to use it with JQuery and DOM function.
Thanks for help and excuse my english.
Remember the basics - PHP runs on server and JS (jQuery too) runs in the user's browser. You can not run jQuery on the server side (only if you start browser there :)), but it is useless)
You can use PHPQuery to run most JQuery commands.
However to run commands that use certain elements like document / window / etc you will need not only a JavaScript engine (v8js) but a DOM to work with the engine. For that there is Env-JS and Node-JS.
You will have to load that into v8 before loading jquery-min.js.
I'm a PHP phr34k addicted to JavaScript on the quest for some knowledge. If one were to include php code in their scripts, what would be the best method? I have provided some sample code as an example on how I would go about including PHP in my scripts.
Is this a valid method?
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js.php"></script>
</head>
<body>
</body>
</html>
test.js.php
<?php
$foo = 'bar';
?>
$(document).ready(function() {
var foo = '<?php echo $foo; ?>';
alert(foo);
});
Thanks again!
Also set the content type header in test.js.php
header('Content-Type: text/javascript');
You can also define foo inline like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var foo = '<?php echo $foo;?>';
</script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>
test.js
$(function(){
alert(foo);
});
I've seen people use the PHP interpreter to combine multiple JS source files before serving them to the client. That way the JS developers can benefit from having multiple files for more organized development but avoid sending multiple JS files (thus multiple HTTP requests) to the client.
However, these days there are several build scripts just for JavaScript. Sprockets, for example, allows you to automate building JavaScript files. Before that I considered it best practice to "compile" the JavaScript dependencies before hand. I wrote a simple Python script, for example, that would look for #include comments in JS source and order includes by their order of need. Probably better than wasting server time in exchange for a slight development convenience.
EDIT: Just take special care that you dump your variable data into the JavaScript properly. For example, if $foo is a string then you need to make sure that it's surrounded by double quotes. As is that code is going to go looking for a JavaScript variable called bar.
Unless you have a very bizarre situation, what you've described isn't really possible. PHP is evaluated on the server, while Javascript is sent to the user agent and executed by its Javascript engine (on the client side).
No user agents that I know of contain a PHP engine, so there's no way to have PHP executed on the client side. Besides, unless you're use some heinous escapes, the PHP will be executed by the server anyway before the Javascript is sent to the client.
In the latter example you give, the PHP gets evaluated on the server and the client is sent a Javascript file that looks exactly like:
$(document).ready(function() {
var foo = 'bar';
alert(foo);
});
So there's no PHP contained within the Javascript; rather, you're dynamically generating (normal) Javascript via PHP.
If this latter is what you intended, then yes - this works fine. The PHP engine doesn't know anything about Javascript, and just generates some text that happens to have a particular meaning to a JS-parsing client. So the presence of Javascript doesn't change anything on the PHP side, and since it's processed out, the (previous) presence of PHP doesn't change anything on the Javascript side.
(If you wanted your Javascript to execute some PHP on the client, however, that's fundamentally not possible.)
i wonder if i could embed js and css files above the html document scope:
<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />
<html>
<head>
</head>
<body>
<body>
</html>
this is because i want to put them in same php file where i include all files (php, js and css). i have tried this and it seems to work. the output of the html file will be shown just like the above code, with the include rows above the html tag.
are there any hidden cons in this?
Even if it works, you shouldn't do it. This type of stuff is sloppy, and as such isn't guaranteed to work tomorrow, or in future browsers. If you don't feel the agony of this method now, you will eventually. There's no reason that you should be doing this anyway.
This isn't valid html. The best place to put the javascript would be before the body close (unless there's in-line scripts that need those scripts to be loaded). This prevents blocking as the page loads.
Will not be valid (X)HTML.
This will work in most all browsers, but that's not to say it isn't wrong. It is wrong.
It's not valid HTML, and will confuse just about everyone who comes across your code, and though I don't know what browsers could possibly fail to overcome the inherent wrongness about this style, I make no promises that it will work. In a sense, it should, but in another, it most definitely should not.
Perhaps output buffering will work in this situation? Buffer the output from your "includes" file, then grab the contents of the buffer to output later, after the <html> declaration. Something roughly like this:
In your includes.php file:
<?php
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>
And here is your main page:
<html>
<head>
<title>Hello</title>
<?php echo $includes ?>
</head>
<body>
...
I know this is very old now, but I want to add that Google is recommending to do this in certain cases.
Take a look at this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Any thoughts as to why Google is advocating improper HTML coding?