jQuery fadeIn(), fadeOut() verursachen drastische Leistungseinbußen

Question

Ich implementierte eine Ladeanzeige (eine animierte .svg) mit fadeIn und fadeOut, um es auf einer Seite anzuzeigen/auszublenden, die auch eine animierte Leinwand hat, und es gibt eine erhebliche Während diese Vorgänge ausgeführt werden, sinkt die Leistung meiner Arbeitsfläche, was sogar dazu führt, dass ein bestimmter mobiler Browser zum Absturz gebracht wird.

Ich änderte es einfach show() und hide() das Element, und es gibt kein Problem, außer es sieht nicht ganz so schön aus.

Frage mich nur, ob jemand anderes solche Leistungsprobleme bemerkt hat, und ob es vielleicht eine alternative Möglichkeit gibt, meinen Indikator ein-/auszublenden? Vielen Dank!

Answer 1

JQuerys Animationsroutinen sind alle sehr "pessimistisch" in ihrer Implementierung. Sie verwenden Timer, um die Deckkraft im DOM Frame für Frame explizit festzulegen. Dies führt dazu, dass der Browser Neuzeichnungen erzwingt. Dies geschieht aus historischen Gründen, weil CSS-Übergänge nicht immer vorhanden waren und es die einzige Möglichkeit war, diese Effekte zu erreichen.

Jetzt ist eine effizientere Möglichkeit, den Browser die meiste Arbeit mit CSS-Übergängen zu machen. Anstatt JQuery das Fading zuzulassen, verwenden Sie es einfach, um eine Klasse anzuwenden. Der Browser kümmert sich um den Übergang zwischen den beiden Zuständen.

Die meisten Browser können die Opazität beschleunigen und Übergänge mithilfe der GPU transformieren.

setTimeout(function() { 
 
    $('.fader').addClass('show'); 
 
    
 
    $('.fader').on('click', function() { 
 
    $(this).removeClass('show'); 
 
    }); 
 
});

.fader { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: cornflowerblue; 
 
    
 
    opacity: 0; 
 
    transition: opacity 2s linear; 
 
} 
 

 
.show { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fader">I'll fade in, click me to fade out</div>

In dem obigen Beispiel wird die setTimeout() verwendet das DOM einen Rahmen zu geben, die mit der <div>fader Klasse mit einem opacity von 0 auszuarbeiten. Im nächsten Rahmen wendet es die Klasse show an, die opacity auf 1 setzt. Da die transition 2 Sekunden lang ist, wird es langsam verblassen.

Ich fügte auch ein Klickereignis, das die show Klasse entfernt und es wird langsam wieder verschwinden.