Tôi đã thực hiện một vài dự án với chuyển tiếp CSS3 và Jquery .animate() dự phòng khi CSS3 không được hỗ trợ.
Tôi đã ba máy tính thử nghiệm bên cạnh của riêng tôi:
- một máy tính xách tay hơn 6 năm (chạy XP, Athlon 1800+ và 768Mo của Ram)
- một máy tính xách tay 3 năm (chạy Crappy Vista và một dual Core CPU Intel với 2Go của Ram)
- một máy tính để bàn franken (một vài hệ điều hành được cài đặt với một P4 và 1Go của ram)
những gì tôi quan sát thấy là hầu hết các lần, CSS3 thực hiện tốt hơn.
Ý tôi là "thực hiện tốt hơn" là tôi "không cảm thấy tốt hơn": Tôi đã không cố gắng đánh giá các mức độ hoàn hảo, cũng như áp dụng phương pháp thử nghiệm khoa học và quan sát của tôi không được thực hiện nhiều hơn cảm thấy. Cũng lưu ý rằng tôi chủ yếu sử dụng CSS3 chuyển tiếp và không CSS3 Animations (tức là với khung hình chính).
Tuy nhiên, "tốt hơn" không có nghĩa là "luôn luôn tốt". Trên các máy tính cũ hơn, Javascript và CSS3 đều bị lag. Nếu trang web của bạn là JS hoặc CSS3 nặng, IE trước phiên bản 9 luôn là trải nghiệm kém, IE trước phiên bản 8 luôn là một cơn ác mộng thực sự. Firefox trước v4 thì tốt hơn nhưng hoàn hảo hơn nhiều so với các máy tính cũ.
Trong mọi trường hợp, CSS3 phải được áp dụng chính xác: ví dụ: tôi thấy rằng fading div thành opacity: 0 không hiển thị cài đặt: none khi hoàn thành luôn là ý tưởng tồi ... Chuyển đổi CSS3 khá mới không thực hành tốt nhất tồn tại, đó là bản dùng thử và lỗi hiện tại.
Trên thiết bị di động hiện đại (tôi sở hữu một vài thiết bị IOS, Android và BBOS), CSS3 luôn tốt hơn Javascript: trên iPad 1, đơn giản $ ('img'). FadeOut() có thể khá xấu xí khi quá trình chuyển đổi CSS3 trở nên sạch sẽ.
Vì vậy, để kết luận, cá nhân (và hạn chế) kinh nghiệm của tôi nói:
- css3 thường tốt hơn so với Js, đặc biệt là cho các thiết bị di động hiện đại
- mặc dù cả hai đều xấu trên các máy tính nghèo/trình duyệt kết hợp khi sử dụng quá mức
- như thường lệ, tùy thuộc vào người dùng của bạn. Nếu họ có nhà nước của Macbook nghệ thuật, bạn có thể sử dụng rất nhiều hình ảnh động mà không sợ hãi. Nếu chúng được trang bị kém, hoạt ảnh có thể cản trở trải nghiệm duyệt web của họ.
- Tôi nghĩ rằng tốt nhất là để làm hiệu ứng chuyển tiếp CSS3 với một fallback Jquery nếu không được hỗ trợ, và giữ 'em đơn giản (tức là không tạo hiệu ứng động bốn thuộc tính trên ba yếu tố khác nhau cùng một lúc)
Tôi hy vọng nó giúp.
Tôi nghi ngờ rằng một số hoạt ảnh CSS3 "nặng hơn" trên GPU so với bất kỳ trò chơi máy tính nào từ năm 1999. toán học là siêu đơn giản so với những điều điên trò chơi yêu cầu 10 năm trước đây, do đó, trên thực tế, vấn đề tốc độ chỉ là triển khai của trình duyệt với CSS-> GPU. nhưng tôi chỉ đoán thôi. – vsync
Đúng. Nhưng tôi đoán đó là khoảng bao nhiêu "sức mạnh" một trình duyệt sẽ có thể đi từ thiết bị của một người.Hãy tưởng tượng trình duyệt nên sử dụng tất cả GPU của bạn như một trò chơi, sau đó nghĩ đến những người lạm dụng/lạm dụng điều này. Vì vậy, hy vọng các trình duyệt có được tốt hơn trong việc xử lý việc sử dụng GPU, nhưng tôi đoán có một lý do tại sao fading đơn giản/hình ảnh động là như vậy đòi hỏi. –