JavaScript Event Listeners

The number one cause of 'sticky' pages

Javascript event listeners are functions that are defined for execution based on user actions or browser element changes. Some common events are click, touch, scroll, and keydown.

If you have been on a bloated page that feel very 'sticky' and slow, event listeners often play a big part in the degraded performance that you experience. scroll event functions are often coded improperly and will cause a flood of resource-intesive code, css, and layout evaluations. Imagine scrolling down 500 pixels on a page. Each pixel will fire the scroll event. Imagine 500 resource intensive functions running immediately as you scroll.

The more event listeners we have on the page, the more risk we run of degraded performance while navigating a page. Each action could kick off a cascade of code, css, and layout evaluations. This is often the case when seeing high numbers like Interaction to Next Paint (INP).

We must be very careful with the frameworks, code libraries, and third-party applications we use on our pages.