PHP include of JS libraries

Question

Here is my understanding of how all of this magic works (PLEASE correct me if I am wrong):

In a PHP/JS/HTML/CSS website, when a page is requested, the server reads the file(index.php for referencing purposes of this question), executes any <?php ?> tag/construct and does the work. It then send the completed work to the requestor, as one complete page. The requestor then reads the file (via a browser) and executes the file (index.php) in the "normal" order. If I want several pages to include the same JS scripts and libraries, can I include (safely and ok with convention) the JS:

<script type="text/javascript" src="LIBRARY/1.js"></script>
<script type="text/javascript" src="LIBRARY/2.js"></script>
// etc... for libraries, then also include inline scripts like:
<script type="text/javascript"> 
    $(document).onLoad(function(){
    });
</script>
<script type="text/javascript"> 
    $(document).ready(function(){
    });
</script>

via a PHP include:

<!-- JS -->
<?php include ("component/js.php"); ?>

If this is possible, is it also best to include these at the bottom of the page, or should libraries be at the bottom, onLoad be at the top, ready at the bottom, or any other specific location for load time optimization?

Your understanding is correct. You can include the script tags by writing to your page in PHP, either directly in the script or in another PHP file that you include. If you go the page and view source, you'll see the HTML that PHP produced and sent to your computer. Your browser's behavior will be exactly the same as if you'd loaded a static HTML page with that content. — octern, Nov 12 '12 at 20:12

Kristian · Accepted Answer · 2012-11-13T17:51:57.707

1

If this is possible, is it also best to include these at the bottom of the page, or should libraries be at the bottom, onLoad be at the top, ready at the bottom, or any other specific location for load time optimization?

either wrap all of your JS in document ready callback functions, or simply place the tags at the bottom. otherwise you'll be relying on the defer or async tag attributes to top blockage on page load, and those two attr's are not supported across the board yet.

About JS include optimization:

While it a good thing that you're thinking about how to reuse code for JS includes, its a good first step to manage them in an assets file, as you're doing above.

however, there is a drawback in terms of php performance as you have an increased amount of code to be processed in order for the page to be rendered.

this is why some developers choose to use a client-side assets manager like require.js, etc.

edited Nov 13 '12 at 17:51

answered Nov 12 '12 at 20:38

Kristian

21,204
19
101
176

can you give more examples/elaborate on the `additional stuff` as to what it is or encompasses? – chris Frisina Nov 13 '12 at 14:35
i updated my statement. what i mean here is that if you have an object oriented asset management solution that carries a persistent array of included files around a particular set of controllers (assuming an MVC is used in example) the processing required to do all of that is just another unnecessary step before php will start rendering the page, in comparison with the speedy load time you'd have experienced if you did it client side instead with an async asset mgmt solution. – Kristian Nov 13 '12 at 17:53

score 0 · Answer 2 · answered Nov 12 '12 at 20:06

0

onLoad and ready are pretty much the same functions and you should include all the javascript at the bottom of the page because it will load the javascript after the page is loaded.

answered Nov 12 '12 at 20:06

Memoria

131
1
3
9

Not completely true: http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready And scripts should NOT be in the code. – Green Black Nov 12 '12 at 20:06
that answers placement, but its it good practice to place the JS in a php include? – chris Frisina Nov 12 '12 at 20:08
well I wouldn't do that myself because it seems little bit of an overkill. Includes are used for PHP Content. – Memoria Nov 12 '12 at 20:13
@Memoria, Ok, then how would you abstract the including of JS libraries, to make it easy to change or update? Do you leave them static, and then create a regex script or something every time? It seems that if I create "classes" of libraries, it is easier to manage. – chris Frisina Nov 12 '12 at 20:20
I created a simple example how can you solve your problem. here: [link](http://pastebin.com/FSGj7D4H) – Memoria Nov 12 '12 at 20:38

score 0 · Answer 3 · answered Nov 12 '12 at 20:27

I personally wouldn't recommend putting javascript to the bottom, even though you often hear this advice. It has primarly to do with loading performance and script blocking, which is not such a big issue any more with todays modern browsers.

For the sake of organisation, I like to have my scripts in the head but finally, it comes down to your personal preferences. Even Yahoo recommends putting scripts on bottom, so it can't be that wrong.

Take $(document.ready when working with jQuery (fires as soon, as the DOM tree is completely parsed and BEFORE images are fully loaded) and put the init code after you load jQuery itself - whereever you decide to put it.

Apart from that, your fundamental understanding of the request-response anatomy of a webpage is correct ;).

a modern browser still exhibits blocking behavior from the loading of a normal script tag. what they can do is make use of the defer attribute or the async attribute, but is not supported across all browsers. placing your script tags at the bottom of the page is the equivalent of wrapping your code in doc ready callbacks, (also, docready wrappage causes variable encapsulation, thus requiring increased usage of dreaded global variables) and will not cause a visible slowness in page rendering of dom elements. thats why many people (and yahoo) do it. — Kristian, Nov 12 '12 at 20:32

PHP include of JS libraries

3 Answers3