2016-07-11 20 views
8

Có thuộc tính CSS mới, được gọi là will-change, bằng cách sử dụng bạn có thể xác định các thuộc tính sẽ được thay đổi thường xuyên, do đó trình duyệt có thể tối ưu hóa nó. Ví dụ:CSS sẽ không thay đổi

.element { 
    will-change: transform, opacity; 
} 

Nhưng còn điều ngược lại thì sao? Có bất kỳ đề xuất hoặc bản thảo làm việc nào cho một số nội dung như will-not-change không? Sử dụng nó sẽ có thể gợi ý trình duyệt, rằng các thuộc tính đó sẽ không bao giờ thay đổi (hằng số), vì vậy nó có thể làm một số tối ưu hóa trên nó?

+0

Tôi muốn đề xuất bài đăng hay nhất về điều này trên MDN https://developer.mozilla.org/en/docs/Web/CSS/will-change –

Trả lời

7

Trình duyệt đã tối ưu hóa thuật toán bố cục của chúng cho các thuộc tính "sẽ không thay đổi" theo mặc định. will-change là cách để chọn thuộc tính trong đó có thể thay đổi (mặc dù tên "có thể" trong tên thuộc tính có thể đề xuất) để trình duyệt có thể thực hiện các tối ưu hóa cần thiết trước đó khi các thuộc tính đó làm thay đổi (từ giá trị ban đầu của chúng, ít nhất). Hãy suy nghĩ theo cách này: các thuộc tính không được liệt kê trong will-change đã được tối ưu hóa là "sẽ không thay đổi" hoặc "liệu chúng có thay đổi hay không tạo ra sự khác biệt có ý nghĩa về hiệu suất." Ví dụ: tờ khai will-change của bạn yêu cầu trình duyệt tạo lớp bố cục cho các yếu tố .element, trong trường hợp chúng cần được biến đổi hoặc tổng hợp alpha, để hiển thị của chúng là phần cứng được tăng tốc từ khi di chuyển. Vì tuyên bố will-change này không áp dụng cho các thành phần không có lớp này, trình duyệt giả định rằng các yếu tố khác sẽ không bao giờ được chuyển đổi hoặc tổng hợp alpha và do đó không cần lớp thành phần này. Bằng cách không tạo các lớp thành phần cho chúng, trình duyệt đã tối ưu hóa việc hiển thị các phần tử đó bằng cách không phải phần cứng tăng tốc chúng một cách không cần thiết.

Các vấn đề liên quan