Hướng dẫn is javascript slower than css? - javascript có chậm hơn css không?

Có một quan niệm sai lầm phổ biến rằng hình ảnh động CSS nhanh hơn hình ảnh động của JS vì tất cả các từ tiếng vang highfalutin được sử dụng bất cứ khi nào chủ đề được đưa ra. Tuy nhiên, hoạt hình CSS nhanh hơn nhiều và ổn định hơn nhiều so với hình ảnh động của JQuery, đó là nơi mà rất nhiều người có được ý tưởng này. Nếu bạn nhìn vào Thư viện Greensock cho JS (tên sẽ gọi chuông đến Flash WebDevs cũ: V), nó sẽ nhanh hơn đáng kể so với JQuery và nhiều hơn một trận đấu cho hoạt hình CSS.much faster and more stable than jQuery animations, which is where a lot of people get this idea from. If you take a look at the GreenSock library for JS (the name should ring bells to old Flash WebDevs :v), it is considerably faster than jQuery, and more than a match for CSS animations.

Nếu bạn xem trang web này và cuộn xuống phần 'so sánh hiệu suất', bạn có một bài kiểm tra căng thẳng thực sự là cơ sở của tất cả những gì tôi vừa nói. Tôi đã chạy thử nghiệm trên một máy có bộ xử lý Intel Core i7 3930K 3.2GHz và RAM 8GB (không thể biết GPU).

Khi chạy thử nghiệm, hãy đảm bảo đặt các dấu chấm thành 3000 và chạy thử nghiệm trên cả ba động cơ.

• Động cơ jQuery chỉ có thể hiển thị một dấu chấm
• Động cơ Greensock cho đến nay là chất lỏng nhất
• Động cơ CSS tốt, nhưng dường như không trôi chảy như động cơ GSAP

Rõ ràng, nếu bất kỳ ai không đồng ý với các bài kiểm tra và thông tin được đưa ra, vui lòng nêu với các tài liệu tham khảo và dữ liệu về lý do tại sao bạn không đồng ý

DigitalOcean cung cấp các sản phẩm đám mây cho mọi giai đoạn của hành trình của bạn. Bắt đầu với $ 200 trong tín dụng miễn phí!

Sau đây là một bài đăng của khách của Jack Doyle, tác giả của nền tảng hoạt hình Greensock (GSAP). Jack làm rất nhiều hoạt động với hoạt hình trong trình duyệt và đã phát hiện ra rằng ý kiến ​​chung chung rằng CSS CSS nhanh hơn chỉ là sự thật. Nó cũng nhiều hơn thế. Tôi sẽ để anh ấy giải thích.

Ngày xửa ngày xưa, hầu hết các nhà phát triển đã sử dụng jQuery để làm động mọi thứ trong trình duyệt. Fade này, mở rộng điều đó; công cụ đơn giản. Khi các dự án tương tác trở nên tích cực hơn và các thiết bị di động bùng nổ, hiệu suất ngày càng trở nên quan trọng. Flash đã biến mất và các nhà làm phim hoạt hình tài năng đã ép HTML5 để làm những việc chưa từng làm trước đây. Họ cần các công cụ tốt hơn để giải trình tự phức tạp và hiệu suất hàng đầu. JQuery chỉ đơn giản là được thiết kế cho điều đó. Trình duyệt trưởng thành và bắt đầu cung cấp giải pháp.

Giải pháp được đánh giá cao nhất là hoạt hình CSS (và chuyển tiếp). Con cưng của ngành công nghiệp trong nhiều năm nay, các hình ảnh động của CSS đã được nói đến vô tận tại các hội nghị nơi các cụm từ như phần cứng đã tăng tốc và và thân thiện với thiết bị di động. Hoạt hình dựa trên JavaScript đã được đối xử như thể nó là cổ xưa và là Dirty Dirty. Nhưng nó là?

