Hiệu suất CSS liên quan đến dịchZ (0)

Question

Một số blog đã thể hiện mức tăng hiệu suất trong 'lừa' GPU để nghĩ rằng phần tử là 3D bằng cách sử dụng transform: translateZ(0) để tăng tốc hoạt ảnh và chuyển tiếp. Tôi đã tự hỏi ý nghĩa là gì, nếu có, của việc áp dụng biến đổi này theo cách sau:

* { 
    -webkit-transform: translateZ(0); 
    -moz-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    -o-transform: translateZ(0); 
    transform: translateZ(0); 
} 

Answer 1

biến đổi CSS tạo ra một bối cảnh xếp chồng mới và chứa khối, như mô tả trong the spec. Trong tiếng Anh đơn giản, điều này có nghĩa là cố định các phần tử vị trí có phép biến đổi được áp dụng cho chúng sẽ hoạt động giống như các phần tử được định vị hoàn toàn và các giá trị z-index có khả năng bị vặn.

Nếu bạn xem this demo, bạn sẽ hiểu ý tôi là gì. Div thứ hai có một phép biến đổi được áp dụng cho nó, có nghĩa là nó tạo ra một bối cảnh xếp chồng mới, và các phần tử giả được xếp chồng lên nhau trên đầu chứ không phải dưới đây.

Về cơ bản, đừng làm vậy. Chỉ áp dụng phép chuyển đổi 3D khi bạn cần tối ưu hóa. -webkit-font-smoothing: antialiased; là một cách khác để nhấn vào gia tốc 3D mà không tạo ra những vấn đề này, nhưng nó chỉ hoạt động trong Safari.

Answer 2

Nếu bạn muốn có ý nghĩa, in some scenarios Google Chrome performance is horrible with hardware acceleration enabled. Kỳ lạ thay, thay đổi "lừa" thành -webkit-transform: rotateZ(360deg); chỉ hoạt động tốt.

Tôi không tin rằng chúng tôi đã từng tìm ra lý do.

Answer 3

Trên thiết bị di động, mọi thứ gửi tới GPU sẽ làm quá tải bộ nhớ và làm hỏng ứng dụng. Tôi gặp phải điều này trên một ứng dụng iPad ở Cordova. Tốt nhất là chỉ gửi các mục được yêu cầu tới GPU, các div mà bạn đang di chuyển xung quanh.

Tốt hơn, hãy sử dụng chuyển tiếp 3d chuyển đổi để thực hiện các hoạt ảnh như translateX (50px) trái ngược với trái: 50px;

Answer 4

Tôi có thể chứng thực rằng -webkit-transform: translate3d(0, 0, 0); sẽ gây rối với thuộc tính mới position: -webkit-sticky;. Với mẫu điều hướng ngăn kéo bên trái mà tôi đang làm việc, tăng tốc phần cứng mà tôi muốn với thuộc tính biến đổi đã gây rối với vị trí cố định của thanh điều hướng trên cùng của tôi. Tôi tắt biến đổi và vị trí hoạt động tốt.

May mắn thay, có vẻ như tôi đã tăng tốc phần cứng, vì tôi đã có -webkit-font-smoothing: antialiased trên phần tử html. Tôi đã thử nghiệm hành vi này trong iOS7 và Android.

Answer 5

Nó buộc trình duyệt sử dụng tăng tốc phần cứng để truy cập đơn vị xử lý đồ họa của thiết bị (GPU) để làm cho pixel bay. Các ứng dụng web, mặt khác, chạy trong bối cảnh của trình duyệt, cho phép phần mềm làm hầu hết (nếu không phải tất cả) của kết xuất, dẫn đến ít mã lực hơn cho quá trình chuyển đổi. Nhưng Web đã bắt kịp và hầu hết các nhà cung cấp trình duyệt hiện nay cung cấp khả năng tăng tốc phần cứng đồ họa bằng các quy tắc CSS cụ thể.

Sử dụng -webkit-transform: translate3d (0,0,0); sẽ đẩy GPU vào hành động cho quá trình chuyển đổi CSS, làm cho chúng mượt mà hơn (FPS cao hơn).

Lưu ý: dịch3d (0,0,0) không có gì về những gì bạn thấy. nó di chuyển đối tượng bằng 0px theo trục x, y và z. Nó chỉ là một kỹ thuật để tăng tốc phần cứng.

Đọc tốt tại đây: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/