Tối ưu hoá độ trễ khi nhập

Tìm hiểu về độ trễ khi nhập thông tin và các kỹ thuật để giảm độ trễ này nhằm tăng tốc độ tương tác.

Jeremy Wagner

Các lượt tương tác trên web là những hoạt động phức tạp, với đủ loại hoạt động diễn ra trong trình duyệt để thúc đẩy các lượt tương tác này. Tuy nhiên, điểm chung của các lượt tương tác này là chúng đều gây ra một số độ trễ khi nhập thông tin trước khi lệnh gọi lại sự kiện bắt đầu chạy. Trong hướng dẫn này, bạn sẽ tìm hiểu về độ trễ khi nhập thông tin và những việc bạn có thể làm để giảm thiểu độ trễ này nhằm giúp các lượt tương tác trên trang web của bạn chạy nhanh hơn.

Độ trễ khi nhập thông tin là gì?

Độ trễ khi nhập thông tin là khoảng thời gian bắt đầu từ khi người dùng tương tác lần đầu với một trang (chẳng hạn như nhấn vào màn hình, nhấp bằng chuột hoặc nhấn một phím) cho đến khi lệnh gọi lại sự kiện cho lượt tương tác đó bắt đầu chạy. Mỗi lượt tương tác đều bắt đầu với một khoảng độ trễ khi nhập thông tin.

Hình ảnh trực quan đơn giản hoá về độ trễ khi nhập. Ở bên trái, có hình vẽ đường nét của con trỏ chuột có một tia sáng phía sau, biểu thị sự bắt đầu của một lượt tương tác. Ở bên phải là hình vẽ đường nét của một bánh răng, biểu thị thời điểm các trình xử lý sự kiện cho một lượt tương tác bắt đầu chạy. Khoảng trống ở giữa được ghi nhận là độ trễ đầu vào bằng dấu ngoặc nhọn.
Cơ chế đằng sau độ trễ khi nhập thông tin. Khi hệ điều hành nhận được một thông tin đầu vào, thông tin đó phải được chuyển đến trình duyệt trước khi lượt tương tác bắt đầu. Quá trình này mất một khoảng thời gian nhất định và có thể tăng lên do công việc hiện có của luồng chính.

Bạn không thể tránh khỏi một phần độ trễ khi nhập thông tin: hệ điều hành luôn mất một khoảng thời gian nhất định để nhận dạng một sự kiện đầu vào và chuyển sự kiện đó đến trình duyệt. Tuy nhiên, phần độ trễ khi nhập thông tin đó thường không đáng chú ý và có những hoạt động khác xảy ra trên chính trang đó có thể khiến độ trễ khi nhập thông tin đủ lâu để gây ra vấn đề.

Cách suy nghĩ về độ trễ khi nhập thông tin

Nói chung, bạn nên rút ngắn mọi phần của lượt tương tác càng nhiều càng tốt để trang web của bạn có cơ hội tốt nhất để đáp ứng ngưỡng "tốt" của chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP), bất kể thiết bị của người dùng. Kiểm soát độ trễ khi nhập thông tin chỉ là một phần của việc đáp ứng ngưỡng đó.

Do đó, bạn nên cố gắng đạt được độ trễ khi nhập thông tin ngắn nhất có thể để đáp ứng ngưỡng "tốt" của INP. Tuy nhiên, bạn cần lưu ý rằng bạn không thể loại bỏ hoàn toàn độ trễ khi nhập thông tin. Miễn là bạn tránh được công việc quá mức của luồng chính trong khi người dùng đang cố gắng tương tác với trang của bạn, thì độ trễ khi nhập thông tin sẽ đủ thấp để tránh các vấn đề.

Cách giảm thiểu độ trễ khi nhập thông tin

Như đã nói trước đó, bạn không thể tránh khỏi một số độ trễ khi nhập thông tin, nhưng mặt khác, bạn có thể tránh được một số độ trễ khi nhập thông tin. Dưới đây là một số điều cần cân nhắc nếu bạn đang gặp phải tình trạng độ trễ khi nhập thông tin kéo dài.

Tránh các bộ hẹn giờ lặp lại gây ra công việc quá mức của luồng chính

Có 2 hàm hẹn giờ thường được dùng trong JavaScript có thể góp phần gây ra độ trễ khi nhập thông tin: setTimeout và setInterval. Sự khác biệt giữa 2 hàm này là setTimeout lên lịch cho một lệnh gọi lại để chạy sau một khoảng thời gian được chỉ định. setInterval, mặt khác, lên lịch cho một lệnh gọi lại để chạy vĩnh viễn sau mỗi n mili giây hoặc cho đến khi bộ hẹn giờ dừng bằng clearInterval.

