7 Điểm nghẽn Hiệu năng JavaScript Ẩn giấu

Các ứng dụng web chạy chậm hiếm khi thất bại do thuật toán kém. Chúng thất bại vì cách mã của bạn tương tác với trình duyệt.

Tôi đã thực hiện profiling cho hơn 300 ứng dụng thực tế. Tôi nhận thấy rằng 73% các vấn đề về hiệu năng đến từ 7 nguồn sau đây.

  1. Layout thrashing Điều này xảy ra khi bạn đọc một thuộc tính layout và sau đó ghi vào DOM ngay lập tức. Việc này buộc trình duyệt phải tính toán lại layout nhiều lần. • Tác động: Tốc độ rendering chậm hơn 40-60%. • Cách khắc phục: Hãy gom tất cả các thao tác đọc lại trước. Sau đó, gom tất cả các thao tác ghi bằng cách sử dụng requestAnimationFrame.

  2. Unbounded event listeners Việc thêm một listener mà không gỡ bỏ nó sẽ gây ra rò rỉ bộ nhớ (memory leaks). Đây là một vấn đề lớn trong các ứng dụng single-page (SPA). • Tác động: Bộ nhớ tăng 15-30% mỗi giờ. • Cách khắc phục: Sử dụng AbortController để dọn dẹp các listener khi một component unmount.

  3. Synchronous DOM reads in loops Việc đọc các thuộc tính như offsetWidth bên trong một vòng lặp có thực hiện ghi vào DOM sẽ gây ra các đợt reflow liên tục. • Tác động: Giảm 20-40% số khung hình (frame drops). • Cách khắc phục: Lưu trữ (cache) các giá trị layout vào một biến trước khi bắt đầu vòng lặp.

  4. Missing requestAnimationFrame batching Các thay đổi DOM trực tiếp trong các sự kiện scroll hoặc resize được kích hoạt quá thường xuyên. • Tác động: Gây ra hiện tượng giật (jank) 10-25% khi cuộn. • Cách khắc phục: Bao bọc các trình xử lý scroll của bạn trong requestAnimationFrame để đồng bộ với chu kỳ paint.

  5. Large JSON.parse calls Việc phân tích các tệp JSON khổng lồ sẽ chặn luồng chính (main thread), gây ra tình trạng trễ đầu vào (input lag). • Tác động: Gây đóng băng 50-200ms cho mỗi lần gọi. • Cách khắc phục: Sử dụng Web Workers để phân tích dữ liệu bên ngoài luồng chính.

  6. Complex CSS selector matching Các selector lồng nhau sâu hoặc phức tạp sẽ làm chậm quá trình tính toán lại style. • Tác động: Tốn thêm 5-15% thời gian tính toán style. • Cách khắc phục: Đơn giản hóa cấu trúc CSS và sử dụng các selector phẳng hơn.

  7. Duplicate bundle chunks Các bundle không được tối ưu hóa sẽ gây lãng phí băng thông. • Tác động: Lãng phí 100-500KB dữ liệu truyền tải. • Cách khắc phục: Sử dụng các công cụ như webpack-bundle-analyzer để tìm và loại bỏ mã trùng lặp.

Cách đo lường tiến trình của bạn: • Mở Chrome DevTools và đi tới tab Performance. • Ghi lại một phiên (session) kéo dài 5 giây. • Tìm các tác vụ dài (long tasks) trong biểu đồ Main flame chart. • Áp dụng một cách khắc phục và so sánh thời gian Rendering và Painting.

Hãy tập trung vào các lĩnh vực này để cải thiện điểm Core Web Vitals của bạn.

Nguồn: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5