Fünf Möglichkeiten AirSHIFT hat die Laufzeitleistung Ihrer Reaktionsanwendung verbessert

Eine reale Fallstudie zur Optimierung der Leistung von React SPA.

6. November 2019

Bei der Leistung einer Website geht es nicht nur um die Ladezeit. Die Bereitstellung einer schnellen und reaktionsschnellen Benutzererfahrung ist von entscheidender Bedeutung, insbesondere für die Produktivitäts-Desktop-Anwendungen, die Benutzer täglich verwenden. Das Engineering-Team von Rekrutierungstechnologien ein Refactoring-Projekt durchlaufen, um eine seiner Webanwendungen zu verbessern, AirSHIFT, für eine bessere Leistung bei Benutzereingaben. So haben sie es gemacht.

Langsame Reaktion, geringere Produktivität

AirSHIFT ist eine Desktop-Webanwendung, mit der Ladenbesitzer wie Restaurants und Cafés die Schichtarbeit ihrer Mitarbeiter verwalten können. Die mit React entwickelte Einzelseiten-App bietet umfangreiche Client-Funktionen, einschließlich mehrerer Rastertabellen für Schichtpläne, die nach Tag, Woche, Monat und mehr geordnet sind.

Als das Engineering-Team von Recruit Technologies der AirSHIFT-App neue Funktionen hinzufügte, erhielten sie mehr Feedback zu langsamer Leistung. Yosuke Furukawa, technischer Leiter von AirSHIFT, sagte:

In einer Studie zur Nutzerforschung waren wir überrascht, als einer der Ladenbesitzer sagte, er würde seinen Platz verlassen, um nach einem Klick auf einen Knopf Kaffee zu kochen, nur um die Zeit totzuschlagen, die darauf wartet, dass der Schichttisch geladen wird.

Nach Durchführung der Untersuchungen stellte das Engineering-Team fest, dass viele ihrer Benutzer vor 10 Jahren versuchten, massive Schichttabellen auf Computer mit niedrigen Spezifikationen wie einen 1-GHz-Celeron-M-Laptop zu laden.

La aplicación AirSHIFT estaba bloqueando el hilo principal con SkripteConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde Plus costosos, pero el equipo de ingeniería no se dio cuenta de lo costosos que eran los scripts porque se estaban desarrollando y probando en computadoras de especificaciones ricas con conexiones Wi-Fi rápidas.

Nach der Profilerstellung der Leistung in Chrome DevTools mit aktivierter CPU- und Netzwerkdrosselung wurde klar, dass die Leistung optimiert werden muss. AirSHIFT hat eine Arbeitsgruppe gebildet, um dieses Problem anzugehen. Hier sind 5 Dinge, auf die sie sich konzentriert haben, um ihre App reaktionsschneller auf Benutzereingaben zu machen.

1. Virtualisieren Sie große Tabellen

Das Anzeigen der Schichttabelle erforderte mehrere kostspielige Schritte: Erstellen des virtuellen DOM und Rendern auf dem Bildschirm im Verhältnis zur Anzahl der Mitarbeiter und Zeitfenster. Wenn ein Restaurant beispielsweise 50 arbeitende Mitglieder hat und Sie den monatlichen Schichtplan überprüfen möchten, ist dies eine Tabelle mit 50 (Mitgliedern) multipliziert mit 30 (Tagen), was dazu führt, dass 1.500 Zellkomponenten gerendert werden. Dies ist eine sehr teure Operation, insbesondere für Geräte mit niedrigen Spezifikationen. In Wirklichkeit war es schlimmer. Bei der Untersuchung stellten sie fest, dass es Geschäfte gab, in denen 200 Mitarbeiter verwaltet wurden und die rund 6.000 Zellkomponenten in einer einzigen monatlichen Tabelle benötigten.

Um die Kosten für diesen Vorgang zu senken, hat AirSHIFT die Schichttabelle virtualisiert. Die Anwendung stellt jetzt nur die Komponenten im Ansichtsfenster und die Komponenten außerhalb des Bildschirms bereit.

In diesem Fall wird AirSHIFT verwendet virtualisiert reagieren da es Anforderungen gab, komplexe zweidimensionale Rastertabellen zu ermöglichen. Sie suchen auch nach Möglichkeiten, die Implementierung so zu konvertieren, dass sie in Zukunft das Lichtreaktionsfenster verwendet.

Ergebnisse

Die Tabellenvirtualisierung allein reduzierte die Skriptzeit um 6 Sekunden (in einer Macbook Pro 4x langsamer + schnellen 3G-beschleunigten Umgebung). Dies war die effektivste Leistungsverbesserung im Refactoring-Projekt.

2. Auditoría con APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Plus User Timing

