資訊專欄INFORMATION COLUMN
摘要：下面我們分別對這兩種情況進行測試。測試重繪寫了兩個，都是改變的背景色實現(xiàn)實現(xiàn)測試結果如下左，右由于中，腳本運行占據(jù)了一定的時間，而幾乎全部開銷在頁面重繪上。這樣看來具有更好的性能。
既然 CSS3 和 jquery 都可以實現(xiàn)動畫， 那么到底哪中方式的執(zhí)行效率更高呢，我們簡單的來比較一下吧。
首先考慮一下，改變 DOM 樣式導致瀏覽器重繪有兩種方式，一種是單純的重繪，頁面布局沒有受到影響（如改變盒子的背景色，修改字體顏色，修改透明度...）；另外一種是在重繪之前會觸發(fā) Rendering（回流），也就是頁面布局受到了影響，需要重新布局，在重繪頁面。下面我們分別對這兩種情況進行測試。
測試重繪寫了兩個 DEMO，都是改變 div 的背景色：
CSS3 實現(xiàn)
jqeury 實現(xiàn)
測試結果如下（CSS3 左， jquery 右）：
由于 jquery 中，腳本運行占據(jù)了一定的CPU 時間，而 css3 幾乎全部開銷在頁面重繪上。 這樣看來 css3 具有更好的性能。
測試回流+重繪接下來這兩個 DEMO 效果是移動 DIV 的位置，這會導致瀏覽器觸發(fā) Rendering（回流），然后再進行重繪：
CSS3 實現(xiàn)
jquery 實現(xiàn)
測試結果如下（CSS3 左， jquery 右）：
可以看到，兩者沒有太打的區(qū)別。
結論通過上面兩個簡單的測試，可以得出一個結論，CSS3 同 jquery 在處理元素幾何屬性發(fā)生變化的動畫時，表現(xiàn)相當；但是在處理元素特性變換時 CSS3 的性能要好。
CSS3 動畫庫可以通過Animate.css 動畫庫獲取各種動畫特效，并且可以自定義需要的動畫效果列表。用 CSS3 動畫來代替 jquery UI 可以大大的提升網(wǎng)頁性能，如果你不打算考慮IE9-， 呵呵。
動畫庫測試 DEMO：http://codepen.io/CodingMonkeyzh/pen/gpLdPW
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92323.html
摘要：童鞋已經(jīng)造了個版本。這里很明顯，方案和方案可應對簡單場景如沒有回調等，方案可編程性最大，最靈活，可以適合復雜的動畫場景或者承受復雜的交互場景。主要是那上面的演示和傳統(tǒng)的直接操作的方式對比。注釋里已經(jīng)寫了這是優(yōu)化重點。 簡介 transformjs在非react領域用得風生水起，那么react技術棧的同學能用上嗎？答案是可以的。junexie童鞋已經(jīng)造了個react版本。 動畫實現(xiàn)方式 ...
摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發(fā)者只需要關心添加或者移除相關的動畫的便可以。 簡介 在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發(fā)的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的...
摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發(fā)者只需要關心添加或者移除相關的動畫的便可以。 簡介 在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發(fā)的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的...
閱讀 1875·2021-09-27 13:35
閱讀 3429·2019-08-30 14:16
閱讀 2483·2019-08-30 10:52
閱讀 859·2019-08-29 16:35
閱讀 1416·2019-08-29 15:22
閱讀 3641·2019-08-23 18:21
閱讀 3132·2019-08-23 18:00
閱讀 3123·2019-08-23 16:50