setTimeout không có vấn đề gì – trên thực tế, hàm này có thể hữu ích trong việc tránh các tác vụ dài. Tuy nhiên, điều này phụ thuộc vào thời điểm xảy ra thời gian chờ và việc người dùng có cố gắng tương tác với trang khi lệnh gọi lại thời gian chờ chạy hay không.

Ngoài ra, setTimeout có thể chạy trong một vòng lặp hoặc đệ quy, trong đó hàm này hoạt động giống như setInterval, mặc dù tốt nhất là không lên lịch cho lần lặp tiếp theo cho đến khi lần lặp trước đó hoàn tất. Mặc dù điều này có nghĩa là vòng lặp sẽ nhường cho luồng chính mỗi khi setTimeout được gọi, nhưng bạn nên cẩn thận để đảm bảo rằng lệnh gọi lại của vòng lặp không thực hiện quá nhiều công việc.

setInterval chạy một lệnh gọi lại theo một khoảng thời gian và do đó, có nhiều khả năng cản trở các lượt tương tác. Điều này là do – không giống như một thực thể duy nhất của lệnh gọi setTimeout, đây là một lệnh gọi lại một lần có thể cản trở lượt tương tác của người dùng – bản chất lặp lại của setInterval khiến hàm này có nhiều khả năng sẽ cản trở một lượt tương tác, do đó làm tăng độ trễ khi nhập thông tin của lượt tương tác đó.

Ảnh chụp màn hình của trình phân tích hiệu suất trong Công cụ của Chrome cho nhà phát triển minh hoạ độ trễ đầu vào. Một tác vụ do hàm hẹn giờ kích hoạt sẽ xảy ra ngay trước khi người dùng bắt đầu một lượt tương tác nhấp. Tuy nhiên, bộ tính giờ sẽ kéo dài độ trễ đầu vào, khiến các lệnh gọi lại sự kiện của hoạt động tương tác chạy muộn hơn so với bình thường.
Một bộ hẹn giờ được đăng ký bằng lệnh gọi setInterval trước đó góp phần gây ra độ trễ khi nhập thông tin như được mô tả trong bảng điều khiển hiệu suất của Chrome DevTools. Độ trễ khi nhập thông tin được thêm vào khiến lệnh gọi lại sự kiện cho lượt tương tác chạy muộn hơn so với bình thường.

Nếu bộ hẹn giờ xuất hiện trong mã của bên thứ nhất, thì bạn có quyền kiểm soát các bộ hẹn giờ đó. Hãy đánh giá xem bạn có cần các bộ hẹn giờ đó hay không hoặc cố gắng giảm thiểu công việc trong các bộ hẹn giờ đó càng nhiều càng tốt. Tuy nhiên, bộ hẹn giờ trong tập lệnh của bên thứ ba là một câu chuyện khác. Bạn thường không có quyền kiểm soát những gì tập lệnh của bên thứ ba thực hiện và việc khắc phục các vấn đề về hiệu suất trong mã của bên thứ ba thường liên quan đến việc làm việc với các bên liên quan để xác định xem một tập lệnh nhất định của bên thứ ba có cần thiết hay không. Nếu có, hãy liên hệ với nhà cung cấp tập lệnh của bên thứ ba để xác định những việc có thể làm để khắc phục các vấn đề về hiệu suất mà họ có thể gây ra trên trang web của bạn.

Tránh các tác vụ dài

Một cách để giảm thiểu độ trễ khi nhập thông tin kéo dài là tránh các tác vụ dài. Khi bạn có công việc quá mức của luồng chính chặn luồng chính trong các lượt tương tác, điều đó sẽ làm tăng độ trễ khi nhập thông tin cho các lượt tương tác đó trước khi các tác vụ dài có cơ hội hoàn tất.

Hình ảnh minh hoạ khoảng thời gian các tác vụ kéo dài độ trễ đầu vào. Ở trên cùng, một lượt tương tác xảy ra ngay sau khi một tác vụ cần nhiều thời gian chạy, gây ra độ trễ đầu vào đáng kể khiến các lệnh gọi lại sự kiện chạy muộn hơn nhiều so với thời điểm chúng nên chạy. Ở dưới cùng, một lượt tương tác xảy ra gần như cùng lúc, nhưng tác vụ cần nhiều thời gian được chia thành nhiều tác vụ nhỏ hơn bằng cách tạo ra, cho phép các lệnh gọi lại sự kiện của lượt tương tác chạy sớm hơn nhiều.
Hình ảnh trực quan về những gì xảy ra với các lượt tương tác khi các tác vụ quá dài và trình trình duyệt không thể phản hồi đủ nhanh với các lượt tương tác, so với khi các tác vụ dài hơn được chia thành các tác vụ nhỏ hơn.

