放棄使用jQuery實現動畫
在 Web開發的圈子里，開發者常常認為CSS動畫是一種高性能web動畫技術，如果想讓網頁加載的更快一些，就應該用純CSS動畫。其實這種觀點是錯誤的， 很多開發者早就放棄了javascript的動畫，迫使自己使用復雜的CSS樣式來實現相同效果的UI交互。他們完全忽視了javascript帶來的更 好的交互性。
但事實是基于javascript的動畫效果通常和基于css的動畫一樣快，有些甚至更快一些。CSS動畫通常被覺得比較快，因為我們總是拿它和jQuery動畫相比，其實慢的是jQuery的$.animate()，然而javascript的動畫庫避免了DOM操作，常常比jQuery快20倍左右。
所以，讓我們一起粉碎那個謠言，寫一些真實的例子，來評估一下javascript動畫的性能。
為什么要使用JavaScript?
把屬性轉換到樣式中的時候用CSS非常方便，而且在不使用其它庫的情況下，它們也能提供出色的表現。但是當你使用CSS來實現復雜的設計時，它們變的非常麻煩。
總而言之，CSS一定會限制你的設計。但是如果你使用javascript，就可以從邏輯上解決這些問題。javascript的動畫引擎提供如下功能：
- 跨瀏覽器的 SVG 支持
- 基于物理學的動畫加載
- 時間軸控制,
- Bezier translations
提示：如果你對javascript的展示效果比較感興趣，可以讀一下Julian Shapiro的 “CSS vs. JS Animation: Which Is Faster?”和Jack Doyle的 “Myth Busting: CSS Animations vs. JavaScript.” 。如果想看一些演示，可以看看 performance pane 和 “Library Speed Comparison” 。
Velocity 和 GSAP
兩個最常用的javascript動畫庫是 Velocity.js 和 GSAP。這些庫在使用jQuery的時候并沒有性能損耗，因為它們都沒有使用jQuery的動畫棧。
如果你在頁面中必須使用jQuery，你可以用Velocity和GSAP來代替你的jQuery $.animate()。比如
- $element.animate({ opacity:0.5});
可以寫成：
- $element.velocity({ opacity:0.5}).
這兩個庫也當然也可以在沒有jQuery的時候使用：
- /* Working without jQuery */
- Velocity(element,{ opacity:0.5},1000);// Velocity
- TweenMax.to(element,1,{ opacity:0.5});// GSAP
像上面的例子一樣，即全不使用jQuery，Velocity也保留了和jQuery的$.animate()類似的語法。
GSAP和它相反，通過面向對象的設計，更方便了對靜態方法的調用。你可以對動畫進行全面的控制。
在這兩種解決方案中，你都不會用到jQuery的對象元素，但是如果是要操作原始的DOM結點呢？你可以通過
- document.getElementByID
- document.getElementsByTagName
- document.getElementsByClassName
- document.querySelectorAll
這些類似于jQuery’s selector的實現。下面我們會對這些方法進行簡單的介紹。
杜絕jQuery
提示：如果你需要了解jQuery的$.animate()，可以看看 Velocity’s documentation.。
讓我們看看querySelectorAll的功能：:
- document.querySelectorAll("body");// Get the body element
- document.querySelectorAll(".squares");// Get all elements with the "square" class
- document.querySelectorAll("div");// Get all divs
- document.querySelectorAll("#main");// Get the element with an id of "main"
- document.querySelectorAll("#main div");// Get the divs contained by "main"
向代碼展示的一樣，你可以通過querySelectorAll簡單的進行對CSS的選擇。它會在數組中返回所有匹配的元素：
- /* Get all div elements. */
- var divs = document.querySelectorAll("div");
- /* Animate all divs at once. */
- Velocity(divs,{ opacity:0.5},1000);// Velocity
- TweenMax.to(divs,1,{ opacity:0.5});// GSAP
因為我們沒有使用jQuery的對象元素，你可能會好奇我們應該怎么把動畫鏈接起來，其實我們可以這樣做：
- $element // jQuery element object
- .velocity({ opacity:0.5},1000)
- .velocity({ opacity:1},1000);
在 Velocity中，你可以像這樣簡化你的代碼：
- /* These animations automatically chain onto one another. */
- Velocity(element,{ opacity:0.5},1000);
- Velocity(element,{ opacity:1},1000);
這樣來處理動畫就不會存在性能上的浪費。你會發現它javascript的性能真的和CSS差不多，而且操作更方便。
極客標簽 - 專業和精準的分享，關注你感興趣的極客，社區提供超棒的精品教程，互動授課
原文來自：放棄使用jQuery實現動畫