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.

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.

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.