Trang này được dịch bởi Cloud Translation API.

Nghiên cứu điển hình: Cách Google tạo ra trải nghiệm kết nối cho Chế độ AI mới bằng hiệu ứng chuyển đổi khung hiển thị

Jason Michelson

Bramus

Ngày xuất bản: 28 tháng 8 năm 2025

Google Tìm kiếm có phạm vi tiếp cận lớn nhất trên thế giới, do đó, những thay đổi đối với trải nghiệm người dùng có thể ảnh hưởng đến hàng tỷ người dùng. Chúng tôi đã ấp ủ từ lâu về một trải nghiệm web hiện đại và giống như ứng dụng hơn. Khi bắt đầu phát triển Chế độ AI, chúng tôi muốn tạo ra một trải nghiệm liền mạch và kết nối cho người dùng khi chuyển từ chế độ tìm kiếm tiêu chuẩn sang Chế độ AI. Khi biết về các hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu, chúng tôi nhận thấy đây là một sự kết hợp hoàn hảo cho tính năng này. Nghiên cứu điển hình này chia sẻ những điều chúng tôi học được khi thêm tính năng chuyển đổi cùng với việc ra mắt Chế độ AI.

Bản ghi hình một lượt tìm kiếm trên Google Tìm kiếm, chuyển từ kết quả tìm kiếm sang Chế độ AI. Hiệu ứng chuyển đổi đang sử dụng hiệu ứng chuyển đổi khung hiển thị.

Hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu là một bước đột phá về công cụ trình duyệt gốc và chúng tôi rất hào hứng khi thấy hiệu ứng này sẽ định hình web như thế nào trong tương lai.

Browser Support

Source

Thay đổi hiện trạng

Google Tìm kiếm có các yêu cầu nghiêm ngặt và thận trọng về trình duyệt được hỗ trợ. Thông thường, bạn không thể sử dụng một tính năng có phạm vi cung cấp hạn chế. Đối với các hiệu ứng chuyển đổi chế độ xem giữa các tài liệu, chúng tôi nhận thấy rằng polyfill không thể duy trì được, trong đó yếu tố chính cản trở là không có API chụp nhanh pixel và việc sao chép toàn bộ khung hiển thị gặp phải các vấn đề lớn về hiệu suất. Do đó, sử dụng tính năng này như một tính năng nâng cao tăng dần là cách tốt nhất để ra mắt cùng với Chế độ AI. Vì ảnh động do các hiệu ứng chuyển cảnh tạo ra không ảnh hưởng trực tiếp đến chức năng của trang web, nên đối với lưu lượng truy cập không được hỗ trợ, các ảnh động này sẽ chỉ bị vô hiệu hoá. Đây vốn là trạng thái sản xuất hiện tại mà không có ảnh động chuyển cảnh.

Trước tiên, chúng tôi đã thử nghiệm chiến lược cải tiến tăng dần này với người dùng nội bộ. Điều này giúp chúng tôi nhận được ý kiến phản hồi sớm và hầu hết đều rất tích cực. Ý kiến phản hồi nhận được cũng cho thấy các lỗi, bao gồm cả vấn đề về hiệu suất và các tương tác không mong muốn với các tính năng khác, chẳng hạn như các ngữ cảnh xếp chồng bị trùng lặp.

Chúng tôi nhận thấy chiến lược này rất hiệu quả và tôi tin rằng chúng tôi sẽ thử nghiệm chiến lược này với các tính năng mới khác của trình duyệt trong thời gian tới.

Những khó khăn chúng tôi gặp phải và cách giải quyết

Độ trễ, chặn hiển thị và đồng hồ hẹn giờ giám sát

Nhìn chung, độ trễ tăng thêm khi chuyển đổi chế độ xem MPA là không đáng kể đối với 99% trường hợp sử dụng, đặc biệt là trên phần cứng hiện đại. Tuy nhiên, Google Tìm kiếm có yêu cầu rất cao về độ trễ và chúng tôi luôn cố gắng tạo ra trải nghiệm người dùng hoạt động hiệu quả trên mọi thiết bị. Đối với chúng tôi, ngay cả vài mili giây cũng rất quan trọng, vì vậy, chúng tôi phải đầu tư vào cách triển khai đúng cách các hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu mà không làm ảnh hưởng đến trải nghiệm người dùng của bất kỳ ai.