Là một người nào đó bị mê hoặc (thực sự giáp với bị ám ảnh, thực sự) với hoạt hình và hiệu suất, tôi háo hức nhảy lên nhóm nhạc CSS. Mặc dù vậy, tôi đã đi xa, trước khi tôi bắt đầu khám phá ra một loạt các vấn đề lớn mà không ai nói đến. Tôi đã bị sốc.

Bài viết này nhằm nâng cao nhận thức về một số thiếu sót quan trọng hơn của hoạt hình dựa trên CSS để bạn có thể tránh được những cơn đau đầu mà tôi gặp phải và đưa ra quyết định sáng suốt hơn về việc khi nào nên sử dụng JS và khi nào nên sử dụng CSS cho hoạt hình.

Thiếu quy mô độc lập/xoay/kiểm soát vị trí

Hoạt hình quy mô, xoay và vị trí của một yếu tố là vô cùng phổ biến. Trong CSS, tất cả họ đều bị nhồi nhét thành một thuộc tính biến đổi của một người khác, khiến chúng không thể làm động theo một cách thực sự khác biệt trên một yếu tố duy nhất. Ví dụ, điều gì sẽ xảy ra nếu bạn muốn làm động lại vòng quay và một cách độc lập, với các thời gian và giảm bớt khác nhau? Có lẽ một phần tử liên tục xung (tỷ lệ dao động) và bạn muốn xoay nó trên rollover. Điều đó chỉ có thể với JavaScript.

Xem các biến đổi độc lập bút của Greensock (@greenock) trên Codepen

Theo tôi, đây là một điểm yếu rõ ràng trong CSS nhưng nếu bạn chỉ thực hiện các hình ảnh động đơn giản hơn làm động toàn bộ trạng thái biến đổi tại bất kỳ thời điểm nào, thì điều này sẽ là một vấn đề đối với bạn.

Màn biểu diễn

Hầu hết các so sánh trên các hình ảnh động của Web Pit CSS với JQuery vì nó rất phổ biến (như thể là Jav JavaScript và và JQuery, đồng nghĩa với nhau) nhưng JQuery được biết đến rộng rãi là khá chậm về mặt hiệu suất hoạt hình. GSAP mới hơn cũng dựa trên JavaScript nhưng nó thực sự nhanh hơn tới 20 lần so với JQuery. Vì vậy, một phần lý do khiến JavaScript hoạt hình có tiếng xấu là cái mà tôi gọi là yếu tố JQuery.

Lý do được trích dẫn thường xuyên nhất để sử dụng CSS cho hoạt hình là tăng tốc phần cứng. Nghe có vẻ ngon, phải không? Hãy để chia nhỏ nó thành hai phần:“hardware acceleration”. Sounds yummy, right? Let’s break it down into two parts:

Sự tham gia của GPU

GPU được tối ưu hóa cao cho các tác vụ như di chuyển pixel xung quanh và áp dụng ma trận biến đổi và độ mờ, do đó, các trình duyệt hiện đại cố gắng giảm tải các tác vụ đó từ CPU vào GPU. Bí mật là cách ly các yếu tố hoạt hình lên các lớp GPU của riêng họ bởi vì một khi một lớp được tạo ra (miễn là các pixel bản địa của nó thay đổi), nó tầm thường để GPU di chuyển các pixel đó xung quanh và kết hợp chúng lại với nhau. Thay vì tính toán từng pixel 60 lần mỗi giây, nó có thể tiết kiệm các khối pixel (dưới dạng các lớp) và chỉ nói rằng di chuyển mà chunk 10 pixel trên và 5 pixel xuống (hoặc bất cứ điều gì).

Lưu ý bên lề: Nó không khôn ngoan khi cung cấp cho mọi yếu tố của riêng mình vì GPU có bộ nhớ video hạn chế. Nếu bạn chạy ra ngoài, mọi thứ sẽ chậm lại.

Tuyên bố hình ảnh động của bạn trong CSS cho phép trình duyệt xác định các yếu tố nào sẽ có được các lớp GPU và chia chúng theo đó phù hợp. Siêu.

