Try the new tutorial on

Advanced and Extra stuff

onLoad and onDOMContentLoaded

  1. Load
  2. DOMContentLoaded
    1. What it awaits, in detail
  3. The alternative to DOMContentLoaded
  4. Hacks for IE<9
    1. IE<9 hack for a document not inside a frame
    2. IE<9 hack in a frame
    3. The last resort: window.onload
  5. The crossbrowser DOMContentLoaded handling code
  6. Multiple handlers

The “document is loaded” event is a nice hook for page initialization. All elements are at place and we can build interfaces on them.

There are two main events to track it: load and DOMContentLoaded.


  1. The basics of the animation
  2. Animation refactored
  3. Maths, the function of progress delta
  4. Reverse functions (easeIn, easeOut, easeInOut)
  5. Changing step
  6. CSS transitions
  7. Optimization hints
  8. Summary

Usually, a framework handles the animation for you.

However, you may wonder how the animation is implemented in pure JavaScript, and what are the possible problems.

Understanding the technique is also essential to create complex animations. Even with the help of frameworks.

Memory leaks

  1. Memory management in JavaScript
  2. Memory leaks
  3. Finding and fixing memory leaks
  4. Tools

In JavaScript, we rarely think about memory management. It appears natural that we create variables, use them and the browser takes care about low-level details.

But as applications become complex and AJAXy, and a visitor stays on a page for a long time, we may notice problems like a browser takes 1G+ and grows larger and larger in size. That’s usually because of memory leaks.

Here we discuss the memory management and most frequent types of leaks.