Why the place of
<script>-tags is important
This happens because your included script files may uses
document.write() statements. Those alters the DOM which can change the behaviour how your web page is parsed, rendered and displayed.
What is the right place for your
<script> tags placed in here are loaded before any content of your web page is shown.
The HTML parser reads the header from top to down, downloads, compiles and renders the content in that order. So if you use libraries in your
The files “myscript1.js” and “myscript2.js” are loaded and executed sequential, before any further content is parsed. “myscript2.js” runs after “myscript1.js”
<script>-tags at the top of body is really pointless. They are loaded just like the script files in the head.
You should never do this.
It is a good idea to place scripts at the bottom of the
This can improve page load, because script compilation can slow down the display.— w3schools
The files “myscript1.js” and “myscript2.js” are loaded and executed parallelly. “myscript2.js” may runs before “myscript1.js”
For all of you guys using NoScript it’s the most painful job to allow scripts from A and after reloading the page they have to allow scripts from B,C,D,E and so on.
Nobody likes that. Please don’t use that method.
You can now use the
The files “myscript1.js” and “myscript2.js” are loaded and executed as soon as possible. It’s possible that “myscript2.js” runs before “myscript1.js”
Already known in HTML 4.0 was the
This also solves the dependency issue for libraries.
The files “myscript1.js” and “myscript2.js” are loaded while the page content is parsed and executed after parsing as ended. “myscript2.js” runs after “myscript1.js”
Tuning your web page
- Use minified versions of all libraries -> spaces are nice for humans not for browsers
- if you only need parts of a library think about write it your own
That’s all important. But to really boost it up:
They all do one thing: They render all libraries and your scripts into a single file, optimize and minimize them. So in the end you have a really own solution which fits your website.
- Try to use
- Use as less includes as you can because every loading process takes time and overhead.
- Really good comment on Stackoverflow
- w3schools is always a good place to start
Not every browser supports every option, but most do. See more: