Front‑end Performance Monitoring and Optimization Techniques
This article explains the concepts of controllable and uncontrollable latency in front‑end performance, outlines methods for collecting static, dynamic, and API performance data using network waterfall, Chrome Performance, console timing, and Performance Timing API, and provides practical code examples and optimization strategies to improve user experience.
Background – Front‑end performance is a critical skill for engineers; understanding both optimization methods and performance monitoring is essential to identify and address bottlenecks.
Analysis and Plan – Performance is measured by the time from a user’s request to the moment data is displayed. Delays are divided into controllable (e.g., image size, request count) and uncontrollable (e.g., network latency, CPU processing) components, with optimization focusing on the former.
Acquiring Performance Data
We consider three categories:
Static performance – bundle size analysis (not covered in detail).
Dynamic performance – first‑screen metrics such as FMP, TTI, FCP, FP, load‑time ratios, and interaction delays; resource loading times; white‑screen and loading durations.
API performance – monitoring key‑interface latency and success rates, as well as overall interface metrics.
Dynamic performance can be evaluated using network waterfall, Chrome’s Performance tab, console timing functions, and the Performance Timing API.
1. Network Waterfall – In the Network panel, each request’s timeline is visualized with colors (queueing, stalled, DNS lookup, connection, SSL, request sent, waiting, download). By inspecting these phases, developers can pinpoint slow resources and reduce request count, resource size, or improve ordering.
2. Performance Tab – Record a session (Ctrl+Shift+E) to view a detailed timeline, ensuring the “Screen Capture” option is enabled to see first‑screen rendering.
3. Console Timing – Use console.time() / console.timeEnd() , console.trace() , console.profile() , or new Date() / performance.now() to measure code execution durations.
4. Performance Timing API – Provides timestamps such as navigationStart, domainLookupStart/End, connectStart/End, responseStart, domContentLoadedEventEnd, loadEventEnd, etc. These values are typically read after the window.onload event.
Key metrics include DNS lookup time, TCP connection time, white‑screen time, DOM ready time, and page load time. Note that asynchronous requests can delay window.onload , affecting these measurements.
White‑Screen and First‑Screen Calculations
White‑screen time = window.firstPaint - performance.timing.navigationStart . It covers DNS, TCP, request, HTML parsing, and initial rendering. First‑screen time (First Contentful Paint) is the interval from request start to the completion of the first visible content. Common estimation methods are:
Marking the end of first‑screen DOM in HTML.
Measuring the slowest image load within the first screen.
Custom module timing (recording timestamps before and after rendering the main first‑screen DOM).
Axios Interceptor Monitoring
Record timestamps in request and response interceptors to calculate interface latency, and capture errors to compute success rates.
Conclusion – Data‑driven monitoring and statistical analysis are indispensable for convincing performance optimizations. Accurate measurement, continuous reporting, and iterative improvements lead to better user experience throughout a front‑end developer’s career.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>白屏时间计算-常规方法</title>
<link rel="stylesheet" href="https://b-gold-cdn.xitu.io/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://b-gold-cdn.xitu.io/asset/fw-icon/1.0.9/iconfont.css">
<script>
window.firstPaint = Date.now();
console.log(`白屏时间：${window.firstPaint - performance.timing.navigationStart}`);
</script>
</head>
<body>
<div>这是常规计算白屏时间的示例页面</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首屏</title>
<script type="text/javascript">
window.pageStartTime = Date.now();
</script>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
</head>
<body>
<!-- 首屏可见模块1 -->
<div class="module-1"></div>
<!-- 首屏可见模块2 -->
<div class="module-2"></div>
<script type="text/javascript">
window.firstScreen = Date.now();
</script>
<!-- 首屏不可见模块3 -->
<div class="module-3"></div>
<!-- 首屏不可见模块4 -->
<div class="module-4"></div>
</body>
</html>TAL Education Technology
TAL Education is a technology-driven education company committed to the mission of 'making education better through love and technology'. The TAL technology team has always been dedicated to educational technology research and innovation. This is the external platform of the TAL technology team, sharing weekly curated technical articles and recruitment information.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.