Benchmark & Profiling: Đo lường hiệu năng

Một Senior Engineer không bao giờ nói: "Tôi nghĩ đoạn code này chạy chậm". Họ nói: "Dựa trên Profiling, hàm này tốn 500ms để thực thi và chiếm 80% CPU".

1. Console Time & Performance API

Công cụ đơn giản nhất để đo nhanh một khối mã:

console.time("Array Process");
// Logic của bạn
console.timeEnd("Array Process");

// Chính xác hơn với Performance API
const start = performance.now();
doWork();
const end = performance.now();
console.log(`Execution time: ${end - start} ms`);

2. Chrome DevTools Performance Tab

Đây là "vũ khí hạng nặng" của bạn.

1. Mở Chrome DevTools -> Tab Performance.
2. Nhấn nút Record (Hình tròn).
3. Thực hiện thao tác bạn muốn đo lường trên trang web.
4. Nhấn Stop.

Các chỉ số cần quan tâm:

• Long Tasks: Các khối mã chạy quá 50ms, thường gây ra hiện tượng giật lag (Jank).
• Flame Chart: Biểu đồ hình ngọn lửa cho thấy hàm nào đang gọi hàm nào và tốn bao nhiêu thời gian.
• Main Thread: Cột hiển thị các hoạt động của luồng chính JS.

3. Profiling Memory (Heap Snapshot)

Để tìm Memory Leaks, hãy dùng tab Memory:

1. Chọn Heap Snapshot.
2. Chụp 1 phát lúc ứng dụng vừa khởi động.
3. Thực hiện thao tác (ví dụ: mở và đóng một Modal 10 lần).
4. Chụp phát thứ 2.
5. So sánh (Comparison) để xem object nào tăng lên mà không bị xóa.

4. Thử nghiệm: Tối ưu hóa vòng lặp

Hãy chạy bài Lab này để thấy sự khác biệt về hiệu năng giữa các cách viết code khác nhau.

5. Senior Note: "Premature Optimization"

Donald Knuth đã nói: "Tối ưu hóa sớm là nguồn gốc của mọi tội lỗi". Đừng tốn hàng giờ để tối ưu một hàm chỉ chạy 1 lần lúc khởi động và tốn 1ms. Hãy tập trung vào:

• Các thao tác lặp lại liên tục (Rendering).
• Các hàm xử lý dữ liệu lớn (Big Data).
• Các thao tác chặn người dùng (Blocking UI).

Tình huống thực tế & Phỏng vấn

Scenario: Ứng dụng bị giật lag khi gõ phím

Bối cảnh: Bạn có một thanh tìm kiếm (Search Bar) lọc danh sách 5000 sản phẩm. Khi người dùng gõ phím, giao diện bị đơ khoảng 1 giây.

Vấn đề: Sau khi dùng Profiling, bạn thấy hàm filterProducts chạy quá 300ms, chiếm dụng luồng chính (Main Thread) và ngăn cản trình duyệt vẽ lại UI cho ký tự vừa gõ.

Giải pháp Senior:

1. Debouncing: Chỉ chạy lọc sau khi người dùng ngừng gõ 300ms.
2. Offloading: Chuyển logic filterProducts sang một Web Worker để luồng chính rảnh tay phục vụ UI.
3. Phân tích kết quả: Sử dụng Performance Tab sau khi sửa để chứng minh "Long Tasks" đã biến mất.

Interview Question: Senior Level

Q: Tại sao việc đo lường (Benchmarking) bằng một vòng lặp for đơn giản đôi khi lại không phản ánh đúng hiệu năng thực tế trong JavaScript? (Gợi ý: Nhắc đến JIT Compilation và De-optimization).

Tổng kết

Việc làm chủ công cụ Profiling giúp bạn tự tin hơn khi đưa ra các giải pháp kỹ thuật. Nó biến lập trình từ một môn "nghệ thuật cảm tính" thành một môn Khoa học máy tính thực thụ.