Tạo lại điểm ảnh cho các lớp tổng hợp khi thay đổi tỷ lệ

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

Kể từ Chrome 53, tất cả nội dung sẽ được tạo điểm ảnh lại khi tỷ lệ biến đổi của nội dung đó thay đổi, nếu nội dung đó không có thuộc tính CSS will-change: transform. Nói cách khác, will-change: transform có nghĩa là "vui lòng tạo ảnh động nhanh".

Điều này chỉ áp dụng cho các tỷ lệ biến đổi xảy ra thông qua thao tác tập lệnh và không áp dụng cho ảnh động CSS hoặc Ảnh động trên web.

Điều này có nghĩa là trang web của bạn có thể có nội dung đẹp mắt hơn, nhưng cũng có thể tải chậm hơn nếu không thực hiện một số thay đổi đơn giản như nêu dưới đây.

Ý nghĩa đối với nhà phát triển web

Theo thay đổi này, will-change: transform có thể được coi là buộc nội dung được quét thành bitmap cố định, sau đó không bao giờ thay đổi trong các bản cập nhật biến đổi. Điều này cho phép nhà phát triển tăng tốc độ chuyển đổi ảnh động trên bitmap đó, chẳng hạn như di chuyển, xoay hoặc điều chỉnh tỷ lệ.

Chúng tôi không phân biệt giữa phép biến đổi tỷ lệ và phép biến đổi dịch.

Đặt will-change: transform trên các phần tử khi bạn cần tốc độ chuyển đổi ảnh động rất nhanh (tức là 60 khung hình/giây), và dự kiến việc quét điểm ảnh phần tử ở chất lượng cao trên mỗi khung hình sẽ không đủ nhanh. Nếu không, hãy tránh sử dụng will-change: transform.

Để tối ưu hoá việc đánh đổi hiệu suất-chất lượng, bạn nên thêm will-change: transform khi ảnh động bắt đầu và xoá khi ảnh động kết thúc. Tuy nhiên, hãy lưu ý rằng việc thêm hoặc xoá will-change: transform thường sẽ gây ra một chi phí hiệu suất lớn một lần.

Các điểm cần cân nhắc khác khi triển khai

Việc xoá will-change: transform sẽ khiến nội dung được tạo điểm ảnh lại ở tỷ lệ sắc nét, nhưng chỉ trên khung ảnh động tiếp theo (thông qua requestAnimationFrame). Do đó, nếu có một lớp có will-change: transform và chỉ muốn kích hoạt quá trình quét lại nhưng sau đó tiếp tục tạo ảnh động, bạn phải xoá will-change: transform, sau đó thêm lại lớp đó trong một requestAnimationFrame() callback.

Nếu bất cứ lúc nào trong ảnh động, bạn muốn quét theo tỷ lệ hiện tại, hãy áp dụng kỹ thuật ở trên để xoá trong một khung, sau đó thêm lại will-change: transform trong một khung tiếp theo.

Điều này có thể gây ra hiệu ứng phụ là nội dung bị mất lớp kết hợp, khiến đề xuất ở trên trở nên tốn kém. Nếu đó là vấn đề, bạn cũng nên thêm transform: translateZ(0) vào nội dung để đảm bảo nội dung đó vẫn nằm trong lớp kết hợp trong quá trình này.

Tóm tắt tác động

Thay đổi này có tác động đến chất lượng nội dung hiển thị, hiệu suất và quyền kiểm soát của nhà phát triển.

  • Chất lượng nội dung kết xuất: đầu ra kết xuất của các phần tử tạo ảnh động theo tỷ lệ biến đổi sẽ luôn sắc nét theo mặc định.
  • Hiệu suất: việc tạo ảnh động biến đổi khi có will-change: transform sẽ diễn ra nhanh chóng.
  • Chế độ kiểm soát của nhà phát triển: nhà phát triển có thể chọn giữa chất lượng và tốc độ, trên cơ sở mỗi phần tử và mỗi khung ảnh động bằng cách thêm và xoá
    will-change: transform.

Hãy xem tài liệu thiết kế được tham chiếu ở trên để biết thêm thông tin chi tiết.

Ví dụ

Trong ví dụ này, phần tử có mã nhận dạng remainsBlurry sẽ vẫn bị mờ sau khi thay đổi này, nhưng phần tử có mã nhận dạng noLongerBlurry sẽ trở nên sắc nét. Đó là do lớp trước có thuộc tính CSS will- change: transform.

Ví dụ về ảnh động chuyển đổi tỷ lệ từ các ứng dụng thực tế