2015-08-19 25 views
6

Bir Ember.js uygulamasının eski bir gif döndürücüsünü yeni bir SVG/CSS çevirici ile değiştiriyorum.SVG/CSS çeviricinin performansını artırın

http://codepen.io/FezVrasta/pen/pJXovM

Ve bu CSS ile yükleyebilirsiniz: Projemi .svg olarak kaydedilir üzerinde

Bu

, eğiren

background:  no-repeat center; 
background-image: url(../images/spinner.svg); 
background-size: 65px 65px; 

sorundur benim ember.js uygulaması olduğunu Spinner gösteriliyor iken çok sayıda hesaplama yapar ve bu spinner gecikme yapar.

b64.io kullanarak base64'deki svg'yi kodlamayı denedim, ancak tek kazanç yükleme süresidir, performans aynıdır.

Gördüğünüz gibi zaten rotate yerine rotate3d kullanarak GPU kullanmayı denedim, ancak herhangi bir performans artışı almadım.

Akışkanlığını iyileştirmek için herhangi bir öneri var mı? İyi uygulamalar, püf noktaları, vb.

+1

Emin değilim, ancak özel SVG animasyonuna geçebilir misiniz? (bkz. örneğin: https://css-tricks.com/guide-svg-animations-smil/ ve https://css-tricks.com/svg-animation-on-css-transforms/) – RobAu

+0

Bulunamadı SMIL bile CSS :( –

+0

@RobAu performans hakkında herhangi bir bilgi performans yeterince iyi değil http://codepen.io/FezVrasta/pen/oXrgdR?editors=100 –

cevap

0

Buradaki sorun, neredeyse kesinlikle, spinner ile değil, Ember.js uygulamasıyla ilgilidir.

Ember uygulamasında gecikme nedenini anlamak için bazı profiling tools ile kendinizi tanımaya çalışacağım. Uygulamanızın performansını iyileştirmek için atabileceğiniz adımlar olduğundan eminim!

İlgili konular