Ngoài việc giảm thiểu lượng công việc bạn thực hiện trong một tác vụ (và bạn phải luôn cố gắng thực hiện càng ít công việc càng tốt trên luồng chính), bạn có thể cải thiện khả năng phản hồi đối với hoạt động đầu vào của người dùng bằng cách chia các tác vụ dài.

Lưu ý đến sự chồng chéo của lượt tương tác

Một phần đặc biệt khó khăn trong việc tối ưu hoá INP có thể là nếu bạn có các lượt tương tác chồng chéo. Sự chồng chéo của lượt tương tác có nghĩa là sau khi tương tác với một phần tử, bạn thực hiện một lượt tương tác khác với trang trước khi lượt tương tác ban đầu có cơ hội hiển thị khung hình tiếp theo.

Hình ảnh minh hoạ thời điểm các tác vụ có thể chồng chéo để tạo ra độ trễ đầu vào dài. Trong hình minh hoạ này, một lượt tương tác nhấp chuột trùng với một lượt tương tác keydown để tăng độ trễ đầu vào cho lượt tương tác keydown.
Hình ảnh trực quan về 2 lượt tương tác đồng thời trong trình phân tích hiệu suất trong DevTools của Chrome. Công việc hiển thị trong lượt tương tác nhấp ban đầu gây ra độ trễ khi nhập thông tin cho lượt tương tác bằng bàn phím tiếp theo.

Nguồn gây ra sự chồng chéo của lượt tương tác có thể đơn giản là do người dùng thực hiện nhiều lượt tương tác trong một khoảng thời gian ngắn. Điều này có thể xảy ra khi người dùng nhập vào các trường biểu mẫu, trong đó nhiều lượt tương tác bằng bàn phím có thể xảy ra trong một khoảng thời gian rất ngắn. Nếu công việc trên một sự kiện quan trọng đặc biệt tốn kém (chẳng hạn như trong trường hợp phổ biến của các trường tự động hoàn thành, trong đó các yêu cầu mạng được gửi đến phần phụ trợ), bạn có một vài lựa chọn:

  • Cân nhắc việc loại bỏ các thông tin đầu vào trùng lặp để giới hạn số lần thực thi lệnh gọi lại sự kiện trong một khoảng thời gian nhất định.
  • Sử dụng AbortController để huỷ các yêu cầu fetch gửi đi để luồng chính không bị tắc nghẽn khi xử lý các lệnh gọi lại fetch. Lưu ý: thuộc tính signal của thực thể AbortController cũng có thể được dùng để huỷ các sự kiện.

Một nguồn khác làm tăng độ trễ khi nhập thông tin do các lượt tương tác chồng chéo có thể là các hiệu ứng chuyển động tốn kém. Cụ thể, các hiệu ứng chuyển động trong JavaScript có thể kích hoạt nhiều lệnh gọi requestAnimationFrame, có thể cản trở các lượt tương tác của người dùng. Để khắc phục vấn đề này, hãy sử dụng hiệu ứng chuyển động CSS bất cứ khi nào có thể để tránh xếp hàng các khung hình hiệu ứng chuyển động có khả năng tốn kém – nhưng nếu bạn làm như vậy, hãy đảm bảo rằng bạn tránh các hiệu ứng chuyển động không tổng hợp để các hiệu ứng chuyển động chạy chủ yếu trên GPU và các luồng tổng hợp, chứ không phải trên luồng chính.

Kết luận

Mặc dù độ trễ khi nhập thông tin có thể không chiếm phần lớn thời gian chạy các lượt tương tác, nhưng điều quan trọng là bạn cần hiểu rằng mọi phần của lượt tương tác đều chiếm một khoảng thời gian mà bạn có thể giảm. Nếu bạn nhận thấy độ trễ khi nhập thông tin kéo dài, thì bạn có cơ hội giảm độ trễ này. Việc tránh các lệnh gọi lại bộ hẹn giờ lặp lại, chia các tác vụ dài và lưu ý đến sự chồng chéo tiềm ẩn của lượt tương tác đều có thể giúp bạn giảm độ trễ khi nhập thông tin, giúp người dùng trang web của bạn tương tác nhanh hơn.

Hình ảnh chính từ Unsplash, của Erik Mclean.