Mehrere requestAnimationFrame() ...problematisch?

[1unitedpower]

Hallo, bevor ich mich (noch tiefer?) ins Unglück stürze

Bei solchen Performance-Fragen muss man aber erstmal ins Unglück laufen. Es gibt eine goldene Regel in Sachen Optimierung, die sagt: Optimiere nicht, bis es zu spät ist. Der Grund dafür ist, dass man im Voraus einfach nicht wissen kann, wo sich später Optimierungs-Potenziale auftun. Du kannst ja nicht messen und vergleichen wo noch nichts ist. Es ist deshalb nicht ökonomisch auf Verdacht zu optimieren. Man programmiert die Anwendung erstmal einfach so sauber es nun mal geht. Im Anschluss kann man messen und zielgerichtet Performance-Engpasse wegoptimieren.

Ist es eigentlich prinzipiell zulässig [bzw. wohl eher ratsam] sowie Good Practice, mehrere requestAnimationFrame() parallel ablaufen zu lassen?

Klar ist das zulässig. Kleiner Tipp am Rande: Du meinst "konkurrierend" bzw. "asynchron" und nicht "parallel".

Oder sollten / müssen alle Repaint-Modifikationen in einem Callback zusammengefasst werden (welches dann mit einem requestAnimationFrame() ausgelöst wird)?

Nein, dafür gibt es im Allgemeinen keinen guten Grund. Es kann sein, dass sich nach einer Performance-Messung dafür im Einzelfall ein Grund ergibt.

(Lieber wäre es mir aus Gründen der Übersichtlichkeit doch die Variante mit mehreren requestAnimationFrame())

Dann solltest du damit anfangen.

Was denkt ihr dazu? Könnt ihr dazu Literatur empfehlen?

Dieses Einsteiger-Tutorial erklärt wie man die Chrome-DevTools nutzt, um die Laufzeit-Performance zu analysieren.