Nhưng bạn có biết bạn cũng có thể làm điều đó với JavaScript không? Đặt biến đổi với đặc tính 3D (như translate3d() hoặc matrix3d()) kích hoạt trình duyệt để tạo một lớp GPU cho phần tử đó. Vì vậy, việc tăng tốc độ GPU không chỉ dành cho hoạt hình CSS - hoạt hình JavaScript cũng có thể có lợi! Setting a transform with a 3D characteristic (like translate3d() or matrix3d()) triggers the browser to create a GPU layer for that element. So the GPU speed boost is not just for CSS animations – JavaScript animation can benefit too!

Cũng lưu ý rằng không phải tất cả các thuộc tính CSS đều nhận được GPU Boost trong hoạt hình CSS. Trong thực tế, hầu hết don don. Biến đổi (tỷ lệ, xoay, dịch thuật và độ lệch) và độ mờ là những người thụ hưởng chính. Vì vậy, don chỉ cho rằng nếu bạn làm động với CSS, mọi thứ một cách kỳ diệu đều có GPU. Điều đó chỉ đơn giản là đúng sự thật.

Giảm tải tính toán cho một luồng khác

Phần khác của gia tốc phần cứng của Cameron phải làm với việc có thể sử dụng một luồng CPU khác để các tính toán liên quan đến hoạt hình. Một lần nữa, điều này nghe có vẻ tuyệt vời trong lý thuyết nhưng nó không đến mà không có chi phí, và các nhà phát triển thường đánh giá quá cao những lợi ích.

Trước hết, chỉ các thuộc tính don don ảnh hưởng đến luồng tài liệu thực sự có thể được chuyển xuống một luồng khác. Vì vậy, một lần nữa, biến đổi và độ mờ là những người thụ hưởng chính. Khi bạn xoay chuyển các chủ đề khác, trên không có liên quan đến việc quản lý quy trình đó. Vì kết xuất đồ họa và bố cục tài liệu ăn hết các tài nguyên xử lý nhất (cho đến nay) trong hầu hết các hình ảnh động (không tính toán các giá trị trung gian của thanh thiếu niên thuộc tính), lợi ích của việc sử dụng một luồng riêng để nội suy là tối thiểu. Ví dụ: nếu 98% công việc trong một hoạt hình cụ thể là kết xuất đồ họa và bố cục tài liệu, và 2% đang tìm ra vị trí mới/xoay/độ mờ/bất kỳ giá trị nào, ngay cả khi bạn tính toán chúng nhanh hơn 10 lần, bạn chỉ sẽ Xem tổng thể tăng tốc độ 1%.by FAR) in most animations (not calculating the intermediate values of property tweens), the benefit of using a separate thread for interpolation is minimal. For example, if 98% of the work during a particular animation is graphics rendering and document layout, and 2% is figuring out the new position/rotation/opacity/whatever values, even if you calculated them 10 times faster, you’d only see about a 1% speed boost overall.

So sánh hiệu suất

Bài kiểm tra ứng suất bên dưới tạo ra một số lượng một số phần tử hình ảnh (dấu chấm) nhất định và hoạt hình chúng từ trung tâm đến các vị trí ngẫu nhiên xung quanh các cạnh bằng cách sử dụng độ trễ ngẫu nhiên, tạo hiệu ứng Starfield. Crank tăng số lượng chấm và xem cách so sánh jQuery, GSAP và Zepto. Vì Zepto sử dụng các chuyển đổi CSS cho tất cả các hình ảnh động của nó, nên nó sẽ hoạt động tốt nhất, phải không?

Xem bài kiểm tra tốc độ bút: GSAP vs Zepto (CSS chuyển tiếp) vs jQuery của Greensock (@Greenock) trên Codepen

