ByteDance Dev Better Frontend Performance & New Technology Practices – Session Summaries

On September 17, ByteDance's Dev Infra team organized the "Dev Better" frontend performance and new technology salon, bringing together engineers Liu Yi, Peng Li, Zhang Haoyang, and Chen Boshen to share practical insights.

1. "Evolution of Frontend Performance Analysis Tools" – Liu Yi

Outline: Frontend performance issues overview; performance analysis and optimization workflow; ByteDance's practice in performance analysis and optimization.

Q&A highlights: Evaluation metrics include bundle uglification, duplicate dependencies, and Lighthouse metrics; VSCode inlay hint plugins are explained with references to VSCode extension documentation.

2. "Building and Optimizing Frontend Performance Systems" – Peng Li

Outline: Conventional performance systems; multi‑scenario exploration and practice; faster problem discovery and localization.

Q&A highlights: White‑screen causes are varied, not just JS errors; monitoring plugins collect metrics without performance overhead; service targets range from individual developers to large enterprises.

3. "Frontend Performance Monitoring Best Practices" – Zhang Haoyang

Outline: Performance detection and root‑cause analysis; integrating monitoring into development workflow; site quality assessment from a higher perspective.

Q&A highlights: Debugging uses source maps; user environment info is gathered via User‑Agent and IP; page‑level metrics are grouped by PageId (PID) and adjusted manually based on business needs.

4. "JavaScript Compiler in Rust" – Chen Boshen

Outline: Modern frontend toolchain overview; why JavaScript toolchains are slower and native ones faster; building a Rust‑based JavaScript compiler; achieving 20× ESLint performance boost; optimization experiences.

Q&A highlights: Rust offers better safety and lower mental load; Rust can outperform JavaScript by 1‑2× out‑of‑the‑box and up to dozens of times when fully optimized; Rust code can be compiled to WebAssembly via wasm‑pack and used in JavaScript environments.

Additional notes: Attendees can obtain the PPT by following the "ByteDance Terminal Technology" public account and replying with the keyword "Frontend Performance Salon PPT"; links to the perfsee repository and a QR‑code for the APM assistant were also shared.