Tại sao việc bật tăng tốc phần cứng trong CSS3 lại làm chậm hiệu suất?

Tôi di chuyển 6.000 phần tử div nhỏ trong một thí nghiệm css3 sử dụng một quá trình chuyển đổi từ top: 0tới top: 145pxđể thực hiện thử nghiệm.

Sử dụng không tăng tốc phần cứng chạy mịn trên Google Chrome.

Nếu tôi kích hoạt tăng tốc phần cứng thông qua translateZ(0)hiệu suất sẽ trở nên kinh khủng.

Tại sao lại như vậy?

Đây là mã ví dụ của tôi: http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html

Cập nhật (2014-11-13): Vì câu hỏi này vẫn đang thu hút sự chú ý, tôi muốn chỉ ra rằng bản thân vấn đề dường như vẫn tồn tại mặc dù hiện tượng nói lắp được đề cập có thể không còn hiển thị trong bản demo được cung cấp trên phần cứng hiện đại . Các thiết bị cũ hơn có thể vẫn gặp vấn đề về hiệu suất.

Tôi luôn nói thêm:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Khi làm việc với biến đổi 3d. Thậm chí là "giả" biến hình 3D. Kinh nghiệm cho tôi biết rằng hai dòng này luôn cải thiện hiệu suất, đặc biệt là trên iPad mà cả trên Chrome.

Tôi đã thử nghiệm trên ví dụ của bạn và theo như tôi có thể nói, nó hoạt động.

Còn về phần "tại sao" trong câu hỏi của bạn thì ... mình không biết. Chuyển đổi 3D là một tiêu chuẩn trẻ, vì vậy việc triển khai rất khó khăn. Đó là lý do tại sao nó là thuộc tính có tiền tố: để thử nghiệm beta. Ai đó có thể điền vào một báo cáo lỗi hoặc một câu hỏi và yêu cầu nhóm điều tra.

Chỉnh sửa vào ngày 19 tháng 8 năm 2013 :

Có hoạt động thường xuyên về câu trả lời này và tôi chỉ mất một giờ để nhận ra rằng IE10 cũng cần điều này. Vì vậy, đừng quên:

backface-visibility: hidden;
perspective: 1000;

Lý do hoạt ảnh chậm hơn khi bạn thêm hack biến đổi null (translateZ(0) ) là mỗi biến đổi 3D null tạo ra một lớp mới. Khi có quá nhiều lớp trong số này, hiệu suất hiển thị sẽ bị ảnh hưởng vì trình duyệt cần gửi nhiều kết cấu đến GPU.

Vấn đề đã được nhận thấy vào năm 2013 trên trang chủ của Apple, nơi đã lạm dụng hack biến đổi null. Xem http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Aaries-Home-Page/

OP cũng nhận thấy chính xác lời giải thích trong bình luận của họ :

Di chuyển một vài đối tượng lớn sẽ hiệu quả hơn so với di chuyển nhiều mục nhỏ khi sử dụng tính năng tăng tốc 3D vì tất cả các lớp được tăng tốc 3D phải được chuyển đến GPU và đường lùi. Vì vậy, ngay cả khi GPU hoạt động tốt, việc chuyển nhiều đối tượng có thể là một vấn đề, do đó việc sử dụng tăng tốc GPU có thể không đáng.

Hấp dẫn. Tôi đã thử chơi với một số tùy chọn about:flags, cụ thể là những tùy chọn sau:

Tổng hợp GPU trên tất cả các trang Sử dụng tính năng tổng hợp được tăng tốc GPU trên tất cả các trang, không chỉ những trang bao gồm các lớp được tăng tốc GPU.

GPU Accelerated Drawing Bật bản vẽ tăng tốc GPU cho nội dung trang khi tính năng tổng hợp được bật.

GPU Accelerated Canvas 2D Cho phép hiệu suất cao hơn của thẻ canvas với ngữ cảnh 2D bằng cách kết xuất bằng phần cứng Bộ xử lý đồ họa (GPU).

Đã bật những thứ đó, thử nó và thất bại thảm hại với hộp đánh dấu được bật (giống như bạn đã làm). Nhưng sau đó tôi nhận thấy một tùy chọn khác:

Bộ đếm FPS Hiển thị tốc độ khung hình thực tế của trang, tính bằng khung hình trên giây, khi tăng tốc phần cứng đang hoạt động .

Với điểm nổi bật trong mô tả cờ, tôi suy đoán rằng thực tế, tăng tốc phần cứng đã được bật đối với tôi ngay cả khi không có hộp kiểm được đánh dấu vì tôi thấy bộ đếm FPS với các tùy chọn ở trên được bật!

TL; DR: cuối cùng thì tăng tốc phần cứng là một ưu tiên của người dùng; buộc nó với giả translateZ(0)sẽ giới thiệu chi phí xử lý dư thừa khiến hiệu suất thấp hơn.

Kiểm tra chrome: // flags trong chrome. Nó nói rằng

"Khi bật tính năng tổng hợp theo chuỗi, các hoạt ảnh CSS tăng tốc sẽ chạy trên chuỗi tổng hợp. Tuy nhiên, có thể tăng hiệu suất khi chạy với các hoạt ảnh CSS được tăng tốc, ngay cả khi không có chuỗi tổng hợp."

Kinh nghiệm của tôi là GPU thường không nhanh hơn cho tất cả các loại đồ họa. Đối với đồ họa rất "cơ bản", chúng có thể chậm hơn.

Bạn có thể nhận được kết quả khác nếu bạn đang xoay một hình ảnh - đó là loại GPU giỏi

Cũng nên xem xét rằng translateZ (0) là một hoạt động trong 3 chiều, trong khi thay đổi trên cùng hoặc trái là một hoạt động 2 chiều

Tôi đã xem bản demo của hai bạn ， Tôi nghĩ tôi biết lý do khiến bạn bối rối ：

1. Các yếu tố hoạt hình Không sử dụng bên trái hoặc trên cùng để thay đổi vị trí, hãy thử sử dụng -webkit-biến đổi;
2. Tất cả các phần tử con cần bật tăng tốc phần cứng như sử dụng translateZ () hoặc translate3D;
3. FPS đo độ trôi chảy của hoạt ảnh, FPS demo của bạn trung bình chỉ 20FPS.

Trên đây chỉ là ý kiến ​​cá nhân, xin cảm ơn!