{"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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/","title":{"rendered":"Cinq fa\u00e7ons dont AirSHIFT a am\u00e9lior\u00e9 les performances d&#039;ex\u00e9cution de votre application React"},"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\">Table des mati\u00e8res<\/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=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Respuesta-lenta-menor-productividad\" >R\u00e9ponse lente, productivit\u00e9 r\u00e9duite<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#1-Virtualizar-tablas-grandes\" >1. Virtualisez les grandes tables<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados\" >R\u00e9sultats<\/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\/fr\/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 avec 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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-2\" >R\u00e9sultats<\/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\/fr\/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. Chargement paresseux des composants et transfert de la logique co\u00fbteuse aux travailleurs Web<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-3\" >R\u00e9sultats<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#4-Establecer-un-presupuesto-de-desempeno\" >4. \u00c9tablissez un budget de performance<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-4\" >R\u00e9sultats<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#5-Hackatones-de-rendimiento\" >5. Hackathons de performance<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resultados-5\" >R\u00e9sultats<\/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\/fr\/dev\/cinco-formas-en-que-airshift-mejoro-el-rendimiento-en-tiempo-de-ejecucion-de-su-aplicacion-react\/#Resumen\" >r\u00e9sum\u00e9<\/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>          Une \u00e9tude de cas r\u00e9elle sur l&#039;optimisation des performances de React SPA.<\/p>\n<p>\n          <time>6 novembre 2019<\/time><\/p>\n<\/header>\n<p>Les performances du site Web ne concernent pas seulement le temps de chargement. Offrir une exp\u00e9rience utilisateur rapide et r\u00e9active est essentiel, en particulier pour les applications de bureau de productivit\u00e9 que les gens utilisent quotidiennement. L&#039;\u00e9quipe d&#039;ing\u00e9nierie de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/recruit-tech.co.jp\/\">technologies de recrutement<\/a> est pass\u00e9 par un projet de refactoring pour am\u00e9liorer une de vos applications web, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/airregi.jp\/shift\/\">AirSHIFT<\/a>, pour de meilleures performances de saisie utilisateur. C&#039;est comme \u00e7a qu&#039;ils ont fait.<\/p>\n<h2 id=\"slow-response-less-productivity\"><span class=\"ez-toc-section\" id=\"Respuesta-lenta-menor-productividad\"><\/span>R\u00e9ponse lente, productivit\u00e9 r\u00e9duite <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AirSHIFT est une application Web de bureau qui aide les propri\u00e9taires de magasins tels que les restaurants et les caf\u00e9s \u00e0 g\u00e9rer le travail post\u00e9 des membres de leur personnel. Construite avec React, l&#039;application d&#039;une seule page fournit des fonctionnalit\u00e9s client riches, notamment plusieurs tableaux de grille d&#039;horaires de travail organis\u00e9s par jour, semaine, mois, etc.<\/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>Au fur et \u00e0 mesure que l&#039;\u00e9quipe d&#039;ing\u00e9nieurs de Recruit Technologies ajoutait de nouvelles fonctionnalit\u00e9s \u00e0 l&#039;application AirSHIFT, elle commen\u00e7ait \u00e0 recevoir davantage de commentaires sur les performances lentes. Le directeur technique d&#039;AirSHIFT, Yosuke Furukawa, a d\u00e9clar\u00e9\u00a0:<\/p>\n<blockquote class=\"w-blockquote\">\n<p>  Dans une \u00e9tude de recherche d&#039;utilisateurs, nous avons \u00e9t\u00e9 surpris lorsque l&#039;un des propri\u00e9taires de magasin a d\u00e9clar\u00e9 qu&#039;il quitterait son si\u00e8ge pour faire du caf\u00e9 apr\u00e8s avoir cliqu\u00e9 sur un bouton, juste pour perdre du temps \u00e0 attendre que la table des \u00e9quipes se charge.\n<\/p><\/blockquote>\n<p>Apr\u00e8s avoir men\u00e9 des recherches, l&#039;\u00e9quipe d&#039;ing\u00e9nieurs s&#039;est rendu compte que nombre de leurs utilisateurs essayaient de charger des tables tournantes massives sur des ordinateurs \u00e0 faible sp\u00e9cification, comme un ordinateur portable Celeron M \u00e0 1 GHz d&#039;il y a 10 ans.<\/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>    Spinner sans fin sur les appareils bas de gamme.<br \/>\n  <\/figcaption><\/figure>\n<p>L&#039;application AirSHIFT bloquait le thread principal avec des scripts co\u00fbteux, mais l&#039;\u00e9quipe d&#039;ing\u00e9nieurs ne r\u00e9alisait pas \u00e0 quel point les scripts \u00e9taient chers car ils \u00e9taient d\u00e9velopp\u00e9s et test\u00e9s sur des ordinateurs riches en sp\u00e9cifications avec des connexions Wi-Fi rapides.<\/p>\n<figure class=\"w-figure\">\n  <img alt='fil principal-ventilation-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>    Lors du chargement de la table de d\u00e9calage, environ 80% du temps de chargement ont \u00e9t\u00e9 consomm\u00e9s par l&#039;ex\u00e9cution de scripts.<br \/>\n  <\/figcaption><\/figure>\n<p>Apr\u00e8s avoir profil\u00e9 ses performances dans Chrome DevTools avec la limitation du processeur et du r\u00e9seau activ\u00e9e, il est devenu clair qu&#039;une optimisation des performances \u00e9tait n\u00e9cessaire. AirSHIFT a form\u00e9 un groupe de travail pour r\u00e9soudre ce probl\u00e8me. Voici 5 choses sur lesquelles ils se sont concentr\u00e9s pour rendre leur application plus r\u00e9active aux entr\u00e9es des utilisateurs.<\/p>\n<h2 id=\"1.-virtualize-large-tables\"><span class=\"ez-toc-section\" id=\"1-Virtualizar-tablas-grandes\"><\/span>1. Virtualisez les grandes tables <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>L&#039;affichage du tableau des \u00e9quipes a n\u00e9cessit\u00e9 plusieurs \u00e9tapes co\u00fbteuses : construire le DOM virtuel et le restituer \u00e0 l&#039;\u00e9cran au prorata du nombre d&#039;employ\u00e9s et de plages horaires. Par exemple, si un restaurant compte 50\u00a0membres actifs et souhaite v\u00e9rifier son horaire de travail mensuel, il s&#039;agirait d&#039;un tableau de 50\u00a0(membres) multipli\u00e9 par 30 (jours), ce qui donnerait 1\u00a0500\u00a0composants de cellules \u00e0 afficher. Il s&#039;agit d&#039;une op\u00e9ration tr\u00e8s co\u00fbteuse, en particulier pour les appareils \u00e0 faible sp\u00e9cification. En r\u00e9alit\u00e9, les choses \u00e9taient pires. \u00c0 partir de l&#039;enqu\u00eate, ils ont d\u00e9couvert qu&#039;il y avait des magasins g\u00e9rant 200 membres du personnel, ce qui n\u00e9cessitait environ 6 000 composants de cellules dans un seul tableau mensuel.<\/p>\n<p>Pour r\u00e9duire le co\u00fbt de cette op\u00e9ration, AirSHIFT a virtualis\u00e9 la table des \u00e9quipes. L&#039;application ne monte d\u00e9sormais que les composants dans la fen\u00eatre d&#039;affichage et d\u00e9monte les composants hors \u00e9cran.<\/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>    Avant : rendu de toutes les cellules de la table des d\u00e9calages.<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>    Apr\u00e8s : n&#039;affiche que les cellules dans la fen\u00eatre d&#039;affichage.<br \/>\n  <\/figcaption><\/figure>\n<p>Dans ce cas, AirSHIFT a utilis\u00e9 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/bvaughn\/react-virtualized\">r\u00e9agir virtualis\u00e9<\/a> car il y avait des exigences autour de l&#039;activation de tableaux de grille bidimensionnels complexes. Ils explorent \u00e9galement des moyens de convertir la mise en \u0153uvre pour utiliser la fen\u00eatre de r\u00e9action \u00e0 la lumi\u00e8re \u00e0 l&#039;avenir.<\/p>\n<h3 id=\"results\"><span class=\"ez-toc-section\" id=\"Resultados\"><\/span>R\u00e9sultats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La virtualisation des tables \u00e0 elle seule a r\u00e9duit le temps de script de 6 secondes (dans un environnement acc\u00e9l\u00e9r\u00e9 Macbook Pro + Fast 3G 4x plus lent). Il s&#039;agit de l&#039;am\u00e9lioration des performances la plus marquante du projet de refactoring.<\/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>    Avant : environ 10 secondes de script apr\u00e8s la saisie de l&#039;utilisateur.<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>    Apr\u00e8s : 4 secondes de script apr\u00e8s la saisie de l&#039;utilisateur.<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 avec API User Timing <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ensuite, l&#039;\u00e9quipe AirSHIFT a refactoris\u00e9 les scripts qui s&#039;ex\u00e9cutent sur l&#039;entr\u00e9e de l&#039;utilisateur. Les <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\/reference#main\">tableau des flammes<\/a><br \/>\nde <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a><br \/>\nvous permet d&#039;analyser ce qui se passe r\u00e9ellement sur le thread principal. Mais l&#039;\u00e9quipe AirSHIFT a trouv\u00e9 plus facile d&#039;analyser l&#039;activit\u00e9 des applications en fonction du cycle de vie de React.<\/p>\n<p>React 16 fournit son suivi des performances via le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/User_Timing_API\">API de temps utilisateur<\/a>, que vous pouvez voir depuis le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2018\/04\/devtools#tabs\">tranche horaire<\/a><br \/>\ndepuis Chrome DevTools. AirSHIFT a utilis\u00e9 la section Times pour trouver une logique inutile qui s&#039;ex\u00e9cute sur les \u00e9v\u00e9nements du cycle de vie React.<\/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>    R\u00e9agissez aux \u00e9v\u00e9nements de temps de l&#039;utilisateur.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"results-2\"><span class=\"ez-toc-section\" id=\"Resultados-2\"><\/span>R\u00e9sultats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>L&#039;\u00e9quipe AirSHIFT a d\u00e9couvert qu&#039;un<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/reconciliation.html\">R\u00e9conciliation de l&#039;arbre de r\u00e9action<\/a><br \/>\ncela se passait juste avant chaque route de navigation. Cela signifiait que React mettait inutilement \u00e0 jour la table tournante avant les navigations. Une mise \u00e0 jour inutile de l&#039;\u00e9tat de Redux \u00e9tait \u00e0 l&#039;origine de ce probl\u00e8me. Le r\u00e9parer a permis d&#039;\u00e9conomiser environ 750 ms de temps de script. AirSHIFT a \u00e9galement r\u00e9alis\u00e9 d&#039;autres micro-optimisations qui ont finalement conduit \u00e0 une r\u00e9duction totale de 1 seconde du temps de programmation.<\/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. Chargement paresseux des composants et transfert de la logique co\u00fbteuse aux travailleurs Web <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AirSHIFT a une application de chat int\u00e9gr\u00e9e. De nombreux propri\u00e9taires de magasins communiquent avec les membres de leur personnel via le chat tout en consultant le tableau des \u00e9quipes, ce qui signifie qu&#039;un utilisateur peut taper un message pendant le chargement du tableau. Si le thread principal est occup\u00e9 par des scripts qui restituent la table, l&#039;entr\u00e9e de l&#039;utilisateur peut \u00eatre g\u00eanante.<\/p>\n<p>Pour am\u00e9liorer cette exp\u00e9rience, AirSHIFT utilise d\u00e9sormais React.lazy et Suspense pour afficher des espaces r\u00e9serv\u00e9s pour le contenu du tableau tout en chargeant paresseux les composants r\u00e9els.<\/p>\n<p>L&#039;\u00e9quipe AirSHIFT a \u00e9galement migr\u00e9 une partie de la logique m\u00e9tier co\u00fbteuse \u00e0 l&#039;int\u00e9rieur des composants charg\u00e9s paresseusement vers<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\">travailleurs du Web<\/a>. Cela a r\u00e9solu le probl\u00e8me de jank d&#039;entr\u00e9e utilisateur en lib\u00e9rant le thread principal afin qu&#039;il puisse se concentrer sur la r\u00e9ponse \u00e0 l&#039;entr\u00e9e utilisateur.<\/p>\n<p>Normalement, les d\u00e9veloppeurs sont confront\u00e9s \u00e0 la complexit\u00e9 lorsqu&#039;ils utilisent des travailleurs, mais cette fois <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/comlink\">Comlink<\/a> fait le gros du travail pour eux. Vous trouverez ci-dessous un pseudocode expliquant comment AirSHIFT a travaill\u00e9 sur l&#039;une des op\u00e9rations les plus co\u00fbteuses qu&#039;ils aient jamais eues\u00a0: le calcul des co\u00fbts de main-d&#039;\u0153uvre totaux.<\/p>\n<p><em>Dans App.js, utilisez React.lazy et Suspense pour afficher le contenu de secours lors du chargement<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importer<\/span> R\u00e9agir<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> fain\u00e9ant<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\">fain\u00e9ant<\/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\">importer<\/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\">tandis que<\/span> Chargement en cours<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\">exportation<\/span> <span class=\"token keyword\">d\u00e9faut<\/span> <span class=\"token keyword\">une fonction<\/span> <span class=\"token function\">Appli<\/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\">revenir<\/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>Dans le composant Co\u00fbt, utilisez comlink pour ex\u00e9cuter la logique de calcul<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importer<\/span> R\u00e9agir <span class=\"token keyword\">desde<\/span> <span class=\"token string\">'react'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">importer<\/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\">Ouvrier<\/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\">exportation<\/span> <span class=\"token keyword\">d\u00e9faut<\/span> <span class=\"token keyword\">une fonction<\/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\">attendre<\/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\">attendre<\/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\">revenir<\/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>Impl\u00e9menter une logique de calcul qui s&#039;ex\u00e9cute sur le worker et l&#039;exposer avec comlink<\/em><\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token keyword\">importer<\/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\">importer<\/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\">revenir<\/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> soi<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>R\u00e9sultats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Malgr\u00e9 la quantit\u00e9 limit\u00e9e de logique sur laquelle ils ont travaill\u00e9 en tant que test, AirSHIFT a d\u00e9plac\u00e9 environ 100 ms de son JavaScript du thread principal au thread de travail (simul\u00e9 avec une limitation 4x du processeur).<\/p>\n<p><img alt='travailleur-7404546' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/worker-7404546.png'><\/p>\n<p>AirSHIFT \u00e9tudie actuellement s&#039;ils peuvent charger paresseusement d&#039;autres composants et d\u00e9charger plus de logique sur les travailleurs Web afin de r\u00e9duire davantage le jank.<\/p>\n<h2 id=\"4.-setting-a-performance-budget\"><span class=\"ez-toc-section\" id=\"4-Establecer-un-presupuesto-de-desempeno\"><\/span>4. \u00c9tablissez un budget de performance <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Une fois toutes ces optimisations mises en place, il \u00e9tait primordial de s&#039;assurer que l&#039;application continue de fonctionner dans le temps. AirSHIFT utilise maintenant <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/siddharthkp\/bundlesize\">Taille du paquet<\/a> ne d\u00e9passez pas la taille actuelle des fichiers JavaScript et CSS. En plus de d\u00e9finir ces budgets de base, ils ont cr\u00e9\u00e9 un tableau de bord pour afficher diff\u00e9rents centiles de temps de chargement de la table de d\u00e9calage afin de v\u00e9rifier si l&#039;application fonctionne m\u00eame dans des conditions non id\u00e9ales.<\/p>\n<ul>\n<li>Le temps d&#039;ex\u00e9cution du script est maintenant mesur\u00e9 pour chaque \u00e9v\u00e9nement Redux<\/li>\n<li>Les donn\u00e9es de performance sont collect\u00e9es sur <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.elastic.co\/jp\/\">recherche \u00e9lastique<\/a><\/li>\n<li>La performance des 10e, 25e, 50e et 75e centiles de chaque \u00e9v\u00e9nement est affich\u00e9e avec <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.elastic.co\/jp\/products\/kibana\">Kibana<\/a><\/li>\n<\/ul>\n<p>AirSHIFT surveille maintenant l&#039;\u00e9v\u00e9nement de chargement de la table de d\u00e9calage pour s&#039;assurer qu&#039;il se termine dans les 3 secondes pour les utilisateurs du 75e centile. Il s&#039;agit d&#039;un budget non appliqu\u00e9 pour l&#039;instant, mais ils envisagent des notifications push via Elasticsearch lorsqu&#039;ils d\u00e9passent votre budget.<\/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>    Le tableau de bord Kibana affichant les donn\u00e9es de performances quotidiennes par centiles.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"results-4\"><span class=\"ez-toc-section\" id=\"Resultados-4\"><\/span>R\u00e9sultats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dans le graphique ci-dessus, vous pouvez voir qu&#039;AirSHIFT atteint d\u00e9sormais principalement le budget de 3 secondes pour les utilisateurs du 75e centile et charge \u00e9galement la table des changements en une seconde pour les utilisateurs du 25e centile.En capturant les donn\u00e9es de performances RUM \u00e0 partir de diverses conditions et appareils, AirSHIFT peut d\u00e9sormais v\u00e9rifiez si une nouvelle version de fonctionnalit\u00e9 affecte r\u00e9ellement les performances de l&#039;application ou non.<\/p>\n<h2 id=\"5.-performance-hackathons\"><span class=\"ez-toc-section\" id=\"5-Hackatones-de-rendimiento\"><\/span>5. Hackathons de performance <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bien que tous ces efforts d&#039;optimisation des performances aient \u00e9t\u00e9 importants et percutants, il n&#039;est pas toujours facile d&#039;amener les \u00e9quipes commerciales et d&#039;ing\u00e9nierie \u00e0 donner la priorit\u00e9 au d\u00e9veloppement non fonctionnel. Une partie du d\u00e9fi est que certaines de ces optimisations de performances ne peuvent pas \u00eatre planifi\u00e9es. Ils n\u00e9cessitent de l&#039;exp\u00e9rimentation et une mentalit\u00e9 d&#039;essai et d&#039;erreur.<\/p>\n<p>AirSHIFT organise d\u00e9sormais des hackathons de performance internes d&#039;une journ\u00e9e pour permettre aux ing\u00e9nieurs de se concentrer uniquement sur le travail li\u00e9 aux performances. Dans ces hackathons, ils suppriment toutes les limitations et respectent la cr\u00e9ativit\u00e9 des ing\u00e9nieurs, ce qui signifie que toute mise en \u0153uvre qui contribue \u00e0 la vitesse m\u00e9rite d&#039;\u00eatre envisag\u00e9e. Pour acc\u00e9l\u00e9rer le hackathon, AirSHIFT divise le groupe en petites \u00e9quipes et chaque \u00e9quipe s&#039;affronte pour voir qui peut en tirer le meilleur parti <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Phare<\/a> am\u00e9lioration du score de performance. Les \u00e9quipes deviennent tr\u00e8s comp\u00e9titives ! \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>R\u00e9sultats <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>L&#039;approche hackathon fonctionne bien pour eux.<\/p>\n<ul>\n<li>Les goulots d&#039;\u00e9tranglement des performances peuvent \u00eatre facilement rep\u00e9r\u00e9s en essayant plusieurs approches pendant le hackathon et en mesurant chacune avec Lighthouse.<\/li>\n<li>Apr\u00e8s le hackathon, il est assez facile de convaincre l&#039;\u00e9quipe quelle optimisation privil\u00e9gier pour la mise en production.<\/li>\n<li>C&#039;est aussi un moyen efficace de d\u00e9montrer l&#039;importance de la vitesse. Tous les participants peuvent comprendre la corr\u00e9lation entre la fa\u00e7on dont vous codez et comment cela se traduit en performance.<\/li>\n<\/ul>\n<p>Un effet secondaire int\u00e9ressant a \u00e9t\u00e9 que de nombreuses autres \u00e9quipes d&#039;ing\u00e9nieurs au sein de Recruit se sont int\u00e9ress\u00e9es \u00e0 cette approche pratique et l&#039;\u00e9quipe AirSHIFT organise d\u00e9sormais plusieurs hackathons de vitesse au sein de l&#039;entreprise.<\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Resumen\"><\/span>r\u00e9sum\u00e9 <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ce n&#039;\u00e9tait certainement pas le voyage le plus facile pour AirSHIFT de travailler sur ces optimisations, mais cela en valait certainement la peine. AirSHIFT charge maintenant la table de d\u00e9calage en 1,5 seconde sur la m\u00e9diane, ce qui repr\u00e9sente une am\u00e9lioration de 6 fois par rapport \u00e0 ses performances d&#039;avant-projet.<\/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>Apr\u00e8s la publication des optimisations de performances, un utilisateur a d\u00e9clar\u00e9\u00a0:<\/p>\n<blockquote class=\"w-blockquote\">\n<p>  Merci beaucoup d&#039;avoir acc\u00e9l\u00e9r\u00e9 le chargement de la table de d\u00e9calage. L&#039;organisation du travail post\u00e9 est maintenant beaucoup plus efficace.\n<\/p><\/blockquote>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>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 del&#8230;<\/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\/fr\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/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\":\"fr-FR\"},{\"@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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Cinq fa\u00e7ons dont AirSHIFT a am\u00e9lior\u00e9 les performances d&#039;ex\u00e9cution de votre application React - R Marketing Digital","description":"Une \u00e9tude de cas r\u00e9elle sur l&#039;optimisation des performances de React SPA. 6 novembre 2019 La performance du site Web n&#039;est pas qu&#039;une question","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\/fr\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/","og_locale":"fr_FR","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\/fr\/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":"fr-FR"},{"@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":"Cinq fa\u00e7ons dont AirSHIFT a am\u00e9lior\u00e9 les performances d&#039;ex\u00e9cution de votre application 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":"Une \u00e9tude de cas r\u00e9elle sur l&#039;optimisation des performances de React SPA. 6 novembre 2019 La performance du site Web n&#039;est pas qu&#039;une question","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/five-ways-airshift-improved-the-runtime-performance-of-your-react-application\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@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":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","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":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/posts\/83260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83260"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83260\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83261"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}