Bản dùng thử theo nguyên gốc cuối cùng của tính năng Điều hướng mềm bắt đầu từ Chrome 147

Barry Pollard
Michal Mocny

Ngày xuất bản: 20 tháng 4 năm 2026

Chrome dự định phát hành API Điều hướng mềm mà chúng tôi đã thử nghiệm trước đó vào cuối năm nay. Để chuẩn bị cho việc đó, chúng tôi sẽ cung cấp thêm một bản dùng thử theo nguyên gốc bắt đầu từ Chrome 147 cho đến Chrome 149. Bản dùng thử này kết hợp ý kiến phản hồi từ các bản dùng thử trước đó vào hình dạng cuối cùng dự kiến của API. Chúng tôi khuyến khích chủ sở hữu trang web quan tâm đến tính năng này tiến hành kiểm thử lần cuối hình dạng cuối cùng dự kiến của API trước khi phát hành.

Điều hướng mềm là gì?

"Điều hướng mềm" là khi JavaScript chặn một thao tác điều hướng (ví dụ: nhấp vào một đường liên kết) và cập nhật nội dung trên trang hiện có thay vì tải một trang mới, trong khi URL vẫn được cập nhật trong thanh địa chỉ. Đối với người dùng, các thao tác này xuất hiện giống như thao tác điều hướng thông thường, nhưng theo quan điểm của trình duyệt, trang này vẫn là trang gốc.

Sự cần thiết của API Điều hướng mềm

API Điều hướng mềm là một API được đề xuất để phát hiện các thao tác điều hướng mềm mà các trang Ứng dụng một trang (SPA) sử dụng. Vì không có thao tác điều hướng trang thực tế nào xảy ra đối với thao tác điều hướng mềm, nên JavaScript phải tự quản lý một số thao tác thường xảy ra đối với thao tác điều hướng. Một số thao tác, chẳng hạn như quản lý nhật ký điều hướng, có thể thực hiện được bằng các API hiện tại. Tuy nhiên, các thao tác khác, chẳng hạn như đo lường Core Web Vitals, không thể thực hiện được đối với các thao tác điều hướng này.

API Điều hướng mềm cho phép quan sát các thao tác điều hướng mềm. Mặc dù JavaScript khởi tạo thao tác điều hướng mềm (thường là một khung JavaScript) biết khi nào xảy ra thao tác điều hướng, nhưng JavaScript khác do trang web sử dụng (ví dụ: tập lệnh phân tích) và chính trình duyệt sẽ không biết.

Core Web Vitals và SPA

Một trong những yếu tố chính thúc đẩy API Điều hướng mềm là cho phép đo lường Core Web Vitals cho ứng dụng trang đơn (SPA). Core Web Vitals được đo lường bởi cả trình duyệt (để xuất hiện trong các công cụ như Báo cáo trải nghiệm người dùng trên Chrome) và bởi chủ sở hữu trang web bằng cách sử dụng các giải pháp Giám sát người dùng thực (RUM).

Khung JavaScript có thể đo lường một số khía cạnh của Core Web Vitals cho SPA. Cụ thể, Lượt tương tác đến nội dung hiển thị tiếp theo (INP) và Mức thay đổi bố cục tích luỹ (CLS) dựa trên các thành phần cơ bản (API Thời gian sự kiện và API Độ ổn định bố cục tương ứng) có thể được đo lường trên bất kỳ khoảng thời gian nào để tính toán các chỉ số đó. Tuy nhiên, các chỉ số khác như Nội dung lớn nhất hiển thị (LCP) chỉ được trình duyệt phát ra – dựa trên các thao tác điều hướng trang và được hoàn tất khi tương tác.

Cách API cho phép đo lường Core Web Vitals cho SPA

API Điều hướng mềm giới thiệu 2 mục hiệu suất mới:

Bạn có thể quan sát các mục mới này bằng PerformanceObserver bằng cách sử dụng các loại soft-navigation và interaction-contentful-paint tương ứng.

