Cân nhắc về hiệu suất chuyển tiếp CSS3

Question

Là một phần của dự án cần hỗ trợ thiết bị di động, tôi đã bắt tay vào việc điều khiển chuyển đổi iPhone bằng cách sử dụng CSS3. Tôi có giao diện của phần tử khá nhiều ở đó và đang sử dụng các hiệu ứng chuyển tiếp CSS3 để tạo hiệu ứng cho sự thay đổi trạng thái của nó.

Khi tôi có chính phần tử trên trang không có gì khác, quá trình chuyển đổi tương đối mượt mà trên iOS. Tuy nhiên, khi tôi kết hợp nó với các yếu tố CSS khác trên một trang, kết quả trong iOS là laggy như bất cứ điều gì. Đó là một chút tốt hơn so với một hình ảnh động jQuery nguyên, nhưng không nhiều.

tôi đã thiết lập hai trang thử nghiệm để chứng minh những gì tôi có nghĩa là (sự khác biệt là hầu như không đáng chú ý trong một trình duyệt thông thường):

Chuyển đổi kiểm soát ngày của riêng mình>http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

Kết hợp với các yếu tố khác>http://ben-major.co.uk/labs/iPhone%20UI/

Tôi đang tìm kiếm bất kỳ lời khuyên nào về việc tăng tốc độ chuyển đổi trong thiết bị di động. Những yếu tố nào có thể làm chậm hiệu suất của nó trong bài kiểm tra toàn trang?

Bất kỳ lời khuyên và nhận xét nào được chào đón.

Answer 1

Bạn phải cẩn thận với điều này, vì nó có thể làm thay đổi z-index của phần tử nó được áp dụng, nhưng nói thêm:

-webkit-transform-style: preserve-3d; 

Để yếu tố bạn đang áp dụng việc chuyển đổi sang, có thể tăng tốc hoạt hình đáng kể, vì nó buộc phần cứng sử dụng tăng tốc phần cứng cho hoạt ảnh.

Nếu bạn gặp phải lỗi bố trí, bạn chỉ có thể chuyển đổi chuyển 2ngày của bạn để giá trị 3d, vì vậy:

-webkit-transform: translate(100px, 100px) 

trở thành:

-webkit-transform: translate3d(100px, 100px, 0px) 

Bạn có thể thấy một bản demo của cách này giúp tốc độ những thứ lên, tại http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

Nếu sau khi áp dụng điều này cho phần tử, bạn sẽ thấy nó hoặc các yếu tố xung quanh nó nhấp nháy khi sử dụng, sau đó sử dụng:

-webkit-backface-visibility: hidden; 

Đối với phần tử và điều đó sẽ khắc phục sự cố.

Những mẹo này đã giúp tôi tạo các chuyển đổi CSS nhanh, hiệu quả, hy vọng chúng sẽ giúp ích. :)

Answer 2

Chrome gần đây đã cải thiện hiệu suất chuyển tiếp 2D và giờ đây mẹo này không còn cần thiết nữa. Điều tốt nhất là nếu loại bỏ các dịch3d bạn sẽ không còn có những vấn đề z-index! Sử dụng thử nghiệm để chứng minh. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

Answer 3

Tôi nghĩ rằng nó đã cũ nhưng đối với bất kỳ ai vẫn cần thủ thuật để cải thiện hiệu suất chuyển tiếp trên thiết bị di động, bạn có thể áp dụng: -webkit-transform: translateZ (0); đến phần tử bạn đang tạo hoạt ảnh. Bí quyết này là theo blog này: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/. Tôi đã thử và nó hoạt động khá tốt.

Answer 4

bạn cũng có thể thử will-change: transform;, đọc thêm về nó ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility