Hiệu suất CSS so với translateZ (0)

Một số blog đã bày tỏ hiệu suất đạt được khi 'lừa' GPU nghĩ rằng một 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 liệu có những tác động nào khi sử 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);
}

Các phép 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ư được mô tả trong thông số kỹ thuật. Trong tiếng Anh đơn giản, điều này có nghĩa là các phần tử vị trí cố định được áp dụng một phép biến đổi sẽ hoạt động giống như các phần tử được định vị hoàn toàn và z-indexcác giá trị có thể bị sai lệch.

Nếu bạn xem qua bản demo này , bạn sẽ thấy ý tôi. Div thứ hai có một phép chuyể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 chứ không phải bên dưới.

Vì vậy, về cơ bản, đừng làm điều đó. Chỉ áp dụng 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 để khai thác tăng tốc 3D mà không tạo ra những vấn đề này, nhưng nó chỉ hoạt động trong Safari.

Nếu bạn muốn có các tác động, trong một số trường hợp, hiệu suất của Google Chrome rất tệ khi bật tăng tốc phần cứng . Thật kỳ lạ, việc thay đổi "thủ thuật" lại -webkit-transform: rotateZ(360deg);hoạt động tốt.

Tôi không tin rằng chúng ta đã bao giờ tìm ra lý do tại sao.

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

Việc sử dụng -webkit-transform: translate3d(0,0,0);sẽ thúc đẩy GPU hoạt động cho các quá trình chuyển đổi CSS, giúp chúng mượt mà hơn (FPS cao hơn).

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

Đọc hay ở đây: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Tôi có thể chứng thực một thực tế là -webkit-transform: translate3d(0, 0, 0);sẽ gây rối với position: -webkit-sticky;tài sản mới . Với mẫu điều hướng ngăn kéo bên trái mà tôi đang làm việc, khả năng tăng tốc phần cứng mà tôi muốn với thuộc tính chuyển đổi đang 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 chuyển đổi và định vị hoạt động tốt.

May mắn thay, dường như tôi đã bật tăng tốc phần cứng, vì tôi đã -webkit-font-smoothing: antialiasedsử dụng phần tử html. Tôi đã thử nghiệm hành vi này trong iOS7 và Android.

Trên các thiết bị di động, việc gửi mọi thứ đến GPU sẽ gây ra tình trạng quá tải bộ nhớ và làm ứng dụng bị treo. Tôi gặp sự cố này trên một ứng dụng iPad ở Cordova. Tốt nhất là chỉ gửi các mục cần thiết đến GPU, các div mà bạn đang di chuyển cụ thể.

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