Das AirSHIFT-Team hat dann die Skripte überarbeitet, die mit Benutzereingaben ausgeführt werden. das Flammentabelle
von Chrome DevTools
Mit dieser Option können Sie analysieren, was im Hauptthread tatsächlich passiert. Das AirSHIFT-Team fand es jedoch einfacher, die Anwendungsaktivität basierend auf dem React-Lebenszyklus zu analysieren.

React 16 bietet seine Leistungsverfolgung über die
Benutzerzeit-API, die Sie von der sehen können
Times Abschnitt
von Chrome DevTools. AirSHIFT verwendete den Abschnitt "Zeiten", um unnötige Logik zu finden, die in React Lifecycle-Ereignissen ausgeführt wird.

Ergebnisse

Das AirSHIFT-Team stellte fest, dass a
Reaktionsbaum-Versöhnung
estaba sucediendo justo antes de cada ruta de navegación. Esto significaba que React estaba actualizando la tabla de turnos innecesariamente antes de las navegaciones. Una actualización innecesaria del estado de Redux estaba causando este problema. Arreglarlo ahorró alrededor de 750 ms de tiempo de scripting. AirSHIFT también realizó otras microoptimizaciones que eventualmente llevaron a una reducción total de 1 segundo en el tiempo de ProgrammierungConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura Plus.

3. Lazy Loading-Komponenten und kostspielige Logikübertragung an Web-Worker

AirSHIFT verfügt über eine integrierte Chat-Anwendung. Viele Ladenbesitzer kommunizieren mit ihren Mitarbeitern per Chat, während sie sich die Schichttabelle ansehen. Dies bedeutet, dass ein Benutzer möglicherweise eine Nachricht eingibt, während die Tabelle geladen wird. Wenn der Hauptthread mit Skripten beschäftigt ist, die die Tabelle rendern, kann die Benutzereingabe ärgerlich sein.

Para mejorar esta experiencia, AirSHIFT ahora usa React.lazy y Suspense para mostrar marcadores de posición para el InhaltEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Plus de la tabla mientras carga lentamente los componentes reales.

Das AirSHIFT-Team hat auch einen Teil der teuren Geschäftslogik in träge geladenen Komponenten auf migriert
Web-Worker. Dies löste das Problem mit Benutzereingaben, indem der Haupt-Thread freigegeben wurde, sodass er sich darauf konzentrieren konnte, auf Benutzereingaben zu reagieren.

In der Regel sind Entwickler bei der Verwendung von Workern mit Komplexität konfrontiert, diesmal jedoch Comlink tat das schwere Heben für sie. Nachfolgend finden Sie den Pseudocode, wie AirSHIFT bei einer der teuersten Operationen gearbeitet hat, die sie jemals hatten: Berechnung der Gesamtarbeitskosten.

Im AppConcepto de APP¿Qué es una APP?Una App es todo aquel programa que se ejecuta desde una interfaz teléfono celular, es decir, desde un móvil o una tablet. Consiste en la herramienta principal para cualquier usuario que tenga un teléfono teléfono celular, de todo el software que se mueve en tiendas digitales como Google Play Store o la App Store y que tanto se adentra en cualquier terminal moderno.Es un concepto Plus.js, use React.lazy y Suspense para mostrar contenido de respaldo mientras se carga

importieren Reagieren, { faul, Suspense } desde 'react'

const Hello = faul(() => importieren('./Cost'))
const Loading = () => (
<div>Some fallback content to show während Wird geladen</div>
)

Export Standard Funktion App({ userInfo }) {
Rückkehr (
<div>
<Suspense fallback={<Loading />}>
<Cost />
</Suspense>
</div>
)
}

Verwenden Sie in der Kostenkomponente comlink, um die Berechnungslogik auszuführen

importieren Reagieren desde 'react';
importieren { proxy } desde 'comlink';

const WorkerlizedCostCalc = proxy(new Arbeiter('./WorkerlizedCostCalc.js'));
Export Standard Funktion Cost({ userInfo }) {
const instance = erwarten new WorkerlizedCostCalc();
const cost = erwarten instance.calc(userInfo);
Rückkehr <p>{cost}</p>;
}

Implementieren Sie die Berechnungslogik, die auf dem Worker ausgeführt wird, und legen Sie sie mit comlink offen

importieren { expose } desde 'comlink'
importieren { someExpensiveCalculation } desde './CostCalc.js'

expose({
calc(userInfo) {
Rückkehr someExpensiveCalculation(userInfo);
}
}, selbst);

Ergebnisse

A pesar de la cantidad limitada de lógica que trabajaron como prueba, AirSHIFT cambió alrededor de 100 ms de su JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus del hilo principal al hilo de trabajo (simulado con aceleración de CPU 4x).