API cũng mở rộng từng mục hiệu suất largest-contentful-paint, interaction-contentful-paint, event-timing và layout-shift (cùng các mục khác) để bao gồm một giá trị nhận dạng, navigationId, đại diện cho thao tác điều hướng mà mục đó dành cho. Vì PerformanceObserver không quan sát các mục hiệu suất cho đến khi trang ở trạng thái rảnh, nên có thể mất một khoảng thời gian giữa sự kiện tạo mục hiệu suất và lượt quan sát của bạn. Điều này đặc biệt đúng khi trang rất bận, ví dụ: trong các thao tác điều hướng mềm. Giá trị navigationId này giúp phân bổ các mục cho thao tác điều hướng chính xác.

Một số mục interaction-contentful-paint có thể xảy ra trước thao tác điều hướng và một số mục sau thao tác điều hướng. Thay vì phải theo dõi tất cả các nội dung hiển thị có thể dẫn đến thao tác điều hướng mềm, mục soft-navigation bao gồm một mục largestInteractionContentfulPaint là nội dung hiển thị lớn nhất được thấy cho đến thời điểm này.

Cùng nhau, các mục này cho phép đo lường Core Web Vitals cho:

  • LCP: Sử dụng largest-contentful-paint cho lần tải trang ban đầu và các mục interaction-contentful-paint và soft-navigation mới cho các thao tác điều hướng mềm.
  • CLS: Sử dụng các mục layout-shift và phân chia các mục đó dựa trên các mục soft-navigation cho các thao tác điều hướng mềm.
  • INP: Sử dụng các mục event và phân chia các mục đó dựa trên các mục soft-navigation cho các thao tác điều hướng mềm.
  • FCP: Sử dụng first-contentful-paint cho lần tải trang ban đầu và thông tin chi tiết về thời gian hiển thị trên các mục soft-navigation mới cho các thao tác điều hướng mềm.

Để biết thêm thông tin, hãy xem tài liệu về Điều hướng mềm.

Các thao tác điều hướng mềm được kích hoạt như thế nào?

API Điều hướng mềm kích hoạt thao tác điều hướng mềm khi xảy ra những điều sau:

  • Xảy ra lượt tương tác của người dùng,
  • … dẫn đến nội dung hiển thị có thể nhìn thấy đối với người dùng,
  • … và xảy ra quá trình cập nhật URL.

API sử dụng phương pháp này thay vì cho phép khung JavaScript "phát ra" thao tác điều hướng mềm hoặc xây dựng dựa trên API Điều hướng vì 2 lý do:

  1. Thứ nhất, phương pháp này bao gồm tất cả các trang web SPA hiện có mà không cần thay đổi gì đối với các trang web đó.
  2. Thứ hai, phương pháp này cho phép hiểu một cách nhất quán về những gì tạo nên thao tác điều hướng mềm, bất kể khung hoặc nhà phát triển xử lý các thao tác điều hướng như thế nào.

Khung hoặc nhà phát triển có thể cập nhật URL cho thao tác điều hướng mềm ngay cả khi không có lượt tương tác của người dùng hoặc bản cập nhật DOM mà người dùng coi là thao tác điều hướng. Họ cũng có thể cập nhật URL vào những thời điểm khác nhau: khi bắt đầu lượt tương tác, chỉ khi kết thúc khi hoàn tất hoặc ở bất kỳ trạng thái nào ở giữa.

Thay vì dựa vào lựa chọn của khung và nhà phát triển, việc tích hợp tính năng phát hiện thao tác điều hướng mềm vào trình duyệt sẽ thiết lập một định nghĩa chính tắc cho phép đo lường Core Web Vitals cho các thao tác điều hướng mềm ở quy mô lớn và giúp các phép đo này có thể so sánh được ở quy mô lớn.

Khung và nhà phát triển cũng có thể bỏ qua API Điều hướng mềm và sử dụng API Thời gian sự kiện, API Độ ổn định bố cục cơ bản và mục hiệu suất InteractionContentfulPaint mới để đo lường các chỉ số hiệu suất bổ sung theo lựa chọn của họ. Tuy nhiên, bạn nên sử dụng API để đo lường Core Web Vitals nhằm cho phép đo lường nhất quán trên các trang web và trên các công cụ.

