Giảm Độ Trễ Nhập Liệu

Vấn Đề

Extension trình duyệt của Grammarly thêm underline, nút nổi và xử lý gợi ý lên mọi text editor. Với mỗi lần gõ phím, extension thực hiện tất cả điều này đồng bộ:

Gõ phím Người dùng gõ

→

Kiểm tra Overlap Button vs text (~2ms)

→

TẤT CẢ Underline Tính lại vị trí (~500ms)

→

Gợi Ý Xử lý lại toàn bộ (~15ms)

→

Paint Ký tự hiện ra

Tổng cộng: ~517ms bị chặn trước khi ký tự xuất hiện. Với 1000 underline trong tài liệu dài, người dùng gặp độ trễ nửa giây với mỗi lần gõ phím.

1

Debounce Kiểm Tra Overlap — Ẩn Nút Khi Gõ

Vấn đề: Với mỗi lần gõ, Grammarly gọi caretRangeFromPoint() — một DOM API tốn kém — để kiểm tra xem nút nổi có chồng lên con trỏ văn bản không. Chi phí ~2ms mỗi lần gõ.

Giải pháp: Không kiểm tra overlap khi đang gõ. Đơn giản ẩn nút khi người dùng bắt đầu gõ, và chỉ hiện lại (kèm kiểm tra overlap) sau khi người dùng dừng gõ 500ms.

let typingTimer = null;

editor.addEventListener('keydown', () => {
  button.collapse();          // instantly hide — no expensive check
  clearTimeout(typingTimer);
  typingTimer = setTimeout(() => {
    expensiveOverlapCheck(); // only runs ONCE after typing stops
    button.show();
  }, 500);
});

Thử nghiệm: Gõ vào ô bên dưới. Chú ý nút G màu xanh — nó ẩn ngay khi bạn gõ và hiện lại sau 500ms khi bạn dừng.

Kết quả: Tiết kiệm ~2ms mỗi lần gõ. Quan trọng hơn, 9% người dùng ít hủy kích hoạt extension Grammarly hơn — họ thích trải nghiệm ít phân tâm hơn của nút ẩn khi gõ.

2

Cập Nhật Underline theo Chunk với requestAnimationFrame

Vấn đề: Với mỗi lần gõ, Grammarly tính lại vị trí của mọi underline trong tài liệu. Với 1000 underline, mỗi cái cần một DOM API call (~0.5ms), tổng cộng 500ms công việc chặn mỗi lần gõ.

Giải pháp: Đặt time budget mỗi frame (ví dụ 4ms). Xử lý càng nhiều underline càng tốt trong budget đó. Khi hết thời gian, dùng requestAnimationFrame() để lên lịch phần còn lại cho frame tiếp theo. Dùng Set để tránh xử lý trùng.

const TIME_BUDGET = 4; // ms per frame
let pending = new Set();  // underlines that need updating

function processChunk() {
  const start = performance.now();

  for (const id of pending) {
    if (performance.now() - start > TIME_BUDGET) break; // time's up!
    updateUnderlinePosition(id);  // expensive DOM call
    pending.delete(id);
  }

  if (pending.size > 0) {
    requestAnimationFrame(processChunk); // continue next frame
  }
}

Thử nghiệm: Click các nút để thấy sự khác biệt. Mỗi block màu = 1 underline. Quan sát cách phiên bản chunked xử lý thành từng lô nhỏ trên nhiều frame thay vì tất cả cùng lúc.

Underlines: 1000

Thời gian sync: —

Frame đầu (chunked): —

Frames đã dùng: —

Kết quả: Frame đầu chỉ chặn ~4ms thay vì ~500ms. Người dùng thấy ký tự xuất hiện ngay lập tức. 1000 underline còn lại trải đều qua ~125 frame (~2 giây) — UI vẫn hoàn toàn responsive. Cải thiện latency nhập liệu lên đến 50%.

3

Xử Lý Gợi Ý Async — Buffer & Debounce

Vấn đề: Cập nhật gợi ý là yếu tố gây độ trễ lớn nhất. Mỗi lần gõ kích hoạt xử lý lại toàn bộ gợi ý (~15ms), cũng gây ra cập nhật highlight và DOM.

Insight chính: Người dùng không tương tác với gợi ý khi đang gõ. Họ gõ một đoạn, rồi dừng và xem gợi ý. Vì vậy có thể an toàn trì hoãn toàn bộ xử lý gợi ý cho đến khi dừng gõ.

Giải pháp: Buffer các thay đổi văn bản khi gõ. Chỉ xử lý gợi ý sau khi dừng 300ms. Điều này biến 15ms công việc chặn mỗi lần gõ thành 0ms mỗi lần gõ + một lô 15ms ở cuối.

let buffer = [];
let timer = null;

editor.addEventListener('keydown', () => {
  buffer.push(editor.value);   // just buffer — O(1), no lag
  clearTimeout(timer);
  timer = setTimeout(() => {
    processSuggestions(buffer); // runs ONCE after typing stops
    buffer = [];
  }, 300);
});

Thử nghiệm: Gõ vào ô bên dưới. Quan sát log — thay đổi được buffer khi gõ, rồi xử lý cùng lúc khi bạn dừng.

Thay đổi đã buffer: 0

Gợi ý đã xử lý: 0

Công việc chặn khi gõ: 0ms

Kết quả: Loại bỏ hoàn toàn yếu tố gây độ trễ lớn nhất khỏi keystroke handler. Kết hợp với kỹ thuật 1 và 2, tổng độ trễ nhập liệu giảm ~91%.

✓

Kết Hợp Cả 3 Kỹ Thuật

Đây là keystroke handler đã tối ưu với cả ba kỹ thuật được áp dụng:

Gõ phím Người dùng gõ

→

Ẩn Nút Tức thì (~0ms)

→

Chunk Underlines Budget ~4ms

→

Buffer Revision Push O(1)

→

Paint Ký tự hiện ra!

Sau khi dừng gõ (300-500ms sau):

Kiểm tra Overlap Nút hiện lại

+

Underline còn lại Hoàn tất qua rAF

+

Xử Lý Gợi Ý Batch toàn bộ thay đổi

Thử kết quả cuối: Gõ nhanh trong editor. Đồng hồ đo latency cho thấy mỗi lần gõ chặn main thread bao lâu.

Lần gõ cuối: —

Latency TB: —

Số lần gõ: 0

✓

Điểm Cốt Lõi

Không làm công việc người dùng sẽ không thấy — Khi người dùng đang gõ tích cực, họ không nhìn vị trí nút hay đọc gợi ý. Trì hoãn công việc đó.
Chia long task thành chunk — Dùng time budget + requestAnimationFrame để trải công việc qua nhiều frame. Trình duyệt giữ responsive vì bạn nhường giữa các chunk.
Debounce các thao tác tốn kém — Buffer input và xử lý theo lô sau khi dừng. Điều này biến N lần gọi tốn kém thành 1.
Đo bằng rAF — Dùng performance.now() tại keydown và trong requestAnimationFrame tiếp theo để đo latency thực từ nhập liệu đến paint.
Thắng lợi nhanh tạo đà — Kỹ thuật 1 (ẩn nút) là một thay đổi UX đơn giản mang lại cải thiện đo được ngay trước khi giải quyết các vấn đề khó hơn.