BestHub
Sign in
Tag

PerformanceObserver

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 16, 2025 · Frontend Development

Building a Frontend Performance Monitoring SDK: Theory, Metrics, and Implementation

This article explains the importance of frontend performance monitoring, outlines core metrics such as FCP, LCP, FP, CLS, and demonstrates how to implement a comprehensive SDK using PerformanceObserver, custom configuration, and wrappers for fetch and XMLHttpRequest to capture resource and network data for batch reporting.

JavaScriptPerformance MonitoringPerformanceObserver
0 likes · 16 min read
Building a Frontend Performance Monitoring SDK: Theory, Metrics, and Implementation
HomeTech
HomeTech
Nov 1, 2023 · Frontend Development

Understanding and Optimizing Cumulative Layout Shift (CLS) in Web Performance

This article explains the background, definition, calculation methods, measurement techniques, and practical optimization strategies for Cumulative Layout Shift (CLS), a key web‑performance metric, and provides JavaScript code examples for tracking and reporting CLS values.

CLSJavaScriptOptimization
0 likes · 16 min read
Understanding and Optimizing Cumulative Layout Shift (CLS) in Web Performance
Bilibili Tech
Bilibili Tech
Jul 18, 2023 · Frontend Development

Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API

The article explains how to build a frontend performance monitoring system that uses PerformanceObserver and the js‑self‑profiling API to capture Core Web Vitals, detect long‑task jank, correlate network requests and user actions, and preview future ComputePressure metrics for comprehensive user‑experience diagnostics.

ComputePressurePerformance MonitoringPerformanceObserver
0 likes · 11 min read
Frontend Performance Monitoring: Loading Metrics and Jank Detection using PerformanceObserver and js-self-profiling API
58 Tech
58 Tech
Apr 6, 2023 · Frontend Development

Understanding and Using PerformanceObserver for Web Performance Metrics

PerformanceObserver, part of the W3C Performance Timeline API, enables developers to efficiently monitor key web performance metrics such as FP, FCP, LCP, CLS, and FID without polling, and the article explains its background, usage, methods, code examples, related PerformanceEntry types, and browser compatibility.

JavaScriptPerformance APIPerformanceObserver
0 likes · 12 min read
Understanding and Using PerformanceObserver for Web Performance Metrics
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2022 · Frontend Development

Understanding Web Performance Metrics and Implementing Monitoring with Sentry

This article explains the key web performance indicators such as FP, FCP, LCP, TTI, TBT, FID, CLS, how to obtain them using the Performance API and PerformanceObserver, and provides step‑by‑step guidance on configuring Sentry for automated performance monitoring, including sample JavaScript code for custom calculations.

JavaScriptPerformance MonitoringPerformanceObserver
0 likes · 22 min read
Understanding Web Performance Metrics and Implementing Monitoring with Sentry
IT Services Circle
IT Services Circle
Feb 16, 2022 · Frontend Development

Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver

This article explains how to use the five browser Observer APIs—IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver—to monitor element visibility, attribute changes, size adjustments, performance metrics, and browser interventions, providing code examples and practical use cases.

IntersectionObserverMutationObserverPerformanceObserver
0 likes · 10 min read
Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver
360 Tech Engineering
360 Tech Engineering
Aug 28, 2018 · Frontend Development

Measuring Frontend Performance with Performance Timeline and User Timing APIs

This article guides front‑end developers through the W3C Performance Timeline and User Timing specifications, demonstrating how to use performance.mark, performance.measure, and PerformanceObserver APIs—including async/await patterns—to accurately profile and monitor code execution across browsers.

JavaScriptPerformance TimelinePerformanceObserver
0 likes · 11 min read
Measuring Frontend Performance with Performance Timeline and User Timing APIs