Chặn kết xuất là một kỹ thuật kết hợp tốt với hiệu ứng chuyển đổi khung hiển thị trên nhiều tài liệu. Ảnh chụp nhanh phần tử giả của tài liệu đến chỉ có thể hiển thị nội dung đã được kết xuất. Do đó, để tạo ảnh động cho nội dung từ tài liệu đến, bạn cần kết xuất khối cho đến khi phần tử đích mà bạn muốn tạo ảnh động được kết xuất. Để làm việc này, hãy dùng thuộc tính blocking trên một HTMLLinkElement. Việc chặn hiển thị có những hạn chế vì việc chờ đợi một phần tử ở cuối cây DOM của tài liệu đến có thể ảnh hưởng đáng kể đến độ trễ. Chúng tôi phải cân bằng sự đánh đổi này cho phù hợp và chỉ hiển thị khối trên những phần tử hiển thị cực kỳ sớm trong vòng đời của trang.

<!-- Link tag in the <head> of the incoming document -->
<link blocking="render" href="#target-id" rel="expect">

<!-- Element you want to animate in the <body> of the incoming document -->
<div id="target-id">
  some content
</div>

Trong một số trường hợp, việc xác định chính xác phần tử mà bạn kết xuất khối là chưa đủ. Một số thiết bị hoặc kết nối vẫn sẽ thấy độ trễ tăng lên ngay cả khi chặn hiển thị trên một phần tử gần đầu cây DOM. Để xử lý những trường hợp đó, chúng tôi đã viết một tập lệnh đồng hồ hẹn giờ giám sát để xoá HTMLLinkElement sau một khoảng thời gian nhất định nhằm buộc quá trình kết xuất của tài liệu đến không bị chặn.

Sau đây là một cách đơn giản để thực hiện việc này:

function unblockRendering() {
  const renderBlockingElements = document.querySelectorAll(
    'link[blocking=render]',
  );
  for (const element of renderBlockingElements) {
    element.remove();
  }
}

const timeToUnblockRendering = t - performance.now();

if (timeToUnblockRendering > 0) {
  setTimeout(unblockRendering, timeToUnblockRendering);
} else {
  unblockRendering();
}

Giới hạn về phạm vi bảo hiểm

Một vấn đề khác mà chúng tôi gặp phải là quy tắc @ navigation: auto chuyển đổi chế độ xem trên nhiều tài liệu xảy ra ở cấp độ chung trong tài liệu. Không có cách nào tích hợp để giới hạn việc bật hiệu ứng chuyển đổi chế độ xem giữa các tài liệu chỉ cho các mục tiêu nhấp cụ thể. Vì đây là một thay đổi lớn, nên chúng tôi không thể bật hiệu ứng chuyển đổi chế độ xem giữa các tài liệu cho 100% các thao tác điều hướng trên Google Tìm kiếm. Chúng tôi cần một cách để bật hoặc tắt linh hoạt hiệu ứng chuyển đổi khung hiển thị giữa các tài liệu, tuỳ thuộc vào tính năng mà người dùng đang tương tác. Trong trường hợp này, chúng ta chỉ bật các chế độ này cho những thay đổi về chế độ đến và đi từ Chế độ AI. Chúng tôi đã thực hiện việc này bằng cách cập nhật quy tắc điều hướng @ theo cách lập trình, tuỳ thuộc vào mục tiêu được nhấp hoặc nhấn.

Sau đây là cách bật/tắt quy tắc @ cho hiệu ứng chuyển đổi khung hiển thị:

let viewTransitionAtRule: HTMLElement | undefined;
const DISABLED_VIEW_TRANSITION = '@view-transition{navigation:none;}';
const ENABLED_VIEW_TRANSITION = '@view-transition{navigation:auto;}';

function getVtAtRule(): HTMLElement {
  if (!viewTransitionAtRule) {
    viewTransitionAtRule = document.createElement('style');
    document.head.append(viewTransitionAtRule);
  }
  return viewTransitionAtRule;
}

function disableVt() {
  getVtAtRule().textContent = DISABLED_VIEW_TRANSITION;
}

function enableVt() {
  getVtAtRule().textContent = ENABLED_VIEW_TRANSITION;
}

Ảnh động bị giật và ảnh động được ghép

Một số ảnh động được tạo tự động trên các phần tử giả chuyển đổi khung hiển thị gây ra tình trạng giảm khung hình trên các thiết bị cũ, làm ảnh hưởng đến trải nghiệm liền mạch và mượt mà mà chúng tôi muốn mang đến cho người dùng. Để cải thiện hiệu suất của ảnh động, chúng tôi đã viết lại ảnh động bằng các kỹ thuật ảnh động có thể chạy trên trình kết hợp. Chúng tôi có thể làm như vậy bằng cách kiểm tra các khung hình chính để lấy kích thước của các phần tử giả trước và sau ảnh chụp nhanh, đồng thời sử dụng phép toán ma trận để viết lại các khung hình chính cho phù hợp. Ví dụ sau đây minh hoạ cách lấy ảnh động cho từng phần tử giả chuyển đổi khung hiển thị:

const pseudoElement = `::view-transition-group(${name})`;
const animation = document
  .getAnimations()
  .find(
    (animation) =>
      (animation.effect as KeyframeEffect)?.pseudoElement === pseudoElement,
  );

Đọc thêm về cách viết các khung hình chính hiệu quả cho hiệu ứng chuyển đổi khung hiển thị trong bài viết Đã áp dụng hiệu ứng chuyển đổi khung hiển thị: Xử lý khối chứa ảnh chụp nhanh.

Những điều khác cần chú ý

Một trong những vấn đề nổi bật hơn là việc gắn thẻ các phần tử bằng thuộc tính CSS view-transition-name sẽ ảnh hưởng đến ngữ cảnh xếp chồng (Quy cách chuyển đổi khung hiển thị: Phần 2.1.1). Đây là nguồn gốc của nhiều lỗi yêu cầu phải sửa đổi z-index của các phần tử vùng chứa.

Một điều khác cần lưu ý là bạn không nên thêm các giá trị view-transition-name vào các phần tử theo mặc định. Có rất nhiều người đang làm việc trên Google Tìm kiếm. Để ngăn các giá trị view-transition-name mà nhóm của chúng tôi đặt trên các phần tử xung đột với các giá trị mà người dùng từ các nhóm khác có thể sử dụng, chúng tôi đã sử dụng các loại chuyển đổi khung hiển thị để chỉ thêm có điều kiện thuộc tính view-transition-name khi một loại chuyển đổi khung hiển thị cụ thể đang hoạt động.

Ví dụ về CSS để thêm view-transition-name của the-element vào một phần tử chỉ khi loại chuyển đổi khung hiển thị của ai-mode đang hoạt động:

html:active-view-transition-type(ai-mode) {
  #target {
    view-transition-name: the-element;
  }
}

Sau khi thiết lập các quy tắc CSS này cho tất cả các hiệu ứng chuyển đổi khung hiển thị, bạn có thể thay đổi linh hoạt loại hiệu ứng chuyển đổi khung hiển thị hiện tại cho mọi thao tác điều hướng trong các sự kiện pageswap và pagereveal.

Ví dụ về cách cập nhật loại chuyển đổi khung hiển thị thành ai-mode trong sự kiện pageswap.

function updateViewTransitionTypes(
  event: ViewTransitionEvent,
  types: string[],
): void {
  event.viewTransition.types.clear();
  for (const type of types) {
    event.viewTransition.types.add(type);
  }
}

window.addEventListener(
  'pageswap',
  (e) => {
    updateViewTransitionTypes(
      e as ViewTransitionEvent,
      ['ai-mode'],
    );
  }
);

Bằng cách này, chúng ta có thể ngăn chặn xung đột tên và không cần thiết phải chụp nhanh các phần tử không cần chụp nhanh trong quá trình chuyển đổi qua lại giữa Chế độ AI.

Cuối cùng, mọi vấn đề về ngữ cảnh xếp chồng sẽ chỉ xuất hiện trong quá trình chuyển đổi chế độ xem. Để giải quyết những vấn đề đó, sau đó, chúng ta có thể nhắm đến chỉ mục z của các phần tử giả được tạo, thay vì tuỳ ý sửa đổi chỉ mục z của các phần tử ban đầu chỉ để giải quyết vấn đề này khi sử dụng hiệu ứng chuyển đổi chế độ xem.

::view-transition-group(the-element) {
  z-index: 100;
}

Bước tiếp theo

Chúng tôi có kế hoạch sử dụng hiệu ứng chuyển đổi chế độ xem trên nhiều tài liệu cho Google Tìm kiếm, bao gồm cả việc tích hợp với Navigation API sau khi API này có trên nhiều trình duyệt. Hãy theo dõi để xem chúng tôi sẽ xây dựng những gì tiếp theo!