Schlüsselpunkte
transform und opacity optimiert wurden. will-change -attribut zu ihren eigenen Ebenen beworben werden. Dies sollte jedoch mit Vorsicht erfolgen, da es Speicher und Verwaltung erfordert. requestAnimationFrame durch setTimeout/setInterval, um das Verzögerungsrisiko zu verringern und glattere Animationen zu gewährleisten, da diese Methode den Animationscode zum besten Zeitpunkt für den Browser ausführt. Die Rolle der Webanimation hat sich von einfachen dekorativen Effekten zu bestimmten Rollen in der Benutzererfahrung entwickelt - beispielsweise visuelle Feedback, wenn Benutzer mit Ihrer Anwendung interagieren und Benutzer dazu führen, sich zu konzentrieren, um die Ziele der Anwendung zu erreichen, visuelle Tipps zur Unterstützung bieten, um zu helfen Benutzer verstehen die Anwendungsschnittstelle usw.
Um sicherzustellen, dass Webanimationen für diese kritischen Aufgaben kompetent sind, ist es wichtig, dass die Bewegung zum richtigen Zeitpunkt reibungslos durchgeführt werden muss .
schlechtes Animationsdesign kann zu einem nervigen Effekt führen - Jank, der von Jankfree.org erklärt wird:
moderne Browser versuchen, den Inhalt synchron mit der Aktualisierungsrate des Geräts auf dem Bildschirm zu aktualisieren. Für die meisten Geräte heute aktualisiert der Bildschirm 60 Mal pro Sekunde oder 60 Hz. Wenn auf dem Bildschirm einige Bewegungen vorhanden sind (z. B. Scrollen, Übergänge oder Animation), sollte der Browser 60 Frames pro Sekunde erstellen, um der Aktualisierungsrate zu entsprechen. Ein Stottern ist ein Stottern, Jitter oder eine einfache Pause, die ein Benutzer sieht, wenn eine Website oder eine Anwendung nicht mit der Aktualisierungsrate Schritt hält.
Wenn die Animation festsitzt, interagieren die Benutzer schließlich immer weniger mit Ihrer Anwendung, was sich negativ auf ihren Erfolg auswirkt. Offensichtlich will niemand das.
In diesem Artikel habe ich einige Leistungstipps gesammelt, um JavaScript -Animationsprobleme zu lösen und leichter 60 fps (Frames pro Sekunde) zu erreichen, um reibungslose Bewegung im Netzwerk zu ermöglichen.
1. ob Sie vorhaben, CSS -Übergang/CSS -Keyframes oder JavaScript für CSS -Eigenschaften zu verwenden, verstehen Sie, welche Eigenschaften die Seitengeometrie ändern können (Layout) - was bedeutet, dass die Position anderer Elemente auf der Seite neu berechnet werden muss, oder es wird werden. Zeichnen von Operationen beinhalten - das ist sehr wichtig. Layout- und Zeichnungsaufgaben sind für Browser sehr teuer, insbesondere wenn mehrere Elemente auf der Seite sind. Wenn Sie also vermeiden, dass Sie CSS -Eigenschaften animieren, die die Veröffentlichung oder Zeichnungsvorgänge auslösen und sich an Eigenschaften wie Bei CSS -Triggern finden Sie eine neueste Liste von CSS -Eigenschaften, die Informationen zu den Aktionen enthalten, die sie in jedem modernen Browser auslösen, einschließlich der ersten und nachfolgenden Änderungen. Ändern der CSS -Eigenschaften, die nur Synthesevorgänge auslösen, ist ein einfacher und effektiver Schritt, den Sie zur Optimierung der Webanimationsleistung unternehmen können. 2.
Wenn sich das zu animierte Element in seiner eigenen Synthesizer -Ebene befindet, verwenden einige moderne Browser die Hardware -Beschleunigung, um die Arbeit in die GPU abzuladen. Wenn dies richtig verwendet wird, kann sich dies positiv auf die Leistung der Animation auswirken. Um ein Element auf seiner eigenen Ebene sitzen zu lassen, müssen Sie es aktualisieren. Eine Möglichkeit besteht darin, die CSS
Sie können mehr darüber erfahren, wie Sie
JavaScript -Animationen werden normalerweise mit oder
Ihr Code könnte so aussehen: Tim Evkos "Aufführung mit RequestAnimationFrame" auf SitePoint bietet eine großartige Video -Einführung in die Codierung mit 4.
Mit 60 Bildern pro Sekunde hat der Browser nur 16,67 ms pro Rahmen, um seine Arbeit zu erledigen. Es ist nicht viel Zeit, sodass Ihr Code optimiert wird, kann sich auf die Sprachausstattung Ihrer Animation auswirken. Entkopplungscode, mit dem Scrollen, Größe, Mausereignisse und andere Ereignisse aus dem Code übernommen werden, der
Der Browser verwendet den Haupt -Thread, um JavaScript sowie andere Aufgaben wie Stilberechnungen, Layouts und Zeichenvorgänge auszuführen. Der langjährige JavaScript-Code kann diese Aufgaben negativ beeinflussen, was dazu führen kann, dass Frames übersprungen und ein Animationsstottern verursachen. Die Vereinfachung Ihres Codes ist also definitiv eine gute Möglichkeit, um sicherzustellen, dass Ihre Animationen reibungslos ausgeführt werden.
Für komplexe JavaScript -Vorgänge, die keinen Zugriff auf die DOM erfordern, sollten Sie Web -Mitarbeiter verwenden. Ein Worker -Thread erledigt seine Aufgaben, ohne die Benutzeroberfläche zu beeinflussen. Die Entwickler-Tools des Browsers bieten eine Möglichkeit, die Schwierigkeit des Browsers zu überwachen, das Ihren JavaScript-Code oder Ihren Drittbibliotheken ausführt. Sie liefern auch praktische Informationen zu Bildraten und vielem mehr. Sie können auf Chrome Devtools zugreifen, indem Sie mit der rechten Maustaste auf der Webseite klicken und im Kontextmenü das Check auswählen. Wenn Sie beispielsweise Performance-Tools zum Aufzeichnen Ihrer Webseite verwenden
Klicken Sie auf die Schaltfläche "Aufzeichnung" und stoppen Sie die Aufzeichnung nach einigen Sekunden:
Diese Technik hängt speziell mit der Optimierung des HTML5 -Canvas -Codes zusammen. Wenn Ihr Rahmen komplexe Zeichenvorgänge beinhaltet, besteht eine gute Idee darin, alle Zeichnungsvorgänge einmal oder nur einmal bei Änderungen durchzuführen und dann nur die Off-Screen-Leinwand auf jedem Frame zu zeichnen. Sie finden detaillierte Informationen und Code -Beispiele und mehr zu diesem Tipp im Optimierungs -Canvas -Artikel von MDN. Schlussfolgerung optimieren Code -Leistung ist eine notwendige Aufgabe, wenn Sie den Erwartungen der Benutzer in das heutige Netzwerk nicht erfüllen möchten, aber keineswegs einfach ist. Es kann mehrere Gründe für Ihre schlechte Animationsleistung geben. Wenn Sie jedoch versuchen, die oben aufgeführten Tipps zu verwenden, machen Sie einen großen Schritt, um die häufigsten Animations -Performance -Fallen zu vermeiden und die Benutzererfahrung Ihrer Website oder App zu verbessern. FAQs (FAQ) auf JavaScript -Animationen ohne Verzögerungen "stotter" bezieht sich auf jede Stotter, Jitter oder einfache Pause, die ein Benutzer sieht, wenn eine Website oder Anwendung die Aktualisierungsrate nicht auf dem Laufenden halten. Bei JavaScript -Animationen können LAGs auftreten, wenn die Bildrate unter den Standard -60 -Bildern pro Sekunde liegt. Dies kann zu weniger reibungslosen Animationen und weniger visuell ansprechenden Animationen führen, was sich negativ auf die Benutzererfahrung auswirken kann. Um die JavaScript -Animation reibungslos zu machen, wird der Code optimiert, um stabile 60 Bilder pro Sekunde zu führen. Dies kann durch die Verwendung der Die CSS -Übergänge und -Animationen können effizienter als JavaScript sein, da sie vom Synthesizer -Thread des Browsers verarbeitet werden und vom Haupt -JavaScript -Thread getrennt sind. Dies bedeutet, dass der Hauptfaden, wenn er mit anderen Aufgaben beschäftigt ist, reibungslos laufen kann. Darüber hinaus können bestimmte Eigenschaften in CSS animiert werden, ohne neu zu zeichnen, was sie besonders effizient macht. Layout Jitter bezieht sich auf JavaScript, das wiederholt das Lesen und das Schreiben in das DOM bezieht, wodurch der Browser das Layout mehrmals neu berechnet wird, was zu ineffizienten und stotternden Animationen führt. Dies kann vermieden werden, indem DOM -Lesen und Schreiben von Operationen zusammengefügt werden. Zum Beispiel können Sie alle Lesevorgänge und dann alle Schreibvorgänge anstelle von verschachtelten Lesevorgängen und Schreibungen durchführen. -Regelin in CSS können Sie den Browser im Voraus informieren, welche Arten von Änderungen Sie möglicherweise am Element vornehmen möchten, damit er entsprechende Optimierungen festlegen kann, bevor es benötigt wird. Dies kann die Leistung der Animation erheblich verbessern. Verwenden Sie es jedoch mit Vorsicht, da der Browser zu viel Zeit optimiert. in
transform und opacity halten, werden Sie eine signifikante Verbesserung der Animationsleistung feststellen, da moderne Browser diese Attribute optimieren. 
will-change Es wird jedoch nicht empfohlen, dass Sie zu viele Elemente auf ihre eigenen Schichten heben oder dies influtig tun. Tatsächlich erfordert jede von einem Browser erstellte Ebene Speicher und Verwaltung, was teuer sein kann. will-change requestAnimationFrame codiert. setTimeout/setInterval
Der Code ist wie folgt: setInterval() Während dies funktioniert, ist das Risiko einer Verzögerung hoch, da die Rückruffunktion irgendwann im Rahmen ausgeführt wird, was am Ende zu einem oder mehreren Frames führen kann. Heute können Sie eine native JavaScript -Methode verwenden, die für reibungslose Webanimationen (DOM -Animationen, Leinwände usw.) entwickelt wurde, die als setTimeout() bezeichnet werden. var timer;
function animateElement() {
timer = setInterval(function() {
// 动画代码在此处
}, 2000);
}
// 要停止动画，请使用 clearInterval
function stopAnimation() {
clearInterval(timer);
}requestAnimationFrame()var timer;
function animateElement() {
timer = setInterval(function() {
// 动画代码在此处
}, 2000);
}
// 要停止动画，请使用 clearInterval
function stopAnimation() {
clearInterval(timer);
}requestAnimationFrame(). requestAnimationFrame() Für eine eingehende Diskussion dieses Optimierungstipps und des verwandten Beispielcodes finden Sie Paul Lewis 'Erstellen Sie schlankere, leistungsfähigere und schnellere Animationen mit RequestArimationFrame. 
Zu diesem Zeitpunkt sollten Sie über viele Daten verfügen, um die Leistung Ihrer Seite zu analysieren: 
Mit diesem Chrome Devtools -Leitfaden können Sie die Devtools optimal nutzen, um die Leistung und viele andere Arten von Daten in Ihrem Chrome -Browser zu analysieren. Wenn Chrome nicht Ihr Browser der Wahl ist, ist das in Ordnung, da die meisten modernen Browser heute mit leistungsstarken Devtools ausgestattet sind, mit denen Sie Ihren Code optimieren können. 
Was ist das Konzept des "Stotterns" in der JavaScript -Animation?
Wie kann ich reibungslose JavaScript -Animationen sicherstellen?
requestAnimationFrame -Methode erreicht werden, mit der der Browser Animationen optimieren kann. Sie können auch CSS -Übergänge oder Animationen für einfache Animationen verwenden, da diese im Allgemeinen effizienter sind als JavaScript. Zusätzlich wird Layout Jitter vermieden, indem die DOM -Leser- und Schreibvorgänge zusammengefügt werden.
requestAnimationFrame Was spielt seine Rolle bei der JavaScript -Animation? requestAnimationFrame -Methode in JavaScript ist ein wichtiges Tool zum Erstellen von reibungslosen Animationen. Es teilt dem Browser mit, dass die Animation ausgeführt werden soll, und fordert den Browser auf, die angegebene Funktion aufzurufen, um die Animation vor dem nächsten Repaint zu aktualisieren. Mit dieser Methode kann der Browser Animationen optimieren, was zu glatteren und effizienteren Animationen führt. Warum können CSS -Übergänge oder Animationen effizienter sein als JavaScript?
Was ist Layout -Jitter und wie kann man es in JavaScript -Animationen vermeiden?
Wie verwendet ich
Mit der will-change Attributoptimierungs -JavaScript -Animation? will-change
Was bedeutet die Eigenschaften und
und transform in JavaScript -Animationen? opacity
Die Eigenschaften transform CSS sind besonders effizient für Animationen. Dies liegt daran, dass Änderungen an diesen Eigenschaften ohne Layout oder Zeichnung mit dem Synthesizer -Thread des Browsers behandelt werden können. Dies bedeutet, dass sie reibungslos laufen können, auch wenn die Haupt -JavaScript -Threads beschäftigt sind. opacity
Webarbeiter in JavaScript können Sie Skripte im Hintergrund ausführen und vom Hauptausführungs -Thread getrennt. Dies bedeutet, dass sie rechenintensive Aufgaben erledigen können, ohne den Hauptfaden zu blockieren und Verzögerungen zu verursachen. Sie haben jedoch einige Einschränkungen, z. B. Unfähigkeit, auf die DOM oder einige Web -APIs zuzugreifen.
"Nicht-Main-Thread" bezieht sich auf das Ausführen einer Animation auf einem separaten Thread, das vom Haupt-JavaScript-Thread getrennt ist. Dies kann die Leistung der Animationen erheblich verbessern, da sie auch dann reibungslos laufen können, wenn der Hauptfaden besetzt ist. Dies kann durch Verwendung von CSS -Animationen, Webarbeitern oder Webanimationen -APIs erreicht werden.
Die Webanimationen -API bietet eine Möglichkeit, Animationen mit JavaScript zu erstellen, das ebenso effizient wie CSS -Animationen ausgeführt wird. Sie können Animationen direkt aus JavaScript steuern und manipulieren, wodurch Sie mehr Flexibilität als CSS -Animationen erhalten. Es handelt sich jedoch immer noch um eine experimentelle Technologie und wird von allen Browsern nicht vollständig unterstützt.
Das obige ist der detaillierte Inhalt von7 Performance-Tipps für jankfreie JavaScript-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So wechseln Sie auf dem Laptop in den abgesicherten Modus
Software für Immobilienverwaltungssysteme
Das neueste Ranking der Snapdragon-Prozessoren
Detaillierte Erklärung des Befehls arp
Was sind die Cloud-Betriebssysteme?
Die Hauptkomponenten von dhtml
Was soll ich tun, wenn meine Windows-Lizenz bald abläuft?
So definieren Sie ein Array
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
