A Practical Guide to Chrome Performance Tools and the Performance API

Overview

Performance optimization is a common task in front‑end development; developers often refer to guidelines such as Yahoo's 35 rules but need concrete tools to measure and locate issues. This article covers four aspects: Chrome Performance tool usage, the Performance API, existing third‑party tools, and a small hands‑on example.

Chrome Performance Tool Usage

The Chrome Performance panel consists of several sections: Controls (record, reload, clear), Overview (FPS, CPU, NET), Flame Chart (visualizing CPU stacks), Detail (summary, bottom‑up, call‑tree, event‑log). Each section provides specific metrics such as long frames, script execution time, resource loading time, and paint events.

Controls

Use "Record/Stop" to capture interaction, "Reload" for first‑paint measurements, and "Clear" to reset data. The right side toggles Screenshots, Memory, and Web Vitals.

Overview

Shows FPS, CPU usage, and network waterfall. Colored bars indicate resource types (HTML, script, stylesheet, media, others) and differentiate waiting time from transfer time.

Flame Chart

Visualizes the CPU stack; key vertical lines mark DOMContentLoaded, Time to First Paint, and load events.

Detail Panels

Summary highlights total load time, scripting, rendering, painting, etc. Bottom‑Up lists self‑time and total‑time per activity, while Call‑Tree and Event‑Log provide hierarchical and chronological views.

Performance API Monitoring

The W3C Performance API, exposed via window.performance, offers three objects: memory, navigation, and timing. They provide heap size limits, navigation type, redirect counts, and high‑precision timestamps for each loading phase (e.g., navigationStart, responseStart, domContentLoadedEventEnd, loadEventEnd).

Key Methods

window.performance.now()

returns a high‑resolution, monotonically increasing timestamp (microsecond precision) unaffected by system clock changes, useful for measuring function execution time.

const fun = () => {
  // do something
}
const startExcuteTime = window.performance.now();
fun();
const endExcuteTime = window.performance.now();
console.log("fun 函数执行了" + (endExcuteTime - startExcuteTime) + "毫秒.");

performance.getEntries()

returns an array of resource timing objects, each describing detailed request phases, enabling custom monitoring of network performance.

Simple Metric Calculation

Typical metrics derived from timing data include redirect time, DNS lookup time, TCP connection time, HTTP request time, DOM parsing time, white‑screen time, DOMContentLoaded time, and onload time. These can be computed by subtracting the appropriate timestamps (e.g., redirectEnd - redirectStart).

Existing Web Performance Tools

Beyond built‑in tools, popular third‑party auditors include Lighthouse, PageSpeed Insights, and YSlow. Lighthouse also provides actionable optimization suggestions.

Performance Tool Demo

A case study of a project with CEF and browser hosts showed that a large encoding.js file caused a 2.13 s delay in DOMContentLoaded. By analyzing the Network flame chart, the file was identified as unnecessary in the browser environment and removed, reducing DCL to 972 ms.

Summary

The article demonstrates how to use Chrome's Performance panel and the Performance API to locate bottlenecks, compute custom metrics, and apply practical optimizations, complementing existing auditing tools for front‑end performance engineering.