Kết quả xác nhận những gì được báo cáo rộng rãi trên Web - hoạt hì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à trình duyệt tôi đã thử nghiệm, GSAP dựa trên JavaScript thậm chí còn hoạt động tốt hơn hoạt hình CSS (bằng một biên độ rộng trong một số trường hợp, như trên Microsoft Surface RT GSAP có thể nhanh hơn ít nhất 5 lần so với các chuyển đổi CSS được tạo bởi Zepto và trên các biến đổi iPad 3 iOS7 nhanh hơn đáng kể khi hoạt hình với GSAP thay vì chuyển đổi CSS):the JavaScript-based GSAP performed even better than CSS animations (by a wide margin in some cases, like on the Microsoft Surface RT GSAP was probably at least 5 times faster than the CSS transitions created by Zepto, and on the iPad 3 iOS7 transforms were significantly faster when animated with GSAP instead of CSS transitions):

Chính xác là bao nhiêu tốt hơn? Phiên bản gốc của bài kiểm tra có một bộ đếm khung hình mỗi giây cho kết quả có thể định lượng được, nhưng nó nhanh chóng trở nên rõ ràng rằng không có cách nào thực sự chính xác để đo FPS trên các trình duyệt, đặc biệt là với hình ảnh động CSS và một số trình duyệt nhất định đã báo cáo các số sai lệch, vì vậy tôi đã xóa nó. Tuy nhiên, bạn có thể dễ dàng đánh giá hiệu suất tương đối bằng cách tăng số lượng chấm, chuyển đổi giữa các động cơ và xem cách mọi thứ thực hiện (chuyển động trơn tru, thời gian ổn định và phân tán chấm, v.v.). Rốt cuộc, mục tiêu là để có hình ảnh động trông đẹp.

Những điều thú vị cần lưu ý:

• Khi hoạt hình trên cùng/trái/chiều rộng/chiều cao (các thuộc tính ảnh hưởng đến luồng tài liệu), JavaScript nhanh hơn trên bảng (GSAP, không phải jQuery).
• Một vài thiết bị dường như được tối ưu hóa cao cho các biến đổi trong khi các thiết bị khác xử lý hình ảnh động trên/trái/chiều rộng/chiều cao tốt hơn. Đáng chú ý nhất, iOS6 cũ hơn nhiều với các biến đổi được định hình CSS, nhưng flip flip mới hơn và bây giờ chúng chậm hơn đáng kể (tôi đã viết blog về nó ở đây).
• Có một độ trễ đáng kể trong khởi động hoạt hình ban đầu với hoạt hình CSS khi trình duyệt tính toán các lớp và tải dữ liệu lên GPU. Điều này cũng áp dụng cho các biến đổi 3D dựa trên JavaScript, do đó, tăng tốc GPU của GPU không có chi phí riêng.
• Dưới áp lực nặng, các chuyển đổi CSS có nhiều khả năng phun ra trong các dải/vòng (điều này dường như là một vấn đề đồng bộ hóa/lập lịch, có thể là do chúng được quản lý trong một luồng khác).
• Trong một số trình duyệt (như Chrome), khi có một số lượng rất cao hoạt hình, nó đã giết chết hoàn toàn sự mờ nhạt của văn bản, nhưng chỉ khi sử dụng hoạt hình CSS!

Mặc dù JavaScript được tối ưu hóa tốt thường nhanh như vậy nếu không nhanh hơn hoạt hình CSS, các biến đổi 3D có xu hướng nhanh hơn khi hoạt hình với CSS, nhưng điều đó có liên quan nhiều đến cách trình duyệt xử lý ma trận 16 phần tử ngày nay (buộc chuyển đổi từ số vào một chuỗi được nối và trở lại số). Hy vọng rằng sẽ thay đổi, mặc dù. Trong hầu hết các dự án trong thế giới thực, dù sao bạn cũng không bao giờ nhận thấy sự khác biệt về hiệu suất.

Tôi đã khuyến khích bạn thực hiện thử nghiệm của riêng bạn để xem công nghệ nào mang lại hình ảnh động mượt mà nhất trong (các) dự án cụ thể của bạn. Don Tiết mua huyền thoại rằng hoạt hình CSS luôn nhanh hơn, và cũng không cho rằng bài kiểm tra tốc độ ở trên phản ánh những gì bạn đã thấy trong các ứng dụng của mình. Kiểm tra, kiểm tra, kiểm tra.

