Ich versuche, die besten Praktiken in Bezug auf die Leistung herauszufinden, wenn mehrere DIVs mit einer unglaublichen Rate erstellt werden. Zum Beispiel bei jedem .mousemove-Ereignis ...
%Vor%So funktioniert das alles nett und dandy, aber es ist mega ineffizient (besonders wenn ich versuche, den Abstand zwischen jeder Mausbewegungsposition zu füllen). Hier ist ein Beispiel ...
%Vor%
Ich kann wirklich nicht herausfinden, wie man Dinge verbessert. Glauben Sie mir, ich habe versucht zu recherchieren, aber es hat nicht viel Gutes getan ... Was ich suche, sind einige Vorschläge, Beispiele oder Links zu besseren Praktiken ...
Bitte beachten Sie, dass ich mir selbst Code unterrichte. Ich bin ein Graphic Design Student und so verbringe ich meinen Sommer außerhalb des Unterrichts ... Ich mache kleine Projekte, um mir selbst JavasSript beizubringen, lustige Sachen :)
Mausspur, mehr Elemente - Sehr Sehr langsam
Mausspur, weniger Elemente - Sehr langsam
Mausspur, Bare Bones - Langsam
Es gibt mehrere schlechte Praktiken, die hier ablaufen:
Das Hauptproblem hier ist die Verwendung von Elementen anstelle von Canvas. Nach der Korrektur sollte die Interaktion mit DOM minimal werden behebe auch die anderen Punkte.
Auch diejenigen, die behaupten, dass das funktioniert, haben ihre CPU-Auslastung nicht überprüft. Auf meinem Core I5-2500K ist ein Kern sofort ausgereizt, was lächerlich und inakzeptabel ist für etwas Triviales wie das Rendern einer Mausspur auf dem Bildschirm. Ich kann mir sehr gut vorstellen, dass das auf einem älteren Computer sehr langsam ist. Also ja, es ist glatt, aber auf Kosten der Menge an Ressourcen genug für 10-20 + Tabs, um das gleiche richtig zu machen.
Das dauert 7-14% CPU für mich, wenn ich die Maus schnell herumbewege, das nimmt volle 25%.
Sie sollten darauf achten, keinen Reflow zu verursachen und nur an einem Repaint zu haften. - & gt; Wann findet Reflow in einer DOM-Umgebung statt?
> Das Erstellen von <div> s ist also keine Option. - Aber du musst nicht:)
Erstellen Sie einfach so viele <div> s, wie Sie in Zukunft benötigen, und positionieren Sie sie dann neu. Wenn Sie sie in einem Array haben, benötigen Sie nur eine Ganzzahl, die auf die aktuellste zeigt, und bei jeder Mausbewegung würden Sie diesen Wert erhöhen (auf 0 setzen, sobald die Array-Länge erreicht ist) und die <div> neu positionieren. Darauf wird durch diese Nummer hingewiesen.
Tags und Links javascript html jquery performance function