Author

QQ Music Frontend Team

QQ Music Web Frontend Team

Articles

Likes

Views

Comments

Latest from QQ Music Frontend Team

34 recent articles

QQ Music Frontend Team

Oct 20, 2019 · Frontend Development

When Should You Use Class, Functional, or Pure Components in React?

This article explains the differences between React class components, functional (stateless) components, and PureComponent, shows their source code, discusses shallow equality checks, introduces the memo higher‑order component, and provides practical guidelines for choosing the right component type to improve performance.

Class ComponentFunctional ComponentPureComponent

0 likes · 10 min read

When Should You Use Class, Functional, or Pure Components in React?

QQ Music Frontend Team

Jun 30, 2019 · Frontend Development

Why JSX Compilation Fails: Understanding React.createElement and Common Pitfalls

This article explains how React processes JSX by compiling it with Babel into React.createElement calls, detailing the handling of mixed JavaScript‑HTML syntax, the importance of capitalized component names, and common pitfalls when using expressions inside braces, illustrated with multiple code demos.

JSXReactbabel

0 likes · 8 min read

Why JSX Compilation Fails: Understanding React.createElement and Common Pitfalls

QQ Music Frontend Team

Mar 17, 2019 · Frontend Development

How to Build a Front‑End User Behavior Tracing System for Faster Issue Diagnosis

This article explains the design and implementation of a front‑end user behavior tracing system, covering common external network problems, the importance of collecting runtime environment, data, JS errors, and interaction logs, and detailing SDK data collection, reporting strategies, server processing, and query platform visualization.

IndexedDBMonitoringUser Behavior Tracking

0 likes · 14 min read

How to Build a Front‑End User Behavior Tracing System for Faster Issue Diagnosis

QQ Music Frontend Team

Dec 9, 2018 · Fundamentals

Why 0.1 + 0.2 ≠ 0.3 in JavaScript? Understanding Number Precision and Fixes

This article explains why JavaScript’s Number type suffers from floating‑point precision errors, describes the IEEE‑754 double‑precision storage format, clarifies key Number properties, shows why 0.1 + 0.2 is not exactly 0.3, and provides practical code‑based solutions.

IEEE-754JavaScriptPrecision

0 likes · 9 min read

Why 0.1 + 0.2 ≠ 0.3 in JavaScript? Understanding Number Precision and Fixes

QQ Music Frontend Team

Oct 27, 2018 · Frontend Development

Build Reusable UI with Web Components: A Step‑by‑Step Counter Example

Learn how to create reusable, encapsulated UI components using Web Components by building a simple counter element with Custom Elements, Templates, Shadow DOM, properties, events, and attributes, and see how to integrate it into any framework, handle data binding, and dispatch custom events.

FrontendJavaScriptShadow DOM

0 likes · 10 min read

Build Reusable UI with Web Components: A Step‑by‑Step Counter Example

QQ Music Frontend Team

Sep 23, 2018 · Frontend Development

How to Achieve 60fps Web Animations with requestAnimationFrame

Learn the essential techniques for creating silky‑smooth, 60 fps web animations by understanding frame timing, reducing layout and paint costs, leveraging requestAnimationFrame, applying hardware acceleration, and optimizing rendering pipelines to avoid jank and improve performance across browsers.

Web animationrequestAnimationFrame

0 likes · 16 min read

How to Achieve 60fps Web Animations with requestAnimationFrame

QQ Music Frontend Team

Sep 16, 2018 · Frontend Development

Build a Browser‑Based Simulated Terminal with Command Autocomplete and History

This tutorial walks through creating a web‑based simulated Linux terminal, covering styled input handling, rendering logic, command parsing for ls, cd, cat, autocomplete, and command history, with both front‑end JavaScript and back‑end Node.js implementations and full code examples.

Command-lineautocompleteterminal

0 likes · 16 min read

Build a Browser‑Based Simulated Terminal with Command Autocomplete and History

QQ Music Frontend Team

Aug 19, 2018 · Frontend Development

How to Build a Real‑Time Page Performance Monitoring System

This article explains why monitoring page performance is crucial for user experience and SEO, outlines the design of a three‑part monitoring system—including front‑end data reporting via Navigation Timing, server‑side log collection with Nginx, data aggregation, sampling, storage, and visual dashboards—providing a complete end‑to‑end solution.

Data VisualizationNginxPerformance Monitoring

0 likes · 17 min read

How to Build a Real‑Time Page Performance Monitoring System

QQ Music Frontend Team

Jul 15, 2018 · Frontend Development

Create Unbreakable Web Page Watermarks with Canvas, SVG, and Node.js

This article presents multiple techniques for generating robust web page and image watermarks—including Canvas and SVG rendering, MutationObserver protection, and Node.js server-side generation—complete with code examples, compatibility notes, and best‑practice recommendations to prevent content leakage and enable traceability.

MutationObservernodejswatermark

0 likes · 14 min read

Create Unbreakable Web Page Watermarks with Canvas, SVG, and Node.js

QQ Music Frontend Team

Jul 8, 2018 · Frontend Development

Why WebAssembly Could Outperform JavaScript: Load Times, Execution, and More

This article examines WebAssembly’s core features—loading speed, execution performance, memory model, garbage collection, API access, multithreading, and portability—comparing them to JavaScript, and discusses suitable use cases such as high‑CPU tasks, gaming, and image processing, while noting current limitations and future prospects.

FrontendJavaScriptWebAssembly

0 likes · 11 min read

Why WebAssembly Could Outperform JavaScript: Load Times, Execution, and More