Cách JavaScript Performance giúp website né đống event thừa

Bạn đã bao giờ gặp cảnh cái thanh tìm kiếm (search bar) nó "giật lag" điên cuồng khi bạn vừa mới gõ vài chữ chưa? Cứ mỗi lần bạn nhấn một phím, trình duyệt lại hớt hải đi gửi một yêu cầu (API call) đến máy chủ. Kết quả là máy chủ thì "khóc thét" vì quá tải, còn người dùng thì bực mình vì giao diện đơ cứng. Đây chính là lúc bạn cần đến JavaScript Performance — cụ thể là hai kỹ thuật "phanh" sự kiện cực kỳ lợi hại: Debounce và Throttle.

Debounce — Đợi tí, đừng có vội!

Hãy tưởng tượng Debounce giống như việc bạn đợi đứa bạn nói hết câu rồi mới trả lời, chứ không nhảy vào họng nó sau mỗi từ. Trong lập trình, Debounce sẽ trì hoãn việc thực thi một hàm cho đến khi người dùng ngừng thực hiện hành động đó trong một khoảng thời gian nhất định.

Ví dụ điển hình nhất là ô tìm kiếm. Chúng ta không muốn tìm kiếm ngay khi khách vừa gõ chữ "h", rồi lại tìm tiếp khi gõ chữ "ha". Chúng ta muốn đợi họ gõ xong chữ "hanoi" rồi mới bắt đầu gọi dữ liệu. Việc này giúp tiết kiệm tài nguyên máy chủ và làm website của bạn cảm giác "thông minh" hơn hẳn.

// Hàm Debounce đơn giản
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Cũng giống như Cách React 19 giúp bạn quản lý trạng thái tải dữ liệu một cách mượt mà, Debounce giúp bạn kiểm soát tần suất của các hành động đó từ phía người dùng. Bạn có thể tìm hiểu thêm về các hàm xử lý thời gian tại tài liệu chính thức của MDN.

Throttle — Cứ từ từ, theo đúng nhịp điệu

Khác với Debounce là đợi "ngừng hẳn" mới chạy, Throttle (kiểm soát dòng chảy) đảm bảo rằng một hàm chỉ được thực thi tối đa một lần trong một khoảng thời gian cố định, bất kể người dùng có thao tác nhanh đến mức nào.

Kỹ thuật này cực kỳ hữu dụng cho các sự kiện (event) xảy ra liên tục như cuộn trang (scroll) hoặc thay đổi kích thước cửa sổ (resize). Nếu bạn đang làm các hiệu ứng hoạt ảnh phức tạp, đừng bỏ qua Throttle để giữ cho tỷ lệ khung hình luôn ổn định. Nếu bạn đã từng thử Cách View Transitions API để làm hiệu ứng chuyển trang, bạn sẽ thấy việc kết hợp với Throttle cho các hiệu ứng cuộn trang sẽ tạo nên một trải nghiệm cực kỳ cao cấp.

Chọn "vũ khí" nào cho đúng trận chiến?

Việc chọn giữa Debounce hay Throttle phụ thuộc hoàn toàn vào trải nghiệm người dùng (UX) mà bạn muốn hướng tới. Nếu bạn cần kết quả cuối cùng sau khi người dùng thao tác xong (như lưu bản nháp, tìm kiếm), hãy chọn Debounce. Nếu bạn cần phản hồi liên tục nhưng có chừng mực (như bắn đạn trong game, xử lý thanh tiến trình khi cuộn trang), Throttle là chân ái.

• Debounce: Thích hợp cho Search Bar, Form Validation (kiểm tra tính hợp lệ của ô nhập).
• Throttle: Thích hợp cho Scroll sự kiện, Mouse Move (di chuyển chuột), Resize cửa sổ.

Tối ưu hóa JavaScript Performance không chỉ là viết code chạy được, mà là viết code chạy một cách tử tế và tiết kiệm tài nguyên. Điều này đặc biệt quan trọng khi bạn xây dựng các ứng dụng lớn tại DIA DEMY, nơi trải nghiệm người dùng luôn được đặt lên hàng đầu.

Khi đã làm chủ được nhịp điệu của các sự kiện, website của bạn sẽ không còn cảnh giật lag khó chịu nữa. Nhưng liệu bạn đã biết cách xử lý khi đống logic này trở nên quá phức tạp trong các dự án thực tế?