I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?
I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?
Share Improve this question edited Jan 7, 2013 at 15:29 Ionică Bizău 114k94 gold badges310 silver badges487 bronze badges asked Jan 7, 2013 at 15:24 user1953708user1953708 251 gold badge1 silver badge4 bronze badges3 Answers
Reset to default 4What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file.
It costs you caching. This is a long term penalty. The impact of that depends on how often the script will be used by the browser
It saves you an HTTP request. This is a short term bonus. It saves you a bit of time when loading the script in the first place.
This has nothing to do with PHP though. It applies to any HTML document.
Some of this is "legacy". At one point, you HAD to put <script> tags in the <head> portion of your markup, and so this is where most examples put it.
If you add a src reference to an external file, you can reuse the script as a resource on other pages that call for this. If you are using the same script all over the place, put it in a "js" directory and the browser won't fetch a new copy each time. This helps with bandwidth.
If, however, you add the raw script to your page, the whole page (minus images and other "embedded" content) will arrive in one thread. This helps with load times.
Unless you're expecting 10,000+ pageviews in a short space of time, I wouldn't worry too much either way.
Oh, and one other thing to consider: http://developer.yahoo./performance/rules.html#js_bottom -- why you should put your scripts at the bottom of your document.
I totally agree with @Quentin. Additionally I would suggest putting your scripts in seperate .js files and include them - for reasons of structuring - not only in large projects.
One thing that could lead you to put the JS code into a .php file however could be if you need to generate code using PHP or if you want to use information that is e.g. pulled from a database directly like this:
<?php
$foo = getSomeInformation();
?>
<script type="text/javascript">
var someVar = <?=$foo?>;
</script>