前端效能最佳化：儘可能使用CSS動畫

日期：2013-7-4  來源：GBin1.com

網站設計對美觀特性和可配置元素動畫的大量需求，使得一些JavaScript類庫，如jQuery，MooTools大量的被使用。儘管現在瀏覽器支援CSS的transformation和keyframe所做的動畫，現在仍有很多人使用JavaScript製作動畫效果，但是實際上使用CSS動畫比起JavaScript驅動的動畫效率更高。CSS動畫同時 需要更少的代碼。很多的CSS動畫是用GPU處理的，因此動畫本身很流暢，當然你可以使用下面這個簡單的CSS強制使你的硬體加速：

.myAnimation {    animation: someAnimation 1s;    transform: translate3d(0, 0, 0); /* 強制硬體加速 */}

tansform:transform(0,0,0)在不會影響其他動畫的同時將通話送入硬體加速。在不支援CSS動畫的情況下（IE8及以下版本的瀏覽器），你可以引入JavaScript動畫邏輯：

<!--[if 低於IE8版本]><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="/js/ie-animations.js"></script><![endif]-->

在上例中，ie-animations.js檔案必須包含你自訂的jQuery代碼，用於當CSS動畫在早期IE中不被支援的情況下，來替代CSS動畫完成動畫效果。完美的通過CSS動畫來最佳化動畫，通過JavaScript來支援全域動畫效果。

在下一篇中，我們將介紹事件委託。關於CSS動畫的介紹，可以參考精品教程的CSS3系列教程之動畫。

相關閱讀：

• 前端效能最佳化：DocumentFragments或innerHTML取代複雜的元素注入
• 前端效能最佳化：高頻執行事件/方法的防抖
• 前端效能最佳化：網路儲存的靜態緩衝和非必要內容最佳化
• 前端效能最佳化：使用非同步載入，消極式載入依賴
• 前端效能最佳化：使用Array.prototype.join代替字串串連

via 極客社區

來源：前端效能最佳化：儘可能使用CSS動畫