{"id":83260,"date":"2022-09-04T21:34:57","date_gmt":"2022-09-04T19:34:57","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/"},"modified":"2020-09-16T20:25:45","modified_gmt":"2020-09-16T23:25:45","slug":"cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/","title":{"rendered":"F\u00fcnf M\u00f6glichkeiten AirSHIFT hat die Laufzeitleistung Ihrer Reaktionsanwendung verbessert"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Respuesta-lenta-menor-productividad\" >Langsame Reaktion, geringere Produktivit\u00e4t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#1-Virtualizar-tablas-grandes\" >1. Virtualisieren Sie gro\u00dfe Tabellen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados\" >Ergebnisse<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#2-Auditoria-con-API-User-Timing\" >2. Audit mit API User Timing<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-2\" >Ergebnisse<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#3-Componentes-de-carga-diferida-y-transferencia-de-logica-costosa-a-los-trabajadores-web\" >3. Lazy Loading-Komponenten und kostspielige Logik\u00fcbertragung an Web-Worker<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-3\" >Ergebnisse<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#4-Establecer-un-presupuesto-de-desempeno\" >4. Erstellen Sie ein Leistungsbudget<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-4\" >Ergebnisse<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#5-Hackatones-de-rendimiento\" >5. Performance-Hackathons<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-5\" >Ergebnisse<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resumen\" >Zusammenfassung<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Eine reale Fallstudie zur Optimierung der Leistung von React SPA.<\/p>\n<p>\n          <time>6. November 2019<\/time><\/p>\n<\/header>\n<p>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\u00fcr die Produktivit\u00e4ts-Desktop-Anwendungen, die Benutzer t\u00e4glich verwenden. Das Engineering-Team von <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/recruit-tech.co.jp\/\">Rekrutierungstechnologien<\/a> ein Refactoring-Projekt durchlaufen, um eine seiner Webanwendungen zu verbessern, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/airregi.jp\/shift\/\">AirSHIFT<\/a>, f\u00fcr eine bessere Leistung bei Benutzereingaben. So haben sie es gemacht.<\/p>\n<h2 id=\"slow-response-less-productivity\"><span class=\"ez-toc-section\" id=\"Respuesta-lenta-menor-productividad\"><\/span>Langsame Reaktion, geringere Produktivit\u00e4t <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AirSHIFT ist eine Desktop-Webanwendung, mit der Ladenbesitzer wie Restaurants und Caf\u00e9s die Schichtarbeit ihrer Mitarbeiter verwalten k\u00f6nnen. Die mit React entwickelte Einzelseiten-App bietet umfangreiche Client-Funktionen, einschlie\u00dflich mehrerer Rastertabellen f\u00fcr Schichtpl\u00e4ne, die nach Tag, Woche, Monat und mehr geordnet sind.<\/p>\n<p><img alt='airshift_visual-3001408' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/airshift_visual-3001408.png'><\/p>\n<p>Als das Engineering-Team von Recruit Technologies der AirSHIFT-App neue Funktionen hinzuf\u00fcgte, erhielten sie mehr Feedback zu langsamer Leistung. Yosuke Furukawa, technischer Leiter von AirSHIFT, sagte:<\/p>\n<blockquote class=\"w-blockquote\">\n<p>  In einer Studie zur Nutzerforschung waren wir \u00fcberrascht, als einer der Ladenbesitzer sagte, er w\u00fcrde 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.\n<\/p><\/blockquote>\n<p>Nach Durchf\u00fchrung 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.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/airshift-perf-optimization\/endless_spinner_vp9.webm\" type=\"video\/webm; codecs=vp8\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/airshift-perf-optimization\/endless_spinner_h264.mp4\" type=\"video\/mp4; codecs=h264\"><\/source><\/source><\/video><figcaption class=\"w-figcaption\">\n<p>    Endloser Spinner auf Low-End-Ger\u00e4ten.<br \/>\n  <\/figcaption><\/figure>\n<p>Die AirSHIFT-Anwendung blockierte den Hauptthread mit teuren Skripten, aber das Engineering-Team erkannte nicht, wie teuer die Skripte waren, da sie auf Rich-Spec-Computern mit schnellen Wi-Fi-Verbindungen entwickelt und getestet wurden.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Haupt-Thread-Breakdown-7210124' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/main-thread-break-down-7210124.png'><figcaption class=\"w-figcaption\">\n<p>    Beim Laden der Schichttabelle wurden etwa 80% der Ladezeit durch Ausf\u00fchren von Skripten verbraucht.<br \/>\n  <\/figcaption><\/figure>\n<p>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.<\/p>\n<h2 id=\"1.-virtualize-large-tables\"><span class=\"ez-toc-section\" id=\"1-Virtualizar-tablas-grandes\"><\/span>1. Virtualisieren Sie gro\u00dfe Tabellen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Anzeigen der Schichttabelle erforderte mehrere kostspielige Schritte: Erstellen des virtuellen DOM und Rendern auf dem Bildschirm im Verh\u00e4ltnis zur Anzahl der Mitarbeiter und Zeitfenster. Wenn ein Restaurant beispielsweise 50 arbeitende Mitglieder hat und Sie den monatlichen Schichtplan \u00fcberpr\u00fcfen m\u00f6chten, ist dies eine Tabelle mit 50 (Mitgliedern) multipliziert mit 30 (Tagen), was dazu f\u00fchrt, dass 1.500 Zellkomponenten gerendert werden. Dies ist eine sehr teure Operation, insbesondere f\u00fcr Ger\u00e4te mit niedrigen Spezifikationen. In Wirklichkeit war es schlimmer. Bei der Untersuchung stellten sie fest, dass es Gesch\u00e4fte gab, in denen 200 Mitarbeiter verwaltet wurden und die rund 6.000 Zellkomponenten in einer einzigen monatlichen Tabelle ben\u00f6tigten.<\/p>\n<p>Um die Kosten f\u00fcr diesen Vorgang zu senken, hat AirSHIFT die Schichttabelle virtualisiert. Die Anwendung stellt jetzt nur die Komponenten im Ansichtsfenster und die Komponenten au\u00dferhalb des Bildschirms bereit.<\/p>\n<figure class=\"w-figure\">\n  <img alt='virtualize_before-9209523' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/virtualize_before-9209523.png'><figcaption class=\"w-figcaption\">\n<p>    Vorher: Rendern aller Zellen der Verschiebungstabelle.<br \/>\n  <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='virtualize_after-8560709' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/virtualize_after-8560709.png'><figcaption class=\"w-figcaption\">\n<p>    Nachher: Rendern Sie einfach die Zellen im Ansichtsfenster.<br \/>\n  <\/figcaption><\/figure>\n<p>In diesem Fall wird AirSHIFT verwendet <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/bvaughn\/react-virtualized\">virtualisiert reagieren<\/a> da es Anforderungen gab, komplexe zweidimensionale Rastertabellen zu erm\u00f6glichen. Sie suchen auch nach M\u00f6glichkeiten, die Implementierung so zu konvertieren, dass sie in Zukunft das Lichtreaktionsfenster verwendet.<\/p>\n<h3 id=\"results\"><span class=\"ez-toc-section\" id=\"Resultados\"><\/span>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<figure class=\"w-figure\">\n  <img alt='virtualize_results_before-4813935' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/virtualize_results_before-4813935.png'><figcaption class=\"w-figcaption\">\n<p>    Vorher: ca. 10 Sekunden Skript nach Benutzereingabe.<br \/>\n  <\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='virtualize_results_after-6955380' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/virtualize_results_after-6955380.png'><figcaption class=\"w-figcaption\">\n<p>    Nachher: 4 Sekunden Skript nach Benutzereingabe.<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"2.-audit-with-user-timing-api\"><span class=\"ez-toc-section\" id=\"2-Auditoria-con-API-User-Timing\"><\/span>2. Audit mit API User Timing <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das AirSHIFT-Team hat dann die Skripte \u00fcberarbeitet, die mit Benutzereingaben ausgef\u00fchrt werden. das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\/reference#main\">Flammentabelle<\/a><br \/>\nvon <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a><br \/>\nMit dieser Option k\u00f6nnen Sie analysieren, was im Hauptthread tats\u00e4chlich passiert. Das AirSHIFT-Team fand es jedoch einfacher, die Anwendungsaktivit\u00e4t basierend auf dem React-Lebenszyklus zu analysieren.<\/p>\n<p>React 16 bietet seine Leistungsverfolgung \u00fcber die<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/User_Timing_API\">Benutzerzeit-API<\/a>, die Sie von der sehen k\u00f6nnen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/04\/devtools#tabs\">Times Abschnitt<\/a><br \/>\nvon Chrome DevTools. AirSHIFT verwendete den Abschnitt &quot;Zeiten&quot;, um unn\u00f6tige Logik zu finden, die in React Lifecycle-Ereignissen ausgef\u00fchrt wird.<\/p>\n<figure class=\"w-figure\">\n  <img alt='user_timing-6925370' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/user_timing-6925370.png' style=\"max-width: 75%;\"><figcaption class=\"w-figcaption\">\n<p>    Reagieren Sie auf Benutzerzeitereignisse.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"results-2\"><span class=\"ez-toc-section\" id=\"Resultados-2\"><\/span>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das AirSHIFT-Team stellte fest, dass a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/reconciliation.html\">Reaktionsbaum-Vers\u00f6hnung<\/a><br \/>\nes geschah kurz vor jeder Schifffahrtsstra\u00dfe. Dies bedeutete, dass React die Schichttabelle vor den Navigationen unn\u00f6tig aktualisierte. Eine unn\u00f6tige Aktualisierung des Redux-Status verursachte dieses Problem. Durch das Reparieren wurden ca. 750 ms Skriptzeit eingespart. AirSHIFT hat auch andere Mikrooptimierungen vorgenommen, die schlie\u00dflich zu einer Verk\u00fcrzung der Programmierzeit um insgesamt 1 Sekunde f\u00fchrten.<\/p>\n<h2 id=\"3.-lazy-load-components-and-move-expensive-logic-to-web-workers\"><span class=\"ez-toc-section\" id=\"3-Componentes-de-carga-diferida-y-transferencia-de-logica-costosa-a-los-trabajadores-web\"><\/span>3. Lazy Loading-Komponenten und kostspielige Logik\u00fcbertragung an Web-Worker <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AirSHIFT verf\u00fcgt \u00fcber eine integrierte Chat-Anwendung. Viele Ladenbesitzer kommunizieren mit ihren Mitarbeitern per Chat, w\u00e4hrend sie sich die Schichttabelle ansehen. Dies bedeutet, dass ein Benutzer m\u00f6glicherweise eine Nachricht eingibt, w\u00e4hrend die Tabelle geladen wird. Wenn der Hauptthread mit Skripten besch\u00e4ftigt ist, die die Tabelle rendern, kann die Benutzereingabe \u00e4rgerlich sein.<\/p>\n<p>Um diese Erfahrung zu verbessern, verwendet AirSHIFT jetzt React.lazy und Suspense, um Platzhalter f\u00fcr Tabelleninhalte anzuzeigen, w\u00e4hrend die eigentlichen Komponenten langsam geladen werden.<\/p>\n<p>Das AirSHIFT-Team hat auch einen Teil der teuren Gesch\u00e4ftslogik in tr\u00e4ge geladenen Komponenten auf migriert<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\">Web-Worker<\/a>. Dies l\u00f6ste das Problem mit Benutzereingaben, indem der Haupt-Thread freigegeben wurde, sodass er sich darauf konzentrieren konnte, auf Benutzereingaben zu reagieren.<\/p>\n<p>In der Regel sind Entwickler bei der Verwendung von Workern mit Komplexit\u00e4t konfrontiert, diesmal jedoch <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/comlink\">Comlink<\/a> tat das schwere Heben f\u00fcr sie. Nachfolgend finden Sie den Pseudocode, wie AirSHIFT bei einer der teuersten Operationen gearbeitet hat, die sie jemals hatten: Berechnung der Gesamtarbeitskosten.<\/p>\n<p><em>Verwenden Sie in App.js React.lazy und Suspense, um Sicherungsinhalte beim Laden anzuzeigen<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importieren<\/span> Reagieren<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> faul<span class=\"token punctuation\">,<\/span> Suspense <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'react'<\/span><p><br><span class=\"token keyword\">const<\/span> Hello <span class=\"token operator\">=<\/span> <span class=\"token function\">faul<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token keyword\">importieren<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.\/Cost'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><\/p><p><span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">Loading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span><br><span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span>Some fallback content to show <span class=\"token keyword\">w\u00e4hrend<\/span> Wird geladen<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><br><span class=\"token punctuation\">)<\/span><\/p><p><br><span class=\"token keyword\">Export<\/span> <span class=\"token keyword\">Standard<\/span> <span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">App<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> userInfo <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">R\u00fcckkehr<\/span> <span class=\"token punctuation\">(<\/span><br><span class=\"token operator\">&lt;<\/span>div<span class=\"token operator\">&gt;<\/span><br><span class=\"token operator\">&lt;<\/span>Suspense fallback<span class=\"token operator\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">&lt;<\/span>Loading <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br><span class=\"token operator\">&lt;<\/span>Cost <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><br><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Suspense<span class=\"token operator\">&gt;<\/span><br><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>div<span class=\"token operator\">&gt;<\/span><br><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p><em>Verwenden Sie in der Kostenkomponente comlink, um die Berechnungslogik auszuf\u00fchren<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importieren<\/span> Reagieren <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">importieren<\/span> <span class=\"token punctuation\">{<\/span> proxy <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'comlink'<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token keyword\">const<\/span> WorkerlizedCostCalc <span class=\"token operator\">=<\/span> <span class=\"token function\">proxy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Arbeiter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.\/WorkerlizedCostCalc.js'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">Export<\/span> <span class=\"token keyword\">Standard<\/span> <span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">Cost<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\"><span class=\"token punctuation\">{<\/span> userInfo <span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> instance <span class=\"token operator\">=<\/span> <span class=\"token keyword\">erwarten<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WorkerlizedCostCalc<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> cost <span class=\"token operator\">=<\/span> <span class=\"token keyword\">erwarten<\/span> instance<span class=\"token punctuation\">.<\/span><span class=\"token function\">calc<\/span><span class=\"token punctuation\">(<\/span>userInfo<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">R\u00fcckkehr<\/span> <span class=\"token operator\">&lt;<\/span>p<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>cost<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>p<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p><em>Implementieren Sie die Berechnungslogik, die auf dem Worker ausgef\u00fchrt wird, und legen Sie sie mit comlink offen<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importieren<\/span> <span class=\"token punctuation\">{<\/span> expose <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'comlink'<\/span><br><span class=\"token keyword\">importieren<\/span> <span class=\"token punctuation\">{<\/span> someExpensiveCalculation <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'.\/CostCalc.js'<\/span><p><br><span class=\"token function\">expose<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br><span class=\"token function\">calc<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">userInfo<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">R\u00fcckkehr<\/span> <span class=\"token function\">someExpensiveCalculation<\/span><span class=\"token punctuation\">(<\/span>userInfo<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> selbst<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"results-3\"><span class=\"ez-toc-section\" id=\"Resultados-3\"><\/span>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Trotz der begrenzten Menge an Logik, die sie als Test arbeiteten, wechselte AirSHIFT etwa 100 ms seines JavaScript vom Hauptthread zum Arbeitsthread (simuliert mit 4x CPU-Gas).<\/p>\n<p><img alt='Arbeiter-7404546' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/worker-7404546.png'><\/p>\n<p>AirSHIFT pr\u00fcft derzeit, ob andere Komponenten verz\u00f6gert geladen und mehr Logik an Web-Worker ausgelagert werden k\u00f6nnen, um den Ruck weiter zu reduzieren.<\/p>\n<h2 id=\"4.-setting-a-performance-budget\"><span class=\"ez-toc-section\" id=\"4-Establecer-un-presupuesto-de-desempeno\"><\/span>4. Erstellen Sie ein Leistungsbudget <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bei all diesen Optimierungen war es wichtig sicherzustellen, dass die Anwendung im Laufe der Zeit weiterhin funktioniert. AirSHIFT verwendet jetzt <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/siddharthkp\/bundlesize\">Paket Gr\u00f6\u00dfe<\/a> \u00dcberschreiten Sie nicht die aktuelle JavaScript- und CSS-Dateigr\u00f6\u00dfe. Zus\u00e4tzlich zum Festlegen dieser Grundbudgets wurde ein Dashboard erstellt, in dem verschiedene Perzentile der Ladezeit der Schichttabelle angezeigt werden, um zu \u00fcberpr\u00fcfen, ob die App auch unter nicht idealen Bedingungen funktioniert.<\/p>\n<ul>\n<li>Jetzt wird die Skriptabschlusszeit f\u00fcr jedes Redux-Ereignis gemessen<\/li>\n<li>Leistungsdaten werden in gesammelt <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.elastic.co\/jp\/\">Elasticsearch<\/a><\/li>\n<li>Die Leistung des 10., 25., 50. und 75. Perzentils jedes Ereignisses wird mit angezeigt <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.elastic.co\/jp\/products\/kibana\">Kibana<\/a><\/li>\n<\/ul>\n<p>AirSHIFT \u00fcberwacht jetzt das Ladeereignis der Schichttabelle, um sicherzustellen, dass es f\u00fcr Benutzer mit 75. Perzentil in 3 Sekunden abgeschlossen ist. Dies ist derzeit ein nicht angewendetes Budget, sie erw\u00e4gen jedoch automatische Benachrichtigungen \u00fcber Elasticsearch, wenn sie Ihr Budget \u00fcberschreiten.<\/p>\n<figure class=\"w-figure\">\n  <img alt='kibana-9058952' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/kibana-9058952.png'><figcaption class=\"w-figcaption\">\n<p>    Das Kibana-Dashboard zeigt die t\u00e4glichen Leistungsdaten nach Perzentilen an.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"results-4\"><span class=\"ez-toc-section\" id=\"Resultados-4\"><\/span>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In der obigen Grafik sehen Sie, dass AirSHIFT jetzt haupts\u00e4chlich das 3-Sekunden-Budget f\u00fcr Benutzer des 75. Perzentils erreicht und die Verschiebungstabelle f\u00fcr Benutzer des 25. Perzentils in einer Sekunde l\u00e4dt. Durch die Erfassung von RUM-Leistungsdaten von verschiedenen Bedingungen und Ger\u00e4ten kann AirSHIFT dies jetzt tun \u00dcberpr\u00fcfen Sie, ob eine neue Feature-Version die Leistung der Anwendung wirklich beeintr\u00e4chtigt oder nicht.<\/p>\n<h2 id=\"5.-performance-hackathons\"><span class=\"ez-toc-section\" id=\"5-Hackatones-de-rendimiento\"><\/span>5. Performance-Hackathons <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Obwohl all diese Bem\u00fchungen zur Leistungsoptimierung wichtig und wirkungsvoll waren, ist es nicht immer einfach, Engineering- und Gesch\u00e4ftsteams dazu zu bringen, nicht funktionale Entwicklungen zu priorisieren. Ein Teil der Herausforderung besteht darin, dass einige dieser Leistungsoptimierungen nicht geplant werden k\u00f6nnen. Sie erfordern Experimente und eine Versuch-und-Irrtum-Denkweise.<\/p>\n<p>AirSHIFT f\u00fchrt jetzt interne eint\u00e4gige Leistungs-Hackathons durch, damit sich Ingenieure nur auf leistungsbezogene Arbeiten konzentrieren k\u00f6nnen. Bei diesen Hackathons beseitigen sie alle Einschr\u00e4nkungen und respektieren die Kreativit\u00e4t der Ingenieure. Daher ist jede Implementierung, die zur Geschwindigkeit beitr\u00e4gt, eine \u00dcberlegung wert. Um den Hackathon zu beschleunigen, teilt AirSHIFT die Gruppe in kleine Teams auf und jedes Team konkurriert darum, wer den gr\u00f6\u00dften bekommen kann <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Leuchtturm<\/a> Verbesserung der Leistungsbewertung. Teams werden sehr wettbewerbsf\u00e4hig! \ud83d\udd25<\/p>\n<p><img alt='Hackathon-2457180' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hackathon-2457180.png'><\/p>\n<h3 id=\"results-5\"><span class=\"ez-toc-section\" id=\"Resultados-5\"><\/span>Ergebnisse <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der Hackathon-Ansatz funktioniert gut f\u00fcr sie.<\/p>\n<ul>\n<li>Leistungsengp\u00e4sse k\u00f6nnen leicht erkannt werden, indem mehrere Ans\u00e4tze w\u00e4hrend des Hackathons getestet und jeweils mit Lighthouse gemessen werden.<\/li>\n<li>Nach dem Hackathon ist es ziemlich einfach, das Team davon zu \u00fcberzeugen, welche Optimierung es f\u00fcr die Produktionsfreigabe priorisieren sollte.<\/li>\n<li>Es ist auch ein wirksamer Weg, um die Bedeutung der Geschwindigkeit zu verteidigen. Alle Teilnehmer k\u00f6nnen den Zusammenhang zwischen der Art und Weise, wie Sie codieren, und der Umsetzung in die Leistung verstehen.<\/li>\n<\/ul>\n<p>Ein netter Nebeneffekt war, dass sich viele andere Entwicklungsteams innerhalb von Recruit f\u00fcr diesen praktischen Ansatz interessierten und das AirSHIFT-Team jetzt Hackathons mit mehreren Geschwindigkeiten innerhalb des Unternehmens erm\u00f6glicht.<\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Resumen\"><\/span>Zusammenfassung <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es war definitiv nicht die einfachste Reise f\u00fcr AirSHIFT, an diesen Optimierungen zu arbeiten, aber es hat sich auf jeden Fall gelohnt. Jetzt l\u00e4dt AirSHIFT die Schichttabelle in 1,5 Sekunden auf den Median, was eine 6-fache Verbesserung gegen\u00fcber der Leistung vor dem Projekt darstellt.<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/airshift-perf-optimization\/compare_speed_vp9.webm\" type=\"video\/webm; codecs=vp8\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/airshift-perf-optimization\/compare_speed_h264.mp4\" type=\"video\/mp4; codecs=h264\"><\/source><\/source><\/video><br \/>\n<\/figure>\n<p>Nachdem die Leistungsoptimierungen ver\u00f6ffentlicht wurden, sagte ein Benutzer:<\/p>\n<blockquote class=\"w-blockquote\">\n<p>  Vielen Dank, dass Sie das Laden des Schichttisches beschleunigt haben. Die Organisation der Schichtarbeit ist jetzt viel effizienter.\n<\/p><\/blockquote>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Eine reale Fallstudie zur Leistungsoptimierung von React SPA. 6. Nov. 2019 Bei der Website-Performance geht es nicht nur um die\u2026<\/p>","protected":false},"author":1,"featured_media":83261,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83260","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Un estudio de caso del mundo real sobre la optimizaci\u00f3n del rendimiento de React SPA. 6 de noviembre de 2019 El rendimiento del sitio web no se trata solo\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React\" \/>\n<meta property=\"og:description\" content=\"Un estudio de caso del mundo real sobre la optimizaci\u00f3n del rendimiento de React SPA. 6 de noviembre de 2019 El rendimiento del sitio web no se trata solo\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-04T19:34:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png\" \/>\n\t<meta property=\"og:image:width\" content=\"376\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React\",\"datePublished\":\"2022-09-04T19:34:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\"},\"wordCount\":1906,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4441737.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\",\"name\":\"Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4441737.png\",\"datePublished\":\"2022-09-04T19:34:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Un estudio de caso del mundo real sobre la optimizaci\u00f3n del rendimiento de React SPA. 6 de noviembre de 2019 El rendimiento del sitio web no se trata solo\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4441737.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-4441737.png\",\"width\":376,\"height\":240,\"caption\":\"thumbnail-4441737-8969552-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"F\u00fcnf M\u00f6glichkeiten, wie AirSHIFT die Laufzeitleistung Ihrer React-Anwendung verbessert - R Marketing Digital","description":"Eine reale Fallstudie zur Optimierung der Leistung von React SPA. 6. November 2019 Bei der Website-Leistung geht es nicht nur darum","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/","og_locale":"de_DE","og_type":"article","og_title":"Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React","og_description":"Un estudio de caso del mundo real sobre la optimizaci\u00f3n del rendimiento de React SPA. 6 de noviembre de 2019 El rendimiento del sitio web no se trata solo","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-04T19:34:57+00:00","og_image":[{"width":376,"height":240,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Cinco formas en que AirSHIFT mejor\u00f3 el rendimiento en tiempo de ejecuci\u00f3n de su aplicaci\u00f3n React","datePublished":"2022-09-04T19:34:57+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/"},"wordCount":1906,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/","name":"F\u00fcnf M\u00f6glichkeiten, wie AirSHIFT die Laufzeitleistung Ihrer React-Anwendung verbessert - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png","datePublished":"2022-09-04T19:34:57+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Eine reale Fallstudie zur Optimierung der Leistung von React SPA. 6. November 2019 Bei der Website-Leistung geht es nicht nur darum","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-4441737.png","width":376,"height":240,"caption":"thumbnail-4441737-8969552-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83260"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83260\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83261"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}