jQuery·jQuery from selection to migration

Performance and migration

Find jQuery bottlenecks and migrate a widget to modern JavaScript.

Beginner 15 min read Lesson 9 of 300 Challenge included

What you will be able to do

Cache selections outside loops.
Batch reads before writes.
Remove unused plugins from the bundle.
Migrate one widget at a time with tests.

In plain English

The main costs are repeated selection, layout thrashing and large plugin bundles. Cache selectors, batch DOM writes and remove unused plugins. Migrate widget by widget with tests, not in one risky rewrite.

modern.jsJavaScript

const list = document.querySelector('#list')
const buttons = list.querySelectorAll('.js-select')
buttons.forEach((button) => {
  button.addEventListener('click', () => button.classList.toggle('active'))
})

Your turn

Cache a selection

Easy

Replace repeated $("#list") calls with a cached const.

JAVASCRIPT · starter

$('#list').append('a'); $('#list').append('b')

Check your understanding before moving on.

Knowledge checkQuestion 1

What is the safest migration strategy?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Build a filter widget

Lesson 9 of 300 · 0% of course