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 quét 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 việc chuyển đổi các tỷ lệ xảy ra thông qua thao tác với 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ể sẽ nhận được nội dung đẹp mắt hơn, nhưng cũng có thể chậm hơn nếu không có một số thay đổi đơn giản nêu dưới đây.

Tác động cho nhà phát triển web

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

Chúng tôi không phân biệt giữa chuyển đổi quy mô và chuyển đổi bản dịch.

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

Để tối ưu hoá sự đánh đổi chất lượng hiệu suất, bạn nên thêm will-change: transform khi ảnh động bắt đầu và xoá ảnh động đó khi 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 có chi phí hiệu suất lớn một lần.

Những điểm khác cần cân nhắc khi triển khai

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

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

Điều này có thể có tác dụng phụ của việc nội dung mất lớp tổng hợp, khiến đề xuất ở trên hơi 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ó vẫn nằm trong lớp tổng hợp trong thao tác này.

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

Thay đổi này sẽ ảnh hưởng đến chất lượng nội dung được 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 hiển thị: kết quả kết xuất của các phần tử có tỷ lệ chuyển đổi ảnh động sẽ luôn sắc nét theo mặc định.
  • Hiệu suất: tạo ảnh động biến đổi khi will-change: transform xuất hiện sẽ diễn ra nhanh.
  • Quyền kiểm soát cho 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à khung ảnh động bằng cách thêm và xoá
    will-change: transform.

Hãy xem tài liệu thiết kế tham khảo ở 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ẽ bị mờ sau khi có sự thay đổi này, nhưng phần tử có mã nhận dạng noLongerBlurry sẽ trở nên sắc nét. Nguyên nhân là vì phiên bản cũ có một thuộc tính CSS will- change: transform.

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