1

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?

Improve this question
1
  • 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. Commented Nov 12, 2012 at 20:12

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

can you give more examples/elaborate on the additional stuff as to what it is or encompasses?
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.
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.

Improve this answer

5 Comments

Not completely true: stackoverflow.com/questions/3698200/… And scripts should NOT be in the code.
that answers placement, but its it good practice to place the JS in a php include?
well I wouldn't do that myself because it seems little bit of an overkill. Includes are used for PHP Content.
@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.
I created a simple example how can you solve your problem. here: link
0

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

Improve this answer

1 Comment

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.