1. Loading Scripts

2. Stages
Stage 1, page loading (blank page)

3. Stage 2
Document mark up displays the text and image place holders on your page.

4. Stage 3
Page is fully loaded with images, stylesheets and scripts, etc

5. Events DOMContentLoaded load
document.addEventListener("DOMContentLoaded", start);
window.addEventListener("load", start);

6. Your browser parses your DOM sequentially from the top to the bottom
Your browser parses your DOM sequentially from the top to the bottom. Any script elements found along the way will get parsed in the order they appear in the DOM.

7. Loading Images

8. var image = new Image(); image. src = “image. png”; image
var image = new Image(); image.src = “image.png”; image.onload = function () { // Image has loaded. };

9. Allow smoother animation
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };

10. JavaScript Objects