Let's take a closer look at how a browser retrieves and acts on scripts.
modern browser can parallel downloading 6 files(style sheets && images)
at a time. BUT, when it see Scripts, the parallel downloading will stop!
Therefore, any scripts in <head></head> which are not that necessary to be there
might affect you browser performance
1. Scripts that are not essential to immediate loading of the page should be
moved as low as possible, in front of </body>
2. With external files, the HTML5 async attribute will allow the rest of the
page to load before the script runs.
When browser loading page, once see async attribute,
it will now fetch the script resource, but will continue parsing and rendering
HTML, without waiting for the script to complete!
<script src="formOjbect.js" async></script>
-----------------------------Ex------------------------------
"Be careful, for data intensive processes are the ones that will stop the show. Which of these included script tags will take the longest to load"
inhabitants.js
var invertedPeninsula = { inhabitants: [ "Nipping Global Variable", "Sneaky For-in", "Bulging Blocking Script" ] } function populationGetter(){ var population = invertedPeninsula.inhabitants; var list = ""; for(var i = 0, ff = population.length; i < ff; i++){ list += (population[i] + " "); } return list.trim(); } populationGetter();
info.js
var land = "Inverted Peninsula"; var character = "Dhuun"; var lampsLit = 1;
inhabitantsProto.js
Array.prototype.killTheInsolent = function(){}; Array.prototype.countPopulace = function(){}; Array.prototype.countUndeadPopulace = function(){}; Array.prototype.incesticide = function(){}; Array.prototype.shadowProvider = function(){};