Web Development Performance Optimization 4

Question 1

What does the term 'layout thrashing' refer to in browser performance?

Accepted Answer

Repeatedly triggering layout by interleaving DOM reads and writes in JavaScript

Answer

Layout thrashing occurs when JS alternately reads then writes layout properties, forcing the browser to recalculate layout repeatedly.

Question 2

Which web API allows you to observe when elements enter or exit the viewport without scroll event listeners?

Accepted Answer

IntersectionObserver

Answer

IntersectionObserver asynchronously notifies you when a target element's intersection with the viewport changes.

Question 3

What is the purpose of prefetching a resource with <link rel='prefetch'>?

Accepted Answer

To hint the browser to fetch a resource that may be needed for future navigation

Answer

rel='prefetch' tells the browser to fetch a low-priority resource in the background for likely future use.

Question 4

What does 'code splitting' allow you to do in a JavaScript application?

Accepted Answer

Split your bundle into smaller chunks loaded on demand

Answer

Code splitting breaks a large bundle into smaller chunks that are loaded lazily, reducing the initial JavaScript payload.

Question 5

Which Performance API method would you use to mark a specific point in time during script execution for performance measurement?

Accepted Answer

performance.mark()

Answer

performance.mark() creates a named timestamp in the performance timeline that you can later reference with performance.measure().

Web Development Practice Test