ContentVisibilityAutoStateChangeEvent
Baseline
2024
Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Giao diện ContentVisibilityAutoStateChangeEvent là đối tượng sự kiện cho sự kiện contentvisibilityautostatechange, được kích hoạt trên bất kỳ phần tử nào có content-visibility: auto khi phần tử đó bắt đầu hoặc ngừng liên quan tới người dùng và bỏ qua nội dung của nó.
Khi phần tử không còn liên quan (giữa các sự kiện bắt đầu và kết thúc), user agent sẽ bỏ qua việc dựng hình của phần tử, bao gồm cả bố cục và vẽ.
Điều này có thể cải thiện đáng kể tốc độ dựng hình trang.
Sự kiện contentvisibilityautostatechange cung cấp một cách để mã của ứng dụng cũng bắt đầu hoặc dừng các tiến trình dựng hình (ví dụ: vẽ lên một phần tử <canvas>) khi chúng không cần thiết, từ đó tiết kiệm năng lực xử lý.
Lưu ý rằng ngay cả khi bị ẩn khỏi tầm nhìn, nội dung của phần tử vẫn giữ nguyên ý nghĩa ngữ nghĩa (ví dụ: đối với người dùng công nghệ hỗ trợ), vì vậy tín hiệu này không nên được dùng để bỏ qua các cập nhật DOM ngữ nghĩa quan trọng.
Hàm tạo
ContentVisibilityAutoStateChangeEvent()-
Tạo một thể hiện đối tượng
ContentVisibilityAutoStateChangeEventmới.
Thuộc tính thực thể
Kế thừa các thuộc tính từ đối tượng cha của nó, Event.
skippedRead only-
Trả về
truenếu user agent đang bỏ qua việc dựng hình của phần tử, hoặcfalsenếu không.
Ví dụ
const canvasElem = document.querySelector("canvas");
canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";
function stateChanged(event) {
if (event.skipped) {
stopCanvasUpdates(canvasElem);
} else {
startCanvasUpdates(canvasElem);
}
}
// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
// …
}
// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
// …
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Containment Module Level 2 # content-visibility-auto-state-change |
Khả năng tương thích với trình duyệt
Xem thêm
- Sự kiện
contentvisibilityautostatechange - CSS Containment
- Thuộc tính
content-visibility - Thuộc tính
contain