⌛ Wiederholungszeit

In meinem letzten Blog habe ich darüber gesprochen, wie ich meine App-Größe in nur 2 Wochen von 75 MB auf 34 MB reduziert habe (Ansehen!). Aber das ist noch nicht alles, ich habe auch die Gesamtleistung unserer App um bis zu 80 % verbessert?.

Lassen Sie uns herausfinden, WIE!!

? Die Überlieferung

Nach einem einfachen Rundgang entdeckte ich einige der wichtigsten Probleme in unserer App, die im Alleingang zu einer schlechten Benutzererfahrung und Leistung führten. Was für ein Tag!

• Hauptschurke – gesamte App-Benutzeroberfläche eingefroren, während Echtzeitantwort generiert wird

• Side Villain – Langsame Reaktionszeit und keine Bildraten

• Schurkenliebhaber – Zu viele API-Aufrufe

• The Undead Army – Schlechte Fehlerbehandlung und Abstürze

• Leiden – Mehr CPU-Auslastung und Serverkosten

• The Tarnished - ME !

Damit beginnt ein lebloser Kampf um die Wiederherstellung des Universums mit der Hoffnung auf eine bessere Welt.

Der Tahiti-Plan (Aber dieses Mal funktioniert er)

Also begann ich damit, zuerst die einfacheren Probleme anzugehen, da es einfacher ist, die Weltwirtschaftskrise zu ignorieren, als sie sofort zu bekämpfen.

1. ⚛️ Fluch der Reaktion

Die Weisheit und der Fluch von ReactJs sind Zustände. Wenn wir in React älter werden, stellen wir fest, dass die Anwendung umso besser ist, je weniger Zustände sie haben. Daher verwendete dieses besondere Kunstwerk 22 (ja, verdammt 22 useStates) in einem einzigen Chat-Bildschirm, in dem Sie nur Nachrichten senden und empfangen können.

Das Sahnehäubchen!
Wir haben die serverseitige Ereignisimplementierung verwendet, um Chunk-by-Chunk-Daten vom Server abzurufen, was in diesem Fall Wort für Wort geschah. Wenn Sie also eine Anfrage hätten, deren Antwort 100 Wörter umfasst (DAS IST DIE GERINGSTE ANTWORT). Es werden tatsächlich 100 Ereignisse empfangen.

Wenn Sie sich also mit der Mathematik auskennen, 100*22 = 2200 wird jedes Mal neu gerendert, wenn wir eine Antwort erhalten.

Muss ich das noch näher erläutern? ( NEIN )

Also habe ich damit begonnen, den gesamten Bildschirm neu zu erstellen und die Anzahl auf jetzt 6 Zustände reduziert. Mit besserer und reibungsloser Funktionalität als zuvor.

Das ist 72 % leistungsfähiger als zuvor!!

2. ❄️ Die gefrorene Wüste

Jetzt, nachdem wir das Radahn von React miterlebt haben, können wir leicht zu dem Schluss kommen, dass die App ziemlich stark einfrieren wird, oder?

Selbst bei 6 Staaten bleibt das Hauptproblem dasselbe, es ist 100*6. Wir hängen immer noch, aber mit weniger Staaten.

Die Hauptursache war, dass React Dom bei jedem Block aktualisiert wurde. Um dieses Problem anzugehen, verwendeten wir „Stapelverarbeitung und Generierung von Bildraten.

Hölle ja!

Statt also das DOM jedes Mal zu aktualisieren, wenn wir einen Block erhalten, haben wir Stapel von Blöcken erstellt und diese mit einer festen dynamischen Bildrate aktualisiert. Diese Bildraten wurden vom Betriebssystem abgerufen, sodass jedes Gerät je nach Systemkapazität unterschiedliche FPS hat, was der App eine robustere und kompatiblere Leistung verleiht.

Wir haben eine begrenzte Menge an Chunks in einem Stapel erfasst und die Antwort zurückgehalten, bis der Frame freigegeben wurde, und das Gleiche wiederholt, bis alle Chunks verarbeitet wurden.

Statt also DOM 100 Mal zu aktualisieren, haben wir DOM nur 3-4 Mal aktualisiert.

Rechnen Sie jetzt nach und berechnen Sie die Leistungssteigerung für die Hausaufgaben!

3. ? Seien Sie ein guter Zuhörer!

Es hat für mich nicht funktioniert, eine Freundin zu finden, aber es hat auf jeden Fall dazu beigetragen, die App viel besser zu machen.

APIs sind eine coole und nette Möglichkeit, Daten zu erhalten, aber sie mit Bedacht einzusetzen, ist eine Fähigkeit für Sie! Jetzt nutzte diese App diese API, um den Benutzerstatus vom Backend abzurufen. Aber das Beste daran ist, dass es alle 3 Sekunden verwendet wurde!!

Ich verstehe, der Entwickler hatte Unsicherheiten, aber das ist nicht das, was er mit der Vereinbarkeit von Beruf und Privatleben meinte.

a) Abrufen

Um die Benutzerdaten jedes Mal abzurufen, wenn der Benutzer die App verwendet, muss der Aufruf beim Start der App oder jedes Mal, wenn die App kürzlich aufgerufen wird (App-Status-Listener), erfolgen. Der Aufruf alle 3 Sekunden verbraucht nicht nur mobile Ressourcen in einem unendlichen Stream, sondern verursacht auch Server-Overhead.

Anstatt 100 Anfragen von 100 Benutzern zu erhalten, erhält Serve 100 Anfragen von einem Benutzer. Klingt für mich nicht sehr skalierbar und zuverlässig.

Außerdem führt es zu nicht nachvollziehbaren Speicherlecks und Nutzungen, was bei längerer Nutzung zu Problemen führt.

b) Datenfluss

Nachdem ich diesen internen DDOS-Angriff behoben hatte, stellte ich fest, dass diese App viele APIs verwendete, deren Daten sich in Luft auflösten (schlechte Datenverarbeitung). Anstatt Daten zwischenzuspeichern und im selben Ablauf erneut zu verwenden, rief die App erneut APIs auf.

Ich habe dafür gesorgt, dass Daten zwischengespeichert und linear an den Fluss weitergeleitet werden und die API nur aufgerufen wird, wenn sie für eine neue Instanz benötigt wird.

Punkt zum Erinnern!

Dies führte zu einem besseren Serverzustand und weniger Ausfallzeiten für unser Backend aufgrund zu vieler API-Anfragen. Da der Betrieb des Backends für Unternehmen kostspielig ist, ist es von entscheidender Bedeutung, APIs effektiv und nur bei Bedarf zu nutzen.

Nicht nur für das Backend, sondern auch für das Frontend: Durch zusätzliche API-Aufrufe wird das System systemintensiver, da bei jedem Anruf mehr HTTP-Handshakes und Protokolle durchgeführt werden müssen.

3. ? Es ist kein Fehler, wenn wir ihn nicht anerkennen!

Eines der entscheidenden Dinge für den Umgang mit APIs sind FEHLER. Es reicht nicht aus, sie mit den Protokollen zu trösten, da dadurch die Erfahrung des Benutzers weitaus schlechter wird als seine gute Nutzung.

Es ist wichtig, Fehler aus jeder Aktion mithilfe einer Art Feedbacksystem zu behandeln. Es kann sich um eine Warnung, ein Popup, einen Toast oder irgendetwas handeln. Aber der Benutzer sollte wissen, warum und wie es passiert ist, damit er es zurückmelden oder zumindest erfahren kann, was er falsch gemacht hat!

4. ? Ihre Erinnerungen

Muss gut sein, Kumpel! Sie wird nicht zurückkommen, aber die Erinnerungslecks werden es tun. Eines der wichtigsten Dinge, die wir beim Anhängen eines Listeners oder API-Aufrufs vergessen, ist, seine Instanz zu entfernen, nachdem wir diese Aktivität geschlossen haben.

Diese App hatte den Ton an, API-Aufrufe wurden auch nach dem Schließen der Aktivität oder im Hintergrund aufgerufen. Dies führt zu unnötiger CPU-Auslastung und Ressourcenbeanspruchung, wodurch die App langsamer und schwieriger zu verwenden ist.

Durch die ordnungsgemäße Reinigung wird die App schneller und der Aufwand verringert.

5. Leistungserklärung

Eine grundlegende Möglichkeit, ein Asset zu verwenden, besteht nun darin, es zu importieren und zu verwenden, oder?

Aber wissen Sie, wie es funktioniert? Jedes Mal, wenn Sie ein Element standardmäßig importieren, wird es mit einer Initialisierung im Speicher zugewiesen. Wenn Sie also ein Bild oder eine Komponente in 5 Dateien wie dieser importieren und deklarieren

import Profile from '../../profile'

Es werden 5 Instanzen davon für dasselbe erstellt!

Stattdessen sollten Sie alle Assets in einer Indexdatei aufrufen und das Objekt daraus importieren. Auf diese Weise wird es nur einmal deklariert und überall von der Referenz verwendet.

Dadurch wird die Speichernutzung auf 4/5 reduziert.

✅ Fazit –

Du bist ein guter Mann, Arthur! (Es tut mir leid, dass ich gerade RDR2 abgeschlossen habe und es ein großartiges, großartiges Spiel war.)

Mit diesen Änderungen steigerte sich die App-Leistung enorm, was nicht nur zu einem besseren Zustand auf der Mobilseite, sondern auch zu einer besseren Optimierung auf der Serverseite führte.

Die Store-Bewertung stieg in nur einer Woche der Nutzung von 3,5 auf 4,1!!!

Denken Sie daran, dass es sich nicht nur um einen Code handelt, sondern um eine Geschichte darüber, wie Benutzer damit interagieren.

Als Frontend-Entwickler hängt das gesamte Produkt von uns ab. Egal wie skalierbar das Backend ist, das Endprodukt, das der Benutzer verwenden wird, wird von ihm selbst erstellt und ist das Einzige, worüber er eine Entscheidung trifft. Daher ist es für uns am wichtigsten, ihnen eine reibungslose Interaktion zu ermöglichen, die zu besseren Geschäften für das gesamte Unternehmen führt.

? Schreiben Sie Kommentare, wenn Ihnen der Blog gefällt, oder teilen Sie ihn mit Ihren Freunden, damit sie ihn ebenfalls genießen können!