Tagged “performance”

• 

  Eliminating Scrollbar Layout Shifts with CSS scrollbar-gutter

  Reserving stable space for classic scrollbars when dynamic content expands or modal overlays lock body scrolling using scrollbar-gutter stable.
  10 May 2022 css layout performance
• 

  Native Deep Copying in JavaScript with structuredClone

  Cloning nested objects Maps Sets Dates and circular references natively with structuredClone without JSON serialization data loss.
  25 Jan 2022 javascript performance
• 

  Isolating DOM Subtrees with the CSS contain Property

  Bounding browser layout style and paint recalculations to independent widget subtrees using CSS containment.
  08 Sep 2021 css performance
• 

  Optimizing Critical Network Paths with HTML Resource Hints

  Eliminating DNS lookup TLS handshake and font discovery delays using link rel preconnect preload and prefetch in the document head.
  09 Jul 2021 html performance highlight
• 

  Zero-Dependency Date and Number Formatting with the JavaScript Intl API

  Replacing heavy localization bundles with native Intl DateTimeFormat NumberFormat and RelativeTimeFormat in modern browsers.
  23 May 2021 javascript performance
• 

  Keeping the Main Thread Responsive with JavaScript Web Workers

  Moving expensive data parsing search indexing and image processing off the UI thread using dedicated Web Workers and postMessage.
  25 Mar 2021 javascript performance
• 

  Preventing DOM Memory Leaks with JavaScript WeakMap and WeakSet

  Associating private component state and computed caches with DOM nodes without blocking garbage collection using WeakMap.
  24 Jan 2021 javascript performance highlight
• 

  Tracking Dynamic DOM Mutations with MutationObserver in JavaScript

  Observing attribute updates and child node insertions asynchronously without polling or deprecated Mutation Events using MutationObserver.
  23 Oct 2020 javascript performance
• 

  Boosting Rendering Performance with CSS content-visibility

  Skipping offscreen layout and paint work in long-form documents using CSS content-visibility auto and contain-intrinsic-size.
  08 Oct 2020 css performance highlight
• 

  Responsive Component Design with ResizeObserver in JavaScript

  How to build self-adapting UI components that respond to their own container dimensions rather than the global viewport using the ResizeObserver API.
  27 Jul 2020 javascript layout performance highlight
• 

  Preventing Layout Shifts with Modern CSS Aspect Ratio Boxes

  For years responsive video embeds and fluid card thumbnails required the padding-top percentage wrapper hack. Now browsers compute intrinsic aspect ratios directly from HTML width and height attributes alongside the emerging CSS aspect-ratio property.
  12 Jul 2020 css layout performance
• 

  Optimizing HTML and CSS for Core Web Vitals LCP FID and CLS

  Google recently introduced Core Web Vitals as a unified set of real-world user experience metrics focusing on loading speed, interactivity, and visual stability. Here is how clean HTML and CSS directly improve Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
  10 Jun 2020 html css performance highlight
• 

  Canceling Stale Network Requests in JavaScript with AbortController

  Asynchronous race conditions frequently happen in typeahead search inputs and tab navigation when an older slow HTTP response resolves after a newer fast request. Using the DOM AbortController API with fetch lets you cancel in-flight requests cleanly.
  09 May 2020 javascript performance
• 

  Zero JavaScript Image Deferral with the Native HTML loading Attribute

  For years deferring offscreen images required either scroll listeners or IntersectionObserver scripts coupled with data-src attributes. With the native HTML loading attribute now shipping in Chromium and Firefox, browsers can defer below-the-fold images and iframes automatically without a single line of JavaScript.
  22 Feb 2020 html performance highlight
• 

  Event Delegation and DOM Event Bubbling in JavaScript

  Attaching individual click listeners to hundreds of list items consumes unnecessary memory and breaks whenever new DOM nodes are rendered dynamically. Event delegation leverages DOM event bubbling to handle child interactions from a single parent listener.
  26 Jun 2019 javascript performance
• 

  Responsive Images Done Right with Picture and Srcset

  Serving a single large JPEG image to both desktop monitors and 3G mobile devices wastes bandwidth and slows down First Contentful Paint. Native HTML5 picture, srcset, and sizes attributes let the browser pick the optimal image format and resolution automatically.
  11 Jun 2019 html performance
• 

  Lazy Loading Images with the Intersection Observer API

  Images often account for more than 60 percent of a page total byte weight. Using the browser native Intersection Observer API lets you defer offscreen images cleanly without running expensive getBoundingClientRect calculations on every scroll event.
  25 Apr 2019 javascript performance highlight
• 

  Implementing Debounce and Throttle in Vanilla JavaScript

  Attaching heavy DOM operations or network requests directly to scroll, resize, or keyup events can quickly freeze the browser main thread. Implementing debounce and throttle in vanilla JavaScript lets you control execution frequency using closures and timers.
  08 Mar 2019 javascript performance algorithm

See all tags.