BestHub
Sign in
Tagged articles
8 articles
Page 1 of 1
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 MonitoringSDK
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.

CLSJavaScriptWeb Performance
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 Monitoringfrontend
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 APIWeb Performance
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.

JavaScriptSentryWeb Performance
0 likes · 22 min read
Understanding Web Performance Metrics and Implementing Monitoring with Sentry
SQB Blog
SQB Blog
Sep 15, 2022 · Frontend Development

Mastering Front-End Performance: How to Use PerformanceObserver & Metrics

This article explains how to monitor and analyze front‑end performance using the deprecated performance.timing API and the modern PerformanceObserver, detailing key web‑vital metrics such as TTFB, FCP, LCP, FID, and CLS, with code examples and practical interpretation guidelines.

Metricsfrontendperformanceobserver
0 likes · 13 min read
Mastering Front-End Performance: How to Use PerformanceObserver & Metrics
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.

IntersectionObserverMutationObserverReportingObserver
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.

Performance TimelineUser Timingperformanceobserver
0 likes · 11 min read
Measuring Frontend Performance with Performance Timeline and User Timing APIs