Điều khiển thời gian chạy và sự kiện

Một số trình duyệt cho phép bạn tạm dừng/tiếp tục hoạt hình KeyFrames CSS, nhưng đó là về nó. Bạn không thể tìm kiếm một vị trí cụ thể trong hoạt hình, bạn cũng không thể đảo ngược một cách trơn tru một phần thông qua hoặc thay đổi thang thời gian hoặc thêm các cuộc gọi lại tại một số điểm nhất định hoặc liên kết chúng với một bộ các sự kiện phát lại phong phú. JavaScript cung cấp quyền kiểm soát tuyệt vời, như đã thấy trong bản demo dưới đây.

Xem Bút không thể với CSS: Điều khiển bởi Greensock (@Greensock) trên Codepen

Hoạt hình hiện đại rất gắn liền với tính tương tác, vì vậy nó cực kỳ hữu ích để có thể làm động từ các giá trị bắt đầu thay đổi sang các giá trị kết thúc thay đổi (có thể dựa trên nơi người dùng nhấp vào) hoặc thay đổi mọi thứ trên đường nhưng CSS khai báo nhưng khai báo -hoạt hình dựa trên không thể làm điều đó.

Quy trình làm việc

Đối với các chuyển đổi đơn giản giữa hai trạng thái (tức là các menu mở rộng hoặc mở rộng menu, v.v.), các chuyển đổi CSS là rất lớn. Tuy nhiên, để giải trình tự mọi thứ, bạn thường cần sử dụng hình ảnh động của CSS KeyFrame, buộc bạn phải xác định mọi thứ theo tỷ lệ phần trăm, như:

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  30% {
    opacity: 1;
    transform: translate(0, 0);
  }
  60% {
    transform: translate(100px, 0);
  }
  100% {
    transform: translate(100px, 100px);
  }
}
#box {
   animation: myAnimation 2.75s;
}

Nhưng khi bạn hoạt hình, bạn có nghĩ về thời gian hơn là tỷ lệ phần trăm không? Giống như Fade Fade lên độ mờ trong 1 giây, sau đó trượt sang phải trong 0,75 giây và bật xuống một phần còn lại 1 giây sau đó. Điều gì xảy ra nếu bạn dành hàng giờ để tạo ra một chuỗi phức tạp theo tỷ lệ phần trăm, và sau đó khách hàng nói rằng, làm cho phần đó trong 3 giây dài hơn? Ouch. Bạn cần phải tính toán lại tất cả các tỷ lệ phần trăm!time rather than percentages? Like “fade up the opacity for 1 second, then slide to the right for 0.75 seconds, and bounce down to a rest 1 second later”. What happens if you spend hours crafting a complicated sequence in percentages, and then the client says “make that part in the middle 3 seconds longer”? Ouch. You’d need to recalculate ALL of the percentages!

Thông thường xây dựng hoạt hình liên quan đến rất nhiều thử nghiệm, đặc biệt là với thời gian và giảm bớt. Đây thực sự là nơi một phương pháp seek() sẽ khá hữu ích. Hãy tưởng tượng xây dựng một tác phẩm hoạt hình 60 giây và sau đó là 5 giây cuối cùng; Bạn sẽ cần phải ngồi qua 55 giây đầu tiên mỗi khi bạn muốn xem kết quả chỉnh sửa của mình đến phần cuối cùng. Kinh quá. Với phương pháp seek(), bạn có thể bỏ nó vào vị trí trong quá trình sản xuất để bỏ qua phần mà bạn đang làm việc, và sau đó loại bỏ nó khi bạn hoàn thành. Tiết kiệm thời gian lớn.

Nó ngày càng trở nên phổ biến đối với các đối tượng dựa trên Canvas và các đối tượng thư viện bên thứ 3 khác nhưng không may là hình ảnh động CSS chỉ có thể nhắm mục tiêu các yếu tố DOM. Điều đó có nghĩa là nếu bạn đầu tư nhiều thời gian và năng lượng vào hoạt hình CSS, thì nó đã giành được dịch cho các loại dự án khác. Bạn phải chuyển đổi bộ công cụ hoạt hình.

Có một vài tiện ích liên quan đến quy trình công việc bị thiếu trong hoạt hình CSS:

• Giá trị tương đối. Giống như Animate Animate, vòng quay 30 độ nữa, hoặc di chuyển phần tử xuống 100px từ nơi đó là khi hoạt hình bắt đầu.. Like “animate the rotation 30 degrees more” or “move the element down 100px from where it is when the animation starts”.
• Làm tổ. Hãy tưởng tượng việc có thể tạo ra các hình ảnh động có thể được lồng vào một hoạt hình khác mà bản thân nó có thể được lồng, v.v ... Hãy tưởng tượng việc kiểm soát hoạt hình chính trong khi mọi thứ vẫn được đồng bộ hóa hoàn hảo. Cấu trúc này sẽ thúc đẩy mã mô đun hóa dễ sản xuất và duy trì hơn nhiều.. Imagine being able to create animations that can get nested into another animation which itself can be nested, etc. Imagine controlling that master animation while everything remains perfectly synchronized. This structure would promote modularized code that is much easier to produce and maintain.
• Báo cáo tiến độ. Là một hoạt hình cụ thể đã hoàn thành? Nếu không, chính xác thì nó ở đâu về tiến trình của nó?. Is a particular animation finished? If not, exactly where is it at in terms of its progress?
• Mục tiêu giết chết. Đôi khi, nó cực kỳ hữu ích để tiêu diệt tất cả các hình ảnh động đang ảnh hưởng đến quy mô của một phần tử (hoặc bất kỳ thuộc tính nào bạn muốn), trong khi cho phép phần còn lại tiếp tục.. Sometimes it’s incredibly useful to kill all animations that are affecting the “scale” of an element (or whatever properties you want), while allowing the rest to continue.
• Mã ngắn gọn. Hoạt hình KeyFrame của CSS là một dòng chảy ngay cả khi bạn không có yếu tố trong tất cả các phiên bản dự phòng dự phòng cần thiết. Bất cứ ai đã thử xây dựng một cái gì đó thậm chí phức tạp vừa phải sẽ chứng thực rằng thực tế là hoạt hình CSS nhanh chóng trở nên cồng kềnh và khó sử dụng. Trên thực tế, khối lượng CSS cần thiết để hoàn thành các tác vụ hoạt hình có thể vượt quá trọng lượng của thư viện JavaScript (dễ dàng hơn để lưu trữ và sử dụng lại trên nhiều hình ảnh động).. CSS keyframe animations are verbose even if you don’t factor in all the redundant vendor-prefixed versions necessary. Anyone who has tried building something even moderately complex will attest to the fact that CSS animations quickly get cumbersome and unwieldy. In fact, the sheer volume of CSS necessary to accomplish animation tasks can exceed the weight of a JavaScript library (which is easier to cache and reuse across many animations).

Hiệu ứng hạn chế

Bạn có thể thực sự làm bất kỳ điều nào sau đây với hình ảnh động CSS:

• Animate dọc theo một đường cong (giống như một con đường bezier).
• Sử dụng các độ giãn thú vị như đàn hồi hoặc nảy hoặc dễ dàng. Có một tùy chọn cubic-bezier(), nhưng nó chỉ cho phép 2 điểm kiểm soát, do đó, nó khá hạn chế.
• Sử dụng các loại khác nhau cho các thuộc tính khác nhau trong hoạt hình KeyFrame CSS; Việc giảm bớt áp dụng cho toàn bộ khung chính.
• Chuyển động dựa trên vật lý. Ví dụ, việc búng và lại dựa trên động lượng mượt mà được thực hiện trong bản demo có thể kéo dài này.
• Làm động vị trí cuộn
• Xoay hướng định hướng (như là Animate Animate đến chính xác 270 độ theo hướng ngắn nhất, theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ).
• Thuộc tính động.

Khả năng tương thích

Hoạt hình dựa trên CSS không hoạt động trong IE9 và trước đó. Hầu hết chúng ta ghét hỗ trợ các trình duyệt cũ hơn (đặc biệt là IE), nhưng thực tế là một số người trong chúng ta có những khách hàng yêu cầu hỗ trợ đó.IE9 and earlier. Most of us hate supporting older browsers (especially IE), but the reality is that some of us have clients who require that support.

Tiền tố trình duyệt là cần thiết cho nhiều trình duyệt, nhưng bạn có thể tận dụng các công cụ tiền xử lý để tránh phải viết chúng theo cách thủ công.

Sự kết luận

Có phải hoạt hình CSS có phải là xấu không? Chắc chắn là không rồi. Trên thực tế, họ rất tuyệt vời cho các chuyển đổi đơn giản giữa các trạng thái (như Rollover) khi khả năng tương thích với các trình duyệt cũ hơn là không cần thiết. Các biến đổi 3D thường hoạt động rất tốt (iOS7 là một ngoại lệ đáng chú ý) và hình ảnh động CSS có thể rất hấp dẫn đối với các nhà phát triển thích đặt tất cả các hoạt hình và logic trình bày của họ vào lớp CSS. Tuy nhiên, hoạt hình dựa trên JavaScript mang lại sự linh hoạt hơn nhiều, quy trình làm việc tốt hơn cho các hoạt hình phức tạp và tính tương tác phong phú, và nó thường hoạt động nhanh như vậy (hoặc thậm chí nhanh hơn) so với hoạt hình dựa trên CSS mặc dù bạn có thể nghe thấy.far more flexibility, better workflow for complex animations and rich interactivity, and it often performs just as fast (or even faster) than CSS-based animation despite what you may have heard.

Khi so sánh với jQuery.animate(), tôi có thể hiểu tại sao hoạt hình CSS lại hấp dẫn. Ai trong tâm trí đúng đắn của họ sẽ nhảy vào cơ hội để có được một hiệu suất tăng gấp 10 lần? Nhưng nó không còn là sự lựa chọn giữa hình ảnh động của JQuery và CSS; Các công cụ dựa trên JavaScript như GSAP mở ra các khả năng hoàn toàn mới và xóa sạch khoảng cách hiệu suất.

Bài viết này không phải là về GSAP hoặc bất kỳ thư viện cụ thể nào; Vấn đề là hoạt hình dựa trên JavaScript không xứng đáng với tiếng xấu. Trên thực tế, JavaScript là lựa chọn duy nhất cho một hệ thống hoạt hình thực sự mạnh mẽ, linh hoạt. Thêm vào đó, tôi muốn làm sáng tỏ những phần bực bội của hoạt hình CSS (mà dường như không ai nói đến) để cuối cùng bạn có thể đưa ra quyết định sáng suốt hơn về cách bạn làm động trong trình duyệt.

Các hình ảnh động web sẽ giải quyết mọi thứ?

W3C đang làm việc trên một thông số kỹ thuật mới có tên Web Animations nhằm mục đích giải quyết rất nhiều thiếu sót trong các hoạt hình CSS và chuyển đổi CSS, cung cấp các điều khiển thời gian chạy tốt hơn và các tính năng bổ sung. Nó chắc chắn có vẻ như là một bước tiến theo nhiều cách, nhưng nó vẫn có những thiếu sót (một số trong đó có lẽ không thể vượt qua do nhu cầu hỗ trợ di sản của các thông số kỹ thuật CSS hiện có, vì vậy, ví dụ, điều khiển thành phần biến đổi độc lập là không thể). Đó là một bài viết hoàn toàn khác, mặc dù. Chúng tôi sẽ phải chờ xem mọi thứ kết hợp với nhau như thế nào. Chắc chắn có một số người thông minh làm việc trên thông số kỹ thuật.

Là CSS

Là tốt hơn để sử dụng CSS hoặc JavaScript?

Tôi nên làm động với JavaScript hay CSS?

JavaScript có tốt cho hoạt hình không?