Optimizing a static php website - javascript

i am making a "static" php website in this style
<?php include "header.php" ?>
<?php include "left.php" ?>
<?php include "photos.php" ?>
In "photos.php" i have 3 heavy javascript files from the lightbox and i thought it could be a good to include the javascript files only in this "photos.php" and not at the "header.php".
But javascript supposed to be only in the head html tags. Do you have any better approach or mine is just fine?
thanks very much

It's best to have all javascript in the head whenever you can. And you can without much difficulty. As Dominic Rodger said, it's probably not a big deal to include the js files on every page because they should be cached.
I tend to create page template class files with lots of variables for this sort of thing. A simpler thing to do that's more inline with what you're already doing is to set a variable before you include the header file, then access that variable in the header file and add the js if appropriate.
<?php
$includePhotoJavascript = true;
include "header.php";
?>
In the header file:
if(isset($includePhotoJavascript) and $includePhotoJavascript == true)
{
// add the javascript
}

JavaScript does not only have to be in the head HTML tag. It is actually advisable to put it at the end of the HTML file, because they halt the rest of the HTML file from loading.
What you could do in the header.php file, is something like this:
<html>
<head>
<title><?php print $title; ?></title>
<?php
foreach($javascript as $src){
?>
<script type="text/javascript" src="<?php print $src; ?>"></script>
<?php
}
?>
</head>
Then the file you posted would look like this:
<?php
$title = "Photo album";
$javascript = array("jsfile1.js", "file2.js");
include "header.php"
include "left.php"
include "photos.php"
?>

If you're going down this route, you could try setting a variable before you include header.php which stores whether or not those JavaScript files are needed. It might not be necessary to sweat it too much though, if users tend to stick around on your website they'll fetch those files once and then not again, since hopefully your server will return a 304 Not-Modified response, and they'll be served from your browser's cache.

thanks very much for your ideas.
i am planning of making the home page(index.php) as light as posible. So
i will load javascript(lightbox.js) only in photos.php and try to do a
LAZY LOADING to this lightbox.js so when "first time" visitor go to
photos.php javascript file will be in cache.
and all these in background.
I think is the same Facebook does. Look here
Optimizing Facebook

Related

Include PHP variables directly into js files

I would like to use js code, which works with php variables.
My situation now:
mainFile.php
<?
$myPHPvar = 1234;
?>
<html>
<body>
MY CONTENT
<script>
var myJSvar = <? echo $myPHPvar; ?>
</script>
<script src="myFile.js"></script>
</body>
</html>
myFile.js
// Here some js code where I access the myJSvar, which was set by $myPHPvar before
console.log(myJSvar);
This works ! But I would like to change this structure. I would like to move the myJSvar definition out from main file into the jsFile.
But If I move this line var myJSvar = <? echo $myPHPvar; ?> into the myFile.js it will not work, because this is not an php file.
Not I thought that this could be a solution:
I rename the myFile.js to myFile.php and change the code like this:
// Here some js code where I access the myJSvar, which was set by $myPHPvar before
<script>
var myJSvar = <? echo $myPHPvar; ?>
console.log(myJSvar);
</script>
and in the mainFile.php I changed <script src="myFile.js"></script> to include('myFile.php');
This works !
BUT:
First question of all: Is this a good idea to do it like this?
Second: The "problem" now: All my files are now php files, also the files, which includes mainly js code. That's not very beautiful, because now I can't see on the first view, which is an js file and which is a php file.
Thank you for your support !
Using PHP, echo the values to hidden HTML fields on the page.
When you know the page is done loading, read them back out using JavaScript.
Note, Ideally, you'd just make the data a separate AJAX/xhr/fetch call to a URL (JSON or XML formatted data is nice for this), but as a stop-gap, hidden fields will do the trick for basic PHP pages.
Similarly, you can echo some inline JavaScript (tags and all) and reference the variables elsewhere. This approach will work but is often referred to as "spaghetti code" because the intertwined front-end (JavaScript) and back-end (PHP) code makes for tricky debugging and does not scale well to larger code projects... months or years after, developers will find themselves scratching their heads as to where code lives, how it's generated, where new code should be placed, etc.
You can do it like this. And there's nothing really wrong with it. You have to bring the data to the client browser somehow. You can do this with: 1. set php variables in the DOM 2. XHR call or 3. cookies
This can be achieved by generating the JS file dynamically... You can create a PHP file that would generate the JS dynamically like:
Note: THIS METHOD IS HIGHLY NOT RECOMMENDED. THIS IS FOR YOUR INFORMATION AND KNOWLEDGE ONLY.
myFile.php (The JS equivalent file)
console.log(123)
Your HTML file
<script type="text/javascript" src="a.php"></script>
But this is highly not recommended because JS files are static resources that can be cached. Using this method would request the JS file every time the page loads (where it will only be transferred at first load only if its static).
The best method is to keep the dynamic variables in your HTML and then include your static JS files which will use these variables.

The query string seems to affect page loading speed

I'm working on this.
It's hosted on c9.io, a browser based collaborative programming IDE
I have an index.php with a small script:
<?php
$path = ltrim($_SERVER['REQUEST_URI'], '/');
$elements = explode('/', $path);
if(is_numeric($elements[0])){
require_once 'post.php';
}elseif($elements[0]==''){
require_once 'main.php';
}else{
require_once '404.php';
}
?>
When there is nothing in the url (only https://dickbutt-etaoin.c9.io ) it displays the page pretty much instantly but keeps loading for another five seconds during which none of the javascript on the page works
When I have a few numbers (for instance https://dickbutt-etaoin.c9.io/241 ) it's about as fast as it gets.
How can I make both the pages load at a normal speed?
I've tried reversing the order of if statements and it doesn't change a thing. Both the pages are relatively big, contain both php and javascript and a giant css file.
After some prodding in the network tab and googling, I found my answer.
I added this line of code to index.php
header('Connection: close');
Now it does what I wanted it to do. Thank you all for trying to help!

How do I include external files in PHP?

This code works perfectly, but I can not find how to include an external file.
www.free4g.me/-indexeddb/2.php
Can anyone show how to include a .php file of records?
<?php include_once 'PATH/TO/YOUR/FILE.php' ?>
OR
<?php require_once 'PATH/TO/YOUR/FILE.php' ?>
include = The file CAN be loaded, otherwise it will throw a notice.
require = The file HAS to be loaded, otherwise it will throw an error.
It's not possible include external files, per se.
PHP executes on your server. You'll need to put the www.free4g.me/-indexeddb/2.php file on your server, after which you can include it using the explanation provided by Xatenev.

Magento javascript bundling - turn off for page

I have a Magento site setup and I did have Javascript bundling turned on.
This worked very well. Apart from one page - the PyaPal review page. A critical page. After a few days of slow sales, I saw a javascript error on this page. Turned off bundling and all works.
Is there any way I can turn off the bundling for this page only?
Thanks in advance!
It seems like the paypal page may included some js files also. So it may be jQuery conflict. Better you should fix this like adding "no conflict function"..And you dont want do that and as per question you can just simply prevent to load that js files that paypal page only. By simple condition you can achieve this. Check your url by if condition like this,
<?php
// for example
$file = '<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>';
$url = Mage::helper('core/url')->getCurrentUrl();
// OR
$url = $_SERVER['REQUEST_URI'];
if($url != "paypla_review.php") { //your paypal page
echo $file;
}
?>
If you try to include js lib files then Remember that you should include this code any header page. i.e. You should include js lib file first always.

Why linking an external javascript with ?variable=value

I have seen code like this:
<script type="text/javascript" src="js/my_js.js?id=<?php echo time(); ?>"></script>
I do not understand the reason for the id, nor how to use the id in the .js file, if this is possible.
Thanks.
It is to force the browser to refresh the JavaScript file, otherwise the browser may display a cached version at a later date.
You can also do this to CSS files.

Categories

Resources