From 08ab3fd0b2ee944b85092d5f8659e130d79a8051 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 21 Jan 2023 12:22:19 +0200 Subject: [PATCH] Add a new tip article --- .../passive-scroll-listener-performance.md | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 blog_posts/passive-scroll-listener-performance.md diff --git a/blog_posts/passive-scroll-listener-performance.md b/blog_posts/passive-scroll-listener-performance.md new file mode 100644 index 000000000..bd18766a5 --- /dev/null +++ b/blog_posts/passive-scroll-listener-performance.md @@ -0,0 +1,21 @@ +--- +title: "Tip: Improve scroll listener performance" +shortTitle: Improve scroll listener performance +type: tip +tags: javascript,browser,event +author: chalarangelo +cover: blog_images/chill-surfing.jpg +excerpt: Scroll listeners can easily become a performance bottleneck for your web application. Here's how to fix that. +firstSeen: 2023-03-07T05:00:00-04:00 +--- + +When working with scroll listeners in JavaScript, one can often run into performance issues. This is because scroll listeners are triggered on every single scroll event, which can be quite frequent. Most of the time, such listeners are used for infinite scrolling and lazy loading, meaning that the scroll event won't be intercepted. As such, `Event.preventDefault()` will not be called, guving us an optimization opportunity. + +```js +window.addEventListener('scroll', () => { + // Do something + // Can't use `preventDefault` here +}, { passive: true }); +``` + +As demonstrated in this code snippet, setting the `passive` option to `true` will enable certain performance optimizations in the browser. This way, the browser will know that it can safely skip the event queue and execute the scroll listener immediately. The result is a much smoother experience for the user, as the scroll event will be handled immediately, instead of being queued and handled later.