Cần trợ giúp để kiểm thử API Điều hướng mềm

Chúng tôi cần bạn giúp kiểm thử API Điều hướng mềm và xác định xem API này có khớp chính xác với kỳ vọng của bạn về thời điểm xảy ra thao tác điều hướng mềm hay không. API có báo cáo không thành công các thao tác điều hướng mềm khi bạn cho rằng các thao tác đó đã xảy ra không? Ngược lại, API có báo cáo quá mức các thao tác điều hướng mà bạn không coi là thao tác điều hướng không?

Những thay đổi kể từ bản dùng thử theo nguyên gốc gần đây nhất

Thay đổi chính trong lần lặp lại mới nhất này là tách InteractionContentfulPaint khỏi các thao tác điều hướng mềm để cho phép các trường hợp sử dụng khác cho mục hiệu suất đó và thuộc tính largestInteractionContentfulPaint bổ sung cho SoftNavigationEntry.

Theo quan điểm của trang web, API hiện cũng bao gồm replaceState dưới dạng các thao tác điều hướng mềm vì chúng tôi đã nghe ý kiến phản hồi của bạn rằng điều này rất quan trọng để xem xét như một thao tác điều hướng trong nhiều trường hợp. Chúng tôi rất mong được biết về bất kỳ trường hợp nào khác mà API không nhận ra thao tác điều hướng mềm.

Chúng tôi cũng đã thực hiện vô số cải tiến khác đối với việc triển khai. Đối với những người muốn biết chính xác những thay đổi trong lần lặp lại mới nhất, bạn có thể tìm thấy nhật ký chi tiết về tất cả các thay đổi trong Nhật ký thay đổi về điều hướng mềm.

Chúng tôi muốn API hữu ích nhất có thể và sẵn sàng thực hiện thêm các thay đổi để đạt được điều đó. Việc triển khai các thay đổi đối với API sẽ dễ dàng hơn nhiều trước khi API ra mắt và các trang web bắt đầu phụ thuộc vào một cách triển khai. Do đó, chúng tôi yêu cầu các nhà phát triển ứng dụng trang đơn (SPA) và những người quan tâm đến việc đo lường hiệu suất web cho các trang web này kiểm thử API này và đưa ra ý kiến phản hồi về API.

Cách kiểm thử

Bạn có thể kiểm thử API cục bộ bằng các cờ Chrome hoặc tuỳ chọn dòng lệnh. Ngoài ra, bạn có thể kiểm thử API này trong thực tế bằng bản dùng thử theo nguyên gốc (tìm hiểu thêm về bản dùng thử theo nguyên gốc).

Hãy xem tài liệu của chúng tôi hoặc kho lưu trữ GitHub để biết thêm thông tin kỹ thuật về API, đặc biệt là cách đo lường Core Web Vitals.

Ngoài ra, phiên bản điều hướng mềm thử nghiệm của thư viện web-vitals có trên GitHub và npm.

Để kiểm thử đơn giản hơn, bảng điều khiển Hiệu suất của Chrome DevTools sẽ hiển thị thao tác điều hướng mềm trong dấu vết Hiệu suất kể từ Chrome 145, ngay cả khi bạn không bật tính năng này:

Một điểm đánh dấu điều hướng mềm trong bảng điều khiển Hiệu suất có dấu vết từ youtube.com.

Phản hồi

Bạn nên nêu ý kiến phản hồi về API dưới dạng vấn đề trên GitHub và báo cáo lỗi về cách triển khai Chromium trên trình theo dõi lỗi của Chrome. Nếu bạn không chắc chắn ý kiến phản hồi thuộc danh mục nào, đừng lo lắng quá. Chúng tôi muốn nhận ý kiến phản hồi ở một trong hai nơi và sẽ phân loại các vấn đề ở cả hai nơi rồi chuyển hướng đến vị trí chính xác.