Xuất bản: Ngày 1 tháng 5 năm 2026
Chrome sẽ ra mắt một bản dùng thử theo nguyên gốc từ Chrome 148 cho Container Timing performance API.
Các chỉ số như Nội dung lớn nhất hiển thị (LCP) cung cấp thông tin tổng quan cấp cao về thời điểm người dùng có thể coi một trang là "đã tải" bằng cách xem xét thời gian hiển thị của phần nội dung lớn nhất. Tuy nhiên, các trang web cũng có thể quan tâm đến thời điểm tải các phần cụ thể của trang, chứ không chỉ phần "lớn nhất".
Thời gian hiển thị phần tử cho phép các trang web đánh dấu các phần tử bằng thuộc tính elementtiming để biết thời điểm các phần tử đó tải, cho dù đó có phải là phần tử LCP hay không. Tuy nhiên, giống như LCP, chỉ số này chỉ đo lường thời gian hiển thị của từng phần tử.
Container Timing mở rộng khái niệm Element Timing để đo lường "các khối nội dung" (hoặc "các vùng chứa"). Điều này giúp bạn biết được thời điểm toàn bộ thành phần có sẵn cho người dùng, chẳng hạn như tiện ích, thẻ, phần nội dung, thanh bên... bất cứ thành phần nào! Công cụ này cung cấp thêm thông tin về hiệu suất cho những trang web muốn có thêm thông tin chi tiết.
Container Timing (Thời gian của vùng chứa) do Bloomberg phát triển và Igalia triển khai trong Chrome, được cung cấp dưới dạng một cờ cho người dùng Chrome và các trình duyệt khác dựa trên Chromium. Các trang web cũng có thể dùng tính năng này để thử nghiệm tại hiện trường thông qua một bản dùng thử theo nguồn gốc.
Bản dùng thử theo nguyên gốc là một trong những bước cuối cùng để phát hành một API. Trong đó, các nhà phát triển có thể bật tính năng này trên trang web của họ trước khi tính năng được phát hành theo mặc định để kiểm thử và thông báo cho nhóm biết liệu tính năng này có hoạt động như mong đợi và hữu ích hay không. Việc này cũng cho phép nhà phát triển đề xuất mọi thay đổi đối với thiết kế API trước khi ra mắt.
Cách hoạt động của Container Timing API
Tương tự như Element Timing, Container Timing hoạt động bằng cách thêm một thuộc tính (containertiming) vào nhiều phần tử HTML để cho trình duyệt biết rằng các phần tử này cần được đo lường:
<div containertiming="my-component">
<h2>Title</h2>
<div>...</div>
</div>
Sau đó, PerformanceObserver cho phép bạn quan sát các hoạt động kết xuất trong vùng chứa đó theo cách tương tự như các chỉ số hiệu suất khác:
<script>
const observer = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log("Container painted:", entry.identifier);
console.log("First render:", entry.firstRenderTime);
console.log("Latest paint:", entry.startTime);
console.log("Painted area:", entry.size);
console.log("Last painted element:", entry.lastPaintedElement);
}
});
observer.observe({ type: "container", buffered: true });
</script>
Khi các phần tử mới được vẽ trong vùng chứa, các mục nhập hiệu suất mới sẽ được phát ra cùng với thông tin cập nhật. Vì các phần tử mới có thể được thêm trong suốt thời gian tồn tại của trang, nên không có một điểm hoàn thành duy nhất. Điều này tương tự như LCP, thường được đo ở cuối trang, khi người dùng rời đi.
Sau đó, bạn có thể gửi các chỉ số hiệu suất này trở lại số liệu phân tích để theo dõi và phân tích.
Bạn cũng có thể bỏ qua các vùng chứa con bằng thuộc tính containertiming-ignore:
<div containertiming="main-content">
<main>...</main>
<!-- This aside and its children will be ignored -->
<aside containertiming-ignore>...</aside>
</div>
Bản minh hoạ
CodePen sau đây minh hoạ API Thời gian của vùng chứa đang hoạt động:
Bạn cũng có thể xem cách hoạt động của tính năng này trong video sau đây nếu trình duyệt của bạn không hỗ trợ Container Timing API:
Những bản cập nhật nào được tính cho Thời gian tải vùng chứa?
Mục đích của Container Timing là ghi lại thời điểm vùng chứa được tải cùng với tất cả các phần tử con. Mục tiêu của chỉ số này không phải là đo lường từng lần hiển thị trong tương lai, vì nhiều lần hiển thị có thể xuất hiện muộn hơn nhiều khi người dùng tương tác với vùng chứa hoặc trang. Vì lý do này, tương tự như LCP và Element Timing, Container Timing phụ thuộc vào "contentful paints" và cũng không phát ra các mục nhập paint mới cho những phần tử đã được tính là có contentful paint.
Ví dụ: nếu một vùng chứa ban đầu chỉ hiển thị màu nền hoặc chỉ chứa các phần tử không có nội dung (ví dụ: màn hình hiển thị cấu trúc), thì sẽ không có mục container nào được phát cho đến khi một số nội dung được thêm vào vùng chứa.
Ví dụ về nội dung cập nhật: việc cập nhật văn bản trên một phần tử hiện có trong vùng chứa sẽ không tạo ra một mục container mới cho nội dung cập nhật đó vì chỉ có lần hiển thị đầu tiên của nội dung cho một phần tử mới được xem xét. Tuy nhiên, nếu văn bản được thêm vào một phần tử trống hoặc một phần tử mới khác được thêm vào văn bản đó, thì một mục container mới sẽ được phát ra vì đây sẽ là lần hiển thị đầu tiên của phần tử đó.
Hỗ trợ tính năng phát hiện thời gian của vùng chứa
Thuộc tính containertiming sẽ không gây ra vấn đề cho các trình duyệt không hỗ trợ, nên không cần phát hiện tính năng.
PerformanceObserver sẽ bỏ qua mọi mục nhập mới, nhưng chúng có thể gây ra cảnh báo trong Công cụ cho nhà phát triển. Vì vậy, bạn nên phát hiện tính năng trước khi thêm một đối tượng theo dõi bằng mã như:
if (typeof PerformanceContainerTiming !== "undefined") {
// Container Timing is supported
}
Các phương pháp hay nhất
Bạn nên làm theo một số phương pháp hay nhất để sử dụng tính năng Thời gian tải vùng chứa một cách tối ưu:
- Đặt thuộc tính sớm: Thêm thuộc tính
containertimingvào tài liệu HTML hoặc trước khi phần tử được thêm vào tài liệu để theo dõi đầy đủ. Việc thêm thuộc tính sau đó bằng JavaScript có thể dẫn đến việc bỏ lỡ các lần kết xuất. - Sử dụng giá trị nhận dạng có ý nghĩa: Chọn tên mô tả cho thuộc tính
containertimingđể giúp việc phân tích trở nên dễ dàng hơn. - Vị trí chiến lược: Áp dụng
containertimingcho các phần ngữ nghĩa quan trọng đối với chỉ số của bạn, ví dụ:hero-section,product-grid,checkout-form. Bạn không cần phải đo lường mọi vùng chứa. - Bỏ qua nội dung không liên quan: Sử dụng
containertiming-ignoretrên các phần tử con không ảnh hưởng đến chỉ số thành phần của bạn, chẳng hạn như quảng cáo hoặc phần tử trang trí.
Cách bật tính năng Thời gian của vùng chứa
Bạn có thể bật Container Timing API từ Chrome 147 bằng cờ chrome://flags/#enable-experimental-web-platform-features và từ dòng lệnh bằng cờ --enable-blink-features=ContainerTiming.
Từ Chrome 148, các trang web có thể đăng ký mã thông báo bản dùng thử theo nguyên gốc và thêm mã thông báo này vào trang của họ để tự động bật tính năng này. Điều này cho phép bạn kiểm thử API trong thực tế trên người dùng thực. Bạn có thể ghi lại các chỉ số về Thời gian của vùng chứa trong số liệu phân tích và phân tích để xác minh xem API có hoạt động như mong đợi hay không và thu thập thông tin chi tiết.
Phản hồi và thông tin chi tiết khác
Bạn nên nêu ý kiến phản hồi về Container Timing API dưới dạng vấn đề trên GitHub.
Ngoài ra, còn có một quy cách đang được đưa vào quy trình tiêu chuẩn hoá. Đối với những người quan tâm đến cách API này hoạt động nội bộ, Igalia đã xuất bản một bài đăng về cách API được triển khai về mặt kỹ thuật.
Kết luận
Chúng tôi rất vui khi thấy API này sắp được phát hành và rất mong được cung cấp API này cho các nhà phát triển để họ có thể hiểu rõ hơn về các vấn đề hiệu suất. Chúng tôi mong nhận được ý kiến phản hồi về API này và nếu mọi việc diễn ra suôn sẻ, chúng tôi sẽ sớm ra mắt API này.