Tôi đang làm việc trên ứng dụng iPad HTML5 và tôi đã triển khai hỗ trợ ontouch để kích hoạt sự kiện nhanh hơn và tôi đang sử dụng jQuery để nhắm mục tiêu các yếu tố dễ dàng hơn, nhưng đối với hoạt ảnh tôi đang sử dụng chuyển đổi CSS3nhanh hơn là gì? CSS3 chuyển tiếp hoặc hình ảnh động jQuery?
Điều gì bạn có nghĩ nhanh hơn không? sử dụng các hoạt ảnh jQuery vì tôi đã nhập thư viện hoặc sử dụng các chuyển đổi CSS3 khi nhắm mục tiêu các phần tử với jQuery?
Theo this link, hoạt ảnh jQuery chậm hơn nhiều so với hoạt ảnh css.
Lý do có thể là do jquery phải sửa đổi các đạo cụ của phần tử DOM sử dụng bộ tính giờ và vòng lặp. CSS là một phần của công cụ trình duyệt. phụ thuộc khá nhiều vào phần cứng của hệ thống. Bạn cũng có thể kiểm tra xem trong hồ sơ của Chrome hoặc Firefox.
Một so sánh khác xác nhận rằng jQuery chậm hơn CSS - http://css-tricks.com/myth-busting- css-animations-vs-javascript/- nhưng nó cũng cho thấy rằng CSS có thể chậm hơn so với các giải pháp JavaScript khác. Vì vậy, có thể có hy vọng cho jQuery để cải thiện. – Luke
Hoạt ảnh CSS sẽ hầu như luôn nhanh hơn.
So sánh đầu so với chuyển tiếp CSS và hoạt ảnh của jQuery. Thay vì đặt hẹn giờ để chạy nhiều lần, các chuyển tiếp được xử lý một cách tự nhiên bởi trình duyệt. Trong thử nghiệm khá không khoa học của tôi, các chuyển đổi luôn nhanh hơn, chạy với tốc độ khung hình cao hơn, đặc biệt với số lượng phần tử cao. Họ cũng có lợi thế rằng màu sắc có thể hoạt hình dễ dàng, thay vì phải dựa vào các plugin .
http://css.dzone.com/articles/css3-transitions-vs-jquery
Câu hỏi liên quan: Performance of CSS Transitions vs. JS animation packages
CSS3 Transitions nên nhanh hơn bởi vì họ có nguồn gốc từ trình duyệt.
Các Mozilla developer documentation raises some interesting points regarding CSS3 animation:
Cho điều khiển trình duyệt tự động cho phép hiệu suất tối ưu hóa trình duyệt và hiệu quả bằng cách, ví dụ, làm giảm tần số cập nhật hình ảnh động chạy trong tab hiện không thể nhìn thấy .
WebKit (which powered Safari) also makes use of hardware accelerated compositing, có thể có ảnh hưởng lớn hơn đến hiệu suất hơn bất kỳ thứ gì mà Javascript có thể thực hiện tại thời điểm này. (Tôi nghĩ rằng điều này sẽ thay đổi rất sớm mặc dù các chức năng được thêm vào để quản lý các phép tính) Điều này là bởi vì nó sẽ tận dụng lợi thế của phần cứng chuyên dụng nếu nó có sẵn để thực hiện các phép tính, thay vì làm cho nó xảy ra thông qua một ngôn ngữ được dịch như Javascript.
Tôi không chắc chắn 100% liệu WebKit trên iPad có tăng tốc phần cứng hay không; tuy nhiên, điều đó có thể lý giải vì nó được tiêu chuẩn hóa và ngày càng phổ biến, điều này sẽ chỉ cải thiện theo thời gian.
Từ here
Một so sánh đối đầu của quá trình chuyển đổi CSS và animate của jQuery. Thay vì đặt hẹn giờ chạy liên tục, các chuyển tiếp được xử lý nguyên bản bởi trình duyệt. Trong thử nghiệm khá không khoa học của tôi, quá trình chuyển đổi luôn nhanh hơn, chạy với tốc độ khung hình cao hơn , đặc biệt với số lượng phần tử cao. Họ cũng có lợi thế rằng màu sắc có thể hoạt ảnh dễ dàng, thay vì phải dựa vào các plugin .
Thử nghiệm here cùng với kết luận này.
hình ảnh động javascript dựa trên giờ không bao giờ có thể nhanh như mẹ đẻ hình ảnh động, như họ không có quyền truy cập vào đủ của trình duyệt để làm cho optimisations cùng. Các hoạt ảnh này sẽ chỉ được sử dụng làm dự phòng trong các trình duyệt cũ.
Cũng cần chú ý this,
hình ảnh động CSS3 là terriffic nhưng làm sử dụng rất nhiều điện của bộ vi xử lý của bạn. Không có cách nào để tinh chỉnh hoạt ảnh với CSS3 giống như cách bạn có thể sử dụng khung công tác như jQuery. Vì vậy, miễn là hoạt ảnh CSS3 không thân thiện với CPU, bạn hãy gắn bó với jQuery nhiều hơn .
Trích dẫn thứ ba từ thiết kế richardet là bằng chứng giai thoại từ năm 2011. Kết luận của ông được rút ra từ một kinh nghiệm duy nhất. –
CSS3 sẽ nhanh hơn tiêu chuẩn với trình duyệt khi JQuery là một tệp khác phải được tải, tuy nhiên tôi thấy rằng tùy thuộc vào hoạt ảnh mà JQuery có thể chạy mượt mà hơn nhiều. Đôi khi nó cũng tốt đẹp để thử nghiệm với Javascript tinh khiết bây giờ và một lần nữa.
tôi hoàn toàn đồng ý. Đặc biệt với việc chuyển đổi vị trí jquery có thể chạy mượt mà hơn nhiều lần. – Mike
Nếu bạn đang sử dụng hoạt ảnh jQuery/javascript với thẻ canvas (nếu tôi không nhầm thì vẫn dựa vào bộ hẹn giờ ... mới để chơi với nó), thì nó mang đến cho bạn lợi thế về phần cứng tăng tốc với javascript. Nếu bạn chỉ muốn di chuyển một cái gì đó xung quanh khi bạn di chuột thì quá trình chuyển đổi hoạt động rất tốt. Quá trình chuyển đổi CSS có thể chạy mượt mà hơn một chút nhưng đó là giao dịch, bạn sẽ từ bỏ một tấn kiểm soát javascript đối với hoạt ảnh bằng cách sử dụng hiệu ứng chuyển tiếp. Tôi muốn giữ phong cách trong CSS và hành vi trong JS - không phải là nó phải làm việc sao? CSS chuyển tiếp loại đã phá vỡ logic đó ...
bạn vẫn có thể sử dụng logic trong js và phong cách trong css chuyển đổi đơn giản chỉ là một công cụ để có thể đạt được kết quả tốt hơn. đảm bảo yếu tố của bạn có một thuộc tính chuyển tiếp css sau đó đặt giá trị css bằng cách sử dụng javascipt, có được sự kiểm soát và tăng tốc phần cứng. – Jai
css3 của nó nhanh hơn và tiêu thụ bộ nhớ ít hơn và mượt mà hơn. Bộ xử lý CSS được viết bằng C++ và mã gốc thực thi rất nhanh trong khi jQuery (JavaScript) là một ngôn ngữ thông dịch và trình duyệt không thể dự đoán JavaScript trước thời hạn. http://dev.opera.com/articles/view/css3-vs-jquery-animations/
Xem liên kết ở trên để biết về các thí nghiệm được tổ chức trên CSS3 vs jQuery
Điều này có thể đúng theo lịch sử, nhưng các công cụ JavaScript hiện đại (ví dụ: V8 của Google) biên dịch JS thành mã gốc. Đúng là hoạt ảnh CSS hiệu quả hơn, nhưng không nhất thiết vì lý do bạn đưa ra. –
V8 JIT biên dịch nó thành mã gốc, nhưng điều đó không có nghĩa là nó nhanh như một ngôn ngữ được gõ tĩnh như C++ được biên dịch trước thời hạn. Sự khác biệt tốc độ là kết quả của bản chất động của ngôn ngữ. – niagr
This article (http://css-tricks.com/myth-busting-css-animations-vs-javascript/) không một sự so sánh tuyệt vời của CSS biến đổi so với jQuery hình ảnh động vs GSAP (một thư viện JavaScript).
Hoạt ảnh CSS nhanh hơn đáng kể so với jQuery. Tuy nhiên, trên hầu hết các thiết bị và các trình duyệt tôi kiểm tra, các GSAP dựa trên JavaScript thực hiện thậm chí tốt hơn so với hình ảnh động CSS
Vì vậy biến đổi CSS là nhanh hơn so với jQuery hình ảnh động, nhưng đừng để điều này làm cho bạn cho rằng biến đổi CSS nhanh hơn JavaScript.GSAP cho thấy rằng JavaScript có thể hoạt động tốt hơn CSS.
Gốc được cho là nhanh hơn, nhưng nếu nhà phát triển trình duyệt cẩu thả (hoặc lười), họ viết mã xấu, dẫn đến kết quả kém với hoạt ảnh CSS (hoặc chuyển tiếp).
Ngày nay, jQuery có plugin bổ sung chức năng "hoạt ảnh" với chức năng "được cải thiện". xem Velocity. Tôi không đi vào các cách khác để tạo động lực cho DOM bằng javascript bởi vì nó nằm ngoài phạm vi của câu hỏi này.
Vì vậy, như là, jQuery chậm hơn CSS. Ngoài ra, CSS dễ viết hơn vì bạn đã có kiểu phần tử, vì vậy việc thêm một vài quy tắc là dễ dàng, so với tình huống mà bạn cần bắt đầu viết JS ở đâu đó và quản lý nó..nhưng với những thứ phức tạp, nặng nề, JS nhanh hơn, thật đáng buồn.
Bài viết rất hay về câu hỏi chính xác này - http://davidwalsh.name/css-js-animation
Tùy thuộc vào trình duyệt. – jrummell
Chỉ cần nhớ, bản địa luôn nhanh hơn. Vâng, thường là. Chuyển đổi CSS3 được coi là có nguồn gốc trình duyệt. –
http://dev.opera.com/articles/view/css3-vs-jquery-animations/ –