AirSHIFT prüft derzeit, ob andere Komponenten verzögert geladen und mehr Logik an Web-Worker ausgelagert werden können, um den Ruck weiter zu reduzieren.

4. Erstellen Sie ein Leistungsbudget

Bei all diesen Optimierungen war es wichtig sicherzustellen, dass die Anwendung im Laufe der Zeit weiterhin funktioniert. AirSHIFT verwendet jetzt Paket Größe no exceder el tamaño de archivo JavaScript y CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Plus actual. Además de establecer estos presupuestos básicos, crearon un tablero para mostrar varios percentiles del tiempo de carga de la tabla de turnos para verificar si la aplicación funciona incluso en condiciones no ideales.

• Ahora se mide el tiempo de finalización del script para cada VeranstaltungConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Plus de Redux
• Leistungsdaten werden in gesammelt Elasticsearch
• Die Leistung des 10., 25., 50. und 75. Perzentils jedes Ereignisses wird mit angezeigt Kibana

AirSHIFT überwacht jetzt das Ladeereignis der Schichttabelle, um sicherzustellen, dass es für Benutzer mit 75. Perzentil in 3 Sekunden abgeschlossen ist. Dies ist derzeit ein nicht angewendetes Budget, sie erwägen jedoch automatische Benachrichtigungen über Elasticsearch, wenn sie Ihr Budget überschreiten.

Ergebnisse

In der obigen Grafik sehen Sie, dass AirSHIFT jetzt hauptsächlich das 3-Sekunden-Budget für Benutzer des 75. Perzentils erreicht und die Verschiebungstabelle für Benutzer des 25. Perzentils in einer Sekunde lädt. Durch die Erfassung von RUM-Leistungsdaten von verschiedenen Bedingungen und Geräten kann AirSHIFT dies jetzt tun Überprüfen Sie, ob eine neue Feature-Version die Leistung der Anwendung wirklich beeinträchtigt oder nicht.

5. Performance-Hackathons

Obwohl all diese Bemühungen zur Leistungsoptimierung wichtig und wirkungsvoll waren, ist es nicht immer einfach, Engineering- und Geschäftsteams dazu zu bringen, nicht funktionale Entwicklungen zu priorisieren. Ein Teil der Herausforderung besteht darin, dass einige dieser Leistungsoptimierungen nicht geplant werden können. Sie erfordern Experimente und eine Versuch-und-Irrtum-Denkweise.

AirSHIFT führt jetzt interne eintägige Leistungs-Hackathons durch, damit sich Ingenieure nur auf leistungsbezogene Arbeiten konzentrieren können. Bei diesen Hackathons beseitigen sie alle Einschränkungen und respektieren die Kreativität der Ingenieure. Daher ist jede Implementierung, die zur Geschwindigkeit beiträgt, eine Überlegung wert. Um den Hackathon zu beschleunigen, teilt AirSHIFT die Gruppe in kleine Teams auf und jedes Team konkurriert darum, wer den größten bekommen kann Leuchtturm Verbesserung der Leistungsbewertung. Teams werden sehr wettbewerbsfähig! 🔥

Ergebnisse

Der Hackathon-Ansatz funktioniert gut für sie.

• Leistungsengpässe können leicht erkannt werden, indem mehrere Ansätze während des Hackathons getestet und jeweils mit Lighthouse gemessen werden.
• Nach dem Hackathon ist es ziemlich einfach, das Team davon zu überzeugen, welche Optimierung es für die Produktionsfreigabe priorisieren sollte.
• Es ist auch ein wirksamer Weg, um die Bedeutung der Geschwindigkeit zu verteidigen. Alle Teilnehmer können den Zusammenhang zwischen der Art und Weise, wie Sie codieren, und der Umsetzung in die Leistung verstehen.

Ein netter Nebeneffekt war, dass sich viele andere Entwicklungsteams innerhalb von Recruit für diesen praktischen Ansatz interessierten und das AirSHIFT-Team jetzt Hackathons mit mehreren Geschwindigkeiten innerhalb des Unternehmens ermöglicht.

Zusammenfassung

Es war definitiv nicht die einfachste Reise für AirSHIFT, an diesen Optimierungen zu arbeiten, aber es hat sich auf jeden Fall gelohnt. Jetzt lädt AirSHIFT die Schichttabelle in 1,5 Sekunden auf den Median, was eine 6-fache Verbesserung gegenüber der Leistung vor dem Projekt darstellt.

Nachdem die Leistungsoptimierungen veröffentlicht wurden, sagte ein Benutzer:

Vielen Dank, dass Sie das Laden des Schichttisches beschleunigt haben. Die Organisation der Schichtarbeit ist jetzt viel effizienter.