Javascript

Javascript Files

The script elements to include a document’s JavaScript files should be placed directly before a document’s closing body tag:

<script src="script/transitions.js"></script> </body> </html>

This is because JavaScript files are a “blocking resource” that will prevent the browser from downloading other resources on the page while downloading the script

Minifying Resources

JavaScript and CSS files should be minified. Minification is the process of condensing JavaScript and CSS files to only include the required content. For example, spaces can be removed from CSS files and the names of local variables can be shortened in JavaScript files. A number of tools are out there for performing this crucial task.

Here’s how a developer would write a JavaScript file for usage in a website:

// return random number between 1 and 6 function dieToss() { return Math.floor(Math.random() _6) + 1;} // function returns a promise that succeeds if a 6 is tossed function tossASix() { return new RSVP.Promise(function(fulfill, reject) { var number = Math.floor(Math.random()_ 6) + 1; if (number === 6) { fulfill(number); } else { reject(number); } }); } function logAndTossAgain(toss) { console.log("Tossed a " + toss + ", need to try again."); return tossASix(); }

function logSuccess(toss) { console.log("Yay, managed to toss a " + toss + "."); }

function logFailure(toss) { console.log("Tossed a " + toss + ". Too bad, couldn't roll a six"); } // use promise paradigm to try three times to toss a 6 tossASix() .then(null, logAndTossAgain) //Roll first time .then(null, logAndTossAgain) //Roll second time .then(logSuccess, logFailure); //Roll third and last time

When minified, the same code looks like this:

function dieToss(){return Math.floor(6*Math.random())+1}function tossASix(){return new RSVP.Promise(function(a,b){var c=Math.floor(6*Math.random())+1;6===c?a(c):b(c)})}function logAndTossAgain(a){return console.log("Tossed a "+a+", need to try again."),tossASix()}function logSuccess(a){console.log("Yay, managed to toss a "+a+".")}function logFailure(a){console.log("Tossed a "+a+". Too bad, couldn't roll a six")}tossASix().then(null,logAndTossAgain).then(null,logAndTossAgain).then(logSuccess,logFailure);

Concatenating Files

JavaScript and CSS files should also be concatenated, or combined together into a single file. In other words, rather than referencing multiple JavaScript files on a page, these scripts should be concatenated into a single JavaScript file. This improves performance by reducing the number of separate connections the browser needs to establish while loading a page.