Ich versuche zu verstehen, wie die Geschwindigkeit einer D3.js-Anwendung (eine interaktive Visualisierung von Daten) durch die Analyse der Schnittfensterdaten im Chrome Developer Tool verbessert werden kann.
Ich ziehe die Datenbalken herum, wobei sie bei Mausbewegungen verschoben werden (SVG-Transformationen).
Timeline sagt mir, dass 50% der CPU-Zeit von "anderen" Prozessen genutzt wird (der Rest ist "Scripting", "Rendering", "Painting" und "Idle").
Was genau ist "Andere" und was könnte das Problem sein, wenn es 50% der Zeit braucht?
Übrigens, wenn ich ziehe, indem ich die rechte Maustaste nicht gedrückt halte, ist die Antwort viel besser und "Andere" verwendet nur ungefähr 20% der Zeit.
Ich habe vor zwei Jahren dieselbe Frage gestellt. Ich wusste nicht, wofür die grauen Balken bzw. die Kategorie Other stehen.
Es war schwierig, eine offizielle Antwort zu finden, da Chrome DevTools Docs nur "Aktivitäten, die nicht von DevTools instrumentiert wurden" enthielt. Aber diese Aussage wurde entfernt, da es eine neue Dokumentation gibt.
Also habe ich das Chromium-Projekt ausgecheckt und den Devtools-Code nach einer Antwort durchsucht. Ich habe herausgefunden, dass die Kategorie Andere alle Aktivitäten enthält, die nicht zu den Kategorien Laden , Skripting , Rendern gehören. Malerei und GPU . Dies ist eine Liste aller Datensatztypen :
%Vor%Und vielleicht ist diese Stackoverflow-Frage hilfreich: Chrome Dev Tools: Zeitleiste - weiße Balken
Bearbeiten: Und hier finden Sie die Zuordnung der Satzarten zu einer Kategorie:
%Vor%Die Chromo Timeline zeigt alle Aufnahmetypen, die nicht zugewiesen sind oder der Kategorie Andere zugewiesen sind, als graue Balken in der Kategorie Andere an.
Tags und Links javascript profiling svg google-chrome d3.js