diff options
Diffstat (limited to 'files/fr/performance')
5 files changed, 493 insertions, 0 deletions
diff --git a/files/fr/performance/about_colon_memory/index.html b/files/fr/performance/about_colon_memory/index.html new file mode 100644 index 0000000000..814b9bd611 --- /dev/null +++ b/files/fr/performance/about_colon_memory/index.html @@ -0,0 +1,186 @@ +--- +title: 'about:memory' +slug: 'Performance/about:memory' +translation_of: 'Mozilla/Performance/about:memory' +--- +<p>about:memory est une page spécifique de Firefox qui vous permet de visualiser, sauvegarder, charger et suivre l'évolution de l'usage de la mémoire par Firefox. Elle offre aussi d'autres opérations concernant la mémoire, comme le démarrage et l'effacement des traces du Gabarge Collector (GC) et du Cycle Collector (CC) ou encore les rapports DMD ("Dark Matter Detector"). about:memory est disponible dans toutes les versions et ne requiert aucune préparation pour être utilisé.</p> + +<h2 id="Comment_générer_des_rapports_sur_la_mémoire">Comment générer des rapports sur la mémoire</h2> + +<p>Nous supposons ici que vous souhaitez étudier l'utilisation de la mémoire par Firefox, peut-être pour vos besoins personnels, ou peut-être parce que quelqu'un vous a demandé de générer des "rapports mémoire" afin d'investiguer un de vos problèmes. Suivez alors les étapes suivantes :</p> + +<ul> + <li>Lors d'un événement intéressant (par ex. lorsque la mémoire consommée par Firefox devient importante), ouvrir un nouvel onglet et entrer "about:memory" dans la barre d'adresse, puis appuyer sur "Entrée"</li> + <li>Si vous disposez d'un moyen de communication permettant d'envoyer des fichiers (comme Bugzilla ou un email), cliquer sur bouton "Measure and save..." (mesurer et sauvegarder). Ceci ouvrira une fenêtre de dialogue afin d'enregistrer le rapport sur la mémoire dans un fichier (le fichier généré aura une extension en <code>.json.gz</code>). Vous pourrez alors utiliser ce fichier comme pièce jointe ou le téléverser ("uploader") quelque part. Le destinataire aura alors la possibilité de visualiser le contenu de ce fichier sur l'onglet about:memory de leur propre Firefox.</li> + <li>Si votre moyen de communication ne vous permet que d'envoyer du texte simple (par ex. une zone de texte sur la page Internet d'un service d'assistance), cliquer sur le bouton "Measure..." (mesurer). Ceci générera une structure arborescente textuelle sur la page about:memory. Cette structure n'est que du texte, ce qui vous permet alors de copier puis coller tout ou partie de ce texte dans n'importe quel champ texte, vous évitant de devoir faire une copie d'écran. Ce texte contient moins d'informations qu'un rapport sur la mémoire sous forme de fichier, mais est la plupart du temps suffisant pour diagnostiquer la cause des problèmes. Il est inutile de cliquer sur le bouton "Measure..." de façon répétée, car cela ferait augmenter la consommation de mémoire par la page about:memory, en raison de la suppression et de la régénération d'un grand nombre d'éléments du DOM.</li> +</ul> + +<p>Il est important de noter que les deux formes d'information générée (fichier ou texte) peivent contenir des données relevant de votre vie privée, comme la liste complète des pages Internet ouvertes dans vos différents onglets. Si vous ne souhaitez pas partager de telles informations, vous pouvez cocher la case "anonymize" (anonymiser) avant de cliquer sur "Measure and save..." ou "Measure...". Ceci entraînera la suppression des données sensibles, mais cela rendra aussi l'investigation de la mémoire plus difficile.</p> + +<h2 id="Charger_des_rapport_sur_la_mémoire_à_partir_d'un_fichier">Charger des rapport sur la mémoire à partir d'un fichier</h2> + +<p>Le plus simple pour charger (et afficher) un rapport à partir d'un fichier est d'utiliser le bouton "Load..." (charger). Vous pouvez aussi utiliser le bouton "Load and diff..." (charger et comparer) pour afficher un comparatif entre deux rapports sur la mémoire.</p> + +<p>Lorsque vous souhaitez visualiser un unique fichier, il est aussi possible de le charger automatiquement lors de l'affichage de la page about:memory, en ajoutant une référence au fichier dans le nom de la page, sous la forme :</p> + +<pre>about:memory?file=/home/username/reports.json.gz +</pre> + +<p>Cette possibilité trouve sa pleine utilité lors de l'affichage d'un rapport sur la mémoire obtenu sur un dispositif fonctionnant avec Firefox OS.</p> + +<p>Les rapport contiennent des données au format JSON et sont compressés comme des archives gz. Ces fichiers peuvent être chargés tels quels, mais peuvent aussi être décompressés avant chargement.</p> + +<h2 id="Interpréter_les_rapport_sur_la_mémoire">Interpréter les rapport sur la mémoire</h2> + +<p>Pratiquement tout ce que vous pouvez consulter dans about:memory dispose d'un tool-tip explicatif. Le survol de n'importe quel bouton permet de voir une description de son effet. Le survol d'une mesure affichée permet de voir une explication sur son sens.</p> + +<h3 id="Quelques_bases_sur_les_mesures"><span class="mw-headline" id="Basics">Quelques bases sur les mesures</span></h3> + +<p>La pluspart des mesures sont exprimées en octets, mais certaines sont exprimées en pourcentages ou en nombres.</p> + +<p>La plupart des mesures sont présentées comme des arborescence, comme :</p> + +<pre> 585 (100.0%) -- preference-service + └──585 (100.0%) -- referent + ├──493 (84.27%) ── strong + └───92 (15.73%) -- weak + ├──92 (15.73%) ── alive + └───0 (00.00%) ── dead +</pre> + +<p>Les feuilles de l'arbre représentent les mesures réelles, tandis que les branches (qui regroupent des sous-branches et/ou des feuilles) présentent la somme des valeurs des feuilles ou des sous-branches qu'elle contiennent.</p> + +<p>Cette structure arborescente permet de décomposer une mesure en catégories, sous-catégories, sous-sous-catégories etc. avec autant de niveaux que nécessaire. Aucune mesure d'un arbre ne recoupe d'autres mesures du même arbre (autrement dit, aucune valeur n'est utilisée dans deux branches d'un même arbre).</p> + +<p>Les chemins au sein d'un arbre peuvent être décrits en séparants les différents niveaux par un '/'. Ainsi, <code>preference-service/referent/weak/dead</code> représente le chein jusqu'à la feuille 'dead' dans la figure ci-dessus.</p> + +<p>Les sous-arbres peuvent être déployés ou repliés en cliquant dessus. Si vous êtes confronté à un arbre présentant une très grande consommation de mémoire, il peut être intéressant de replier tous les sous-arbres immédiatement en dessous de la racine, puis de déployer uniquement les sous-arbres intéressants.</p> + +<h3 id="Sections_2"><span class="mw-headline" id="Sections">Sections</span></h3> + +<p>Les rapports sur la mémoire sont structurés par processus, avec un processus par section. Chaque section concernant un processus comporte les sous-sections décrites ci-dessous.</p> + +<h4 id="Section_Allocations_explicites">Section Allocations explicites</h4> + +<p>Cette sous-section contient un seul arbre, nommé "explicit", qui présente les volumes de mémoire alloués par des appels explicites aux fonctions d'allocation de blocs (comme <code>malloc</code> ou <code>new</code>) ou non-blocs (comme <code>mmap</code> <code>ou VirtualAlloc</code>).</p> + +<p>L'exemple ci-dessous présente un rapport pour session dans laquelle des onglets ont été ouverts sur cnn.com, techcrunch.com, and arstechnica.com. Différents sous-arbres ont été déployés, d'autres repliés, pour améliorer la présentation.</p> + +<pre>191.89 MB (100.0%) -- explicit +├───63.15 MB (32.91%) -- window-objects +│ ├──24.57 MB (12.80%) -- top(http://edition.cnn.com/, id=8) +│ │ ├──20.18 MB (10.52%) -- active +│ │ │ ├──10.57 MB (05.51%) -- window(http://edition.cnn.com/) +│ │ │ │ ├───4.55 MB (02.37%) ++ js-compartment(http://edition.cnn.com/) +│ │ │ │ ├───2.60 MB (01.36%) ++ layout +│ │ │ │ ├───1.94 MB (01.01%) ── style-sheets +│ │ │ │ └───1.48 MB (00.77%) -- (2 tiny) +│ │ │ │ ├──1.43 MB (00.75%) ++ dom +│ │ │ │ └──0.05 MB (00.02%) ── property-tables +│ │ │ └───9.61 MB (05.01%) ++ (18 tiny) +│ │ └───4.39 MB (02.29%) -- js-zone(0x7f69425b5800) +│ ├──15.75 MB (08.21%) ++ top(http://techcrunch.com/, id=20) +│ ├──12.85 MB (06.69%) ++ top(http://arstechnica.com/, id=14) +│ ├───6.40 MB (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) +│ └───3.59 MB (01.87%) ++ (4 tiny) +├───45.74 MB (23.84%) ++ js-non-window +├───33.73 MB (17.58%) ── heap-unclassified +├───22.51 MB (11.73%) ++ heap-overhead +├────6.62 MB (03.45%) ++ images +├────5.82 MB (03.03%) ++ workers/workers(chrome) +├────5.36 MB (02.80%) ++ (16 tiny) +├────4.07 MB (02.12%) ++ storage +├────2.74 MB (01.43%) ++ startup-cache +└────2.16 MB (01.12%) ++ xpconnect</pre> + +<p>Un certain niveau d'expertise est nécessaire pour comprendre tous les détails. Cependant, quelques éléments méritent d'être soulignés :</p> + +<ul> + <li>La valeur "explicite" à la racine de l'arbre représente l'ensemble de la mémoire allouée par les appels explicites aux fonctions d'allocation.</li> + <li>Le sous-arbre nommé "window-objects" représente tous les objets de type Window de Javascript, y compris les onglets du navigateur et les fenêtres d'interaction. Par exemple, le sous-arbre"top(http://edition.cnn.com/, id=8)" représente l'onglet ouvert sur cnn.com, et le sous-arbre "top(chrome://browser/content/browser.xul, id=3)" représente la fenêtre principale du navigateur.</li> + <li>Parmi les mesures de chaque fenêtre, on trouve des sous-arbres pour JavaScript ("js-compartment(...)" and "js-zone(...)"), les feuilles de style, le DOM etc.</li> + <li>Il est clair que l'onglet sur cnn.com consomme plus de mémoire que celui sur techcrunch.com, qui à son tour en utilise plus que l'onglet sur arstechnica.com.</li> + <li>Les sous-arbres avec des noms comme "(2 tiny)" sont des noeuds artificiels insérés pour regrouper et replier par défaut des sous-arbres peu intéressants. Si vous cochez la case "verbose" (verbeux) avant de lancer les mesures, tous les arbres seront présentés dépliés, et aucun noeud articiel ne sera inséré.</li> + <li>Le sous-arbre "js-non-window" représente la mémoire consommée par JavaScript et qui ne provient pas des fenêtres mais du noyau du navigateur.</li> + <li>La valeur "heap-unclassified" représente la mémoire allouée par bloc qui n'est mesurée par aucun rapporteur de mémoire. Cette valeur représente habituellement 10 à 20% de la valeur de "explicit". Lorsqu'elle dépasse ces ratios, cela indique que des rapporteurs de mémoire spécifiques devraient être ajoutés. <a href="/en-US/docs/Mozilla/Performance/DMD" title="Performance/MemShrink/DMD">DMD</a> peut alors être utilisé pour déterminer quels rapporteurs doivent être utilisés..</li> + <li>D'autres mesures concernent les autres types de contenus (comme les images) ou les sous-systèmes du navigateur (comme les cache de démarrage ou XPConnect).</li> +</ul> + +<p>La consommation de mémoire par les modules complémentaires ajoutés à Firefox est aussi déterminée, comme le montre l'exemple ci-dessous.</p> + +<pre>├───40,214,384 B (04.17%) -- add-ons +│ ├──21,184,320 B (02.20%) ++ {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}/js-non-window/zones/zone(0x100496800)/compartment([System Principal], jar:file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7Bd10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d%7D.xpi!/bootstrap.js (from: resource://gre/modules/addons/XPIProvider.jsm:4307)) +│ ├──11,583,312 B (01.20%) ++ jid1-xUfzOsOFlzSOXg@jetpack/js-non-window/zones/zone(0x100496800) +│ ├───5,574,608 B (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2} +│ │ ├──5,529,280 B (00.57%) -- window-objects +│ │ │ ├──4,175,584 B (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293) +│ │ │ └──1,353,696 B (00.14%) ++ top(chrome://chatzilla/content/output-window.html, id=4298) +│ │ └─────45,328 B (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([System Principal], file:///Users/njn/Library/Application%20Support/Firefox/Profiles/puna0zr8.new/extensions/%7B59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7D/components/chatzilla-service.js) +│ └───1,872,144 B (00.19%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zones/zone(0x100496800)</pre> + +<p>Plusieurs élément de cet exemple méritent d'être expliqués :</p> + +<ul> + <li>Certains modules complémentaires sont identifiés par un nom, comme Tree Style Tab. D'autres ne sont identifiés que par un nombre hexadécimal. Vous pouvez regarder sur la page about:support pour retrouver le module identifié par un tel nombre. Ainsi, <code>59c81df5-4b7a-477b-912d-4e0fdf64e5f2</code> correspond à Chatzilla.</li> + <li>La consommation de mémoire d'un module complémentaire est mesurée séparément et présentée dans un sous-arbre dédié.</li> + <li>Pour les modules complémentaires qui utilisent une fenêtre dédiée, comme Chatzilla, la consommation de mémoire de ces fenêtres sera présentée dans le sous-arbre dédié au module concerné.</li> + <li>Par contre, la consommation de mémoire des overlays (par les modules qui mettent en oeuvre les overlays XUL, comme AdBlock Plus) n'est pas présentée dans le sous-arbre dédié au module. Elle est présentée dans les sous-arbres classiques (hors modules complémentaires) et ne pourra pas être reconnue comme causée les modules.</li> +</ul> + +<h4 id="Section_des_Autrres_Mesures">Section des Autrres Mesures</h4> + +<p>Cette section comporte de nombreuses arborescences, dont certaines reprennent les mesures indiquées dans l'arbre "explicit" sous une autre forme. Par exemple, dans l'arbre "explicit", toutes les mesures concernant le DOM et les agencements (layouts) sont agrégées fenêtre par fenêtre, tandis que dans l'arbre "Other Measurements", ces mêmes mesures sont agrégées pour l'ensemble du navigateur, comme dans les exemples ci-dessous.</p> + +<pre>26.77 MB (100.0%) -- window-objects +├──14.59 MB (54.52%) -- layout +│ ├───6.22 MB (23.24%) ── style-sets +│ ├───4.00 MB (14.95%) ── pres-shell +│ ├───1.79 MB (06.68%) ── frames +│ ├───0.89 MB (03.33%) ── style-contexts +│ ├───0.62 MB (02.33%) ── rule-nodes +│ ├───0.56 MB (02.10%) ── pres-contexts +│ ├───0.47 MB (01.75%) ── line-boxes +│ └───0.04 MB (00.14%) ── text-runs +├───6.53 MB (24.39%) ── style-sheets +├───5.59 MB (20.89%) -- dom +│ ├──3.39 MB (12.66%) ── element-nodes +│ ├──1.56 MB (05.84%) ── text-nodes +│ ├──0.54 MB (02.03%) ── other +│ └──0.10 MB (00.36%) ++ (4 tiny) +└───0.06 MB (00.21%) ── property-tables</pre> + +<p>Tous les arbres de la section "Other Measurements" ne reprennent cependant pas des mesures déjà indiquées dans l'arbre "explicit" : les mesures d'utilisation de mémoire par le services de gestion des préférences ("preference-service") n'existe pas dans l'arbre "explicit".</p> + +<p>Certaines mesures sont aussi présentées sans structure arborescente dans le bas de la section des autres mesures, comme sur l'exemple ci-dessous.</p> + +<pre> 0.00 MB ── canvas-2d-pixels + 5.38 MB ── gfx-surface-xlib + 0.00 MB ── gfx-textures + 0.00 MB ── gfx-tiles-waste + 0 ── ghost-windows + 109.22 MB ── heap-allocated + 164 ── heap-chunks + 1.00 MB ── heap-chunksize + 114.51 MB ── heap-committed + 164.00 MB ── heap-mapped + 4.84% ── heap-overhead-ratio + 1 ── host-object-urls + 0.00 MB ── imagelib-surface-cache + 5.27 MB ── js-main-runtime-temporary-peak + 0 ── page-faults-hard + 203,349 ── page-faults-soft + 274.99 MB ── resident + 251.47 MB ── resident-unique +1,103.64 MB ── vsize</pre> + +<p>Quelques détails sur certaines mesures :</p> + +<ul> + <li>"resident". Il s'agit de la consommation de mémoire physique. Si vous cherchez une valeur résumant la consommation de mémoire, c'est probablement la valeur la plus pertinente.</li> + <li>"vsize". Consommation de mémoire virtuelle, qui est habituellement la valeur la plus élevée (en particulier sur Mac). Elle n'a vraiment d'intérêt que sur les machines 32 bits, comme Win32. Il y a aussi la valeur "vsize-max-contiguous" (qui n'est mesurée que sur certaines plateformes, et n'est pas présentée dans l'exemple ci-dessus), qui indique la taille du plus grand bloc contigu d'adresses virtuelles. Lorsque ce nombre est petit, il est probable que l'allocation de mémoire dysfonctionnera bientôt en raison du trop petit espace d'adresses virtuelles.</li> + <li>Différentes mesures liées à la gestion des graphiques ("gfx-*"), qui varient selon les plateformes. Les graphiques sont souvent une des raisons d'une importante consommation de mémoire, et ces mesures sont utiles pour détecter de telles situations.</li> +</ul> + +<h4 id="Section_sur_le_Système">Section sur le Système</h4> + +<p>Cette section n'apparait que sur les dispositifs équipés de Firefox OS. Elle contient des mesures sur l'ensemble du dispositif obtenues auprès du système d'exploitation. Entre autres, cette section aide à comprendre précisément l'utilisation de mémoire sur l'ensemble du dispositif.</p> diff --git a/files/fr/performance/index.html b/files/fr/performance/index.html new file mode 100644 index 0000000000..12ed2145eb --- /dev/null +++ b/files/fr/performance/index.html @@ -0,0 +1,69 @@ +--- +title: Performance +slug: Performance +tags: + - Add-ons + - Mozilla + - Performance + - TopicStub +translation_of: Mozilla/Performance +--- +<p>Les articles liés à partir d'ici vous aideront à améliorer les performances, que vous développiez du code Mozilla principal ou un add-on.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Documentation">Documentation</h3> + + <dl> + <dt><a href="/en/Performance/Reporting_a_Performance_Problem" title="en/Performance/Reporting_a_Performance_Problem">Signaler un problème de performance</a></dt> + <dd>Un guide convivial pour signaler un problème de performance. Un environnement de développement n'est pas requis.</dd> + <dt><a href="/en/Extensions/Performance_best_practices_in_extensions" title="en/Extensions/Performance best practices in extensions">Meilleures pratiques en matière de performances dans les extensions</a></dt> + <dd>Un guide des "meilleurs pratiques" de performance pour les développeurs d'extensions.</dd> + <dt><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Mesurer les performances de démarrage des Add-ons</a></dt> + <dd>Un guide pour les développeurs d'add-ons sur la configuration d'un environnement de test de performances.</dd> + <dt><a href="/en/XUL_School/Appendix_A:_Add-on_Performance" title="en/XUL School/Appendix A: Add-on Performance">XUL School: Add-ons Performances</a></dt> + <dd>Conseils aux développeurs d'add-ons pour les aider à éviter de nuire aux performances des applications.</dd> + <dt><a href="/en/Performance/GPU_performance" title="en/GPU performance">Performances GPU</a></dt> + <dd>Conseils pour le profilage et l'amélioration des performances lors de l'utilisation d'un GPU</dd> + </dl> + + <p><span class="alllinks"><a class="internal" href="/Special:Tags?tag=Performance" title="Special:Tags?tag=Performance">Afficher toutes les pages marquées avec "Performance"...</a></span></p> + </td> + <td> + <h3 id="Outils_de_profilage_et_de_performance">Outils de profilage et de performance</h3> + + <dl> + <dt><a href="/en/Performance/Profiling_JavaScript_with_Shark" title="en/Performance/Profiling JavaScript with Shark">Profilage de JavaScript avec Shark</a> {{ gecko_minversion_inline("1.9") }}</dt> + <dd>Comment utiliser le profileur Mac OS X Shark pour profiler le code JavaScript dans Firefox 3.5 ou version ultérieure.</dd> + <dt><a href="/en/Performance/Profiling_with_Shark" title="en/Performance/Profiling with Shark">Profilage avc Shark</a></dt> + <dd>Comment utiliser l'outil Shark d'Apple pour profiler le code Mozilla.</dd> + <dt><a href="/en/Performance/Profiling_with_Instruments" title="en/Performance/Profiling with Instruments">Profilage avec Instruments</a></dt> + <dd>Comment utiliser l'outil Instruments d'Apple pour profiler le code Mozilla.</dd> + <dt><a href="/en/Performance/Profiling_with_Xperf" title="en/Performance/Profiling with Xperf">Profilage avec Xperf</a></dt> + <dd>Comment utiliser l'outil Xperf de Mcrosoft pour profiler le code Mozilla.</dd> + <dt><a href="/en/Performance/Profiling_with_Zoom" title="en/Performance/Profiling with Zoom">Profilage avec Zoom</a></dt> + <dd>Zoom est un profileur pour Linux réalisé par les personnes qui ont créé Shark</dd> + <dt><a href="/en/Performance/Profiling_with_the_Built-in_Profiler" title="en/Performance/Profiling with the Built-in Profiler">Profilage avec le profileur intégré</a> {{ gecko_minversion_inline("16.0") }}</dt> + <dd></dd> + <dt><a href="/en/Performance/Measuring_performance_using_the_PerfMeasurement.jsm_code_module" title="en/Performance/Measuring performance using the PerfMeasurement.jsm code module">Mesure des performances à l'aide du module de code PerfMeasurement.jsm</a> {{ gecko_minversion_inline("2.0") }}</dt> + <dd>Utilisation de <a href="/en/JavaScript_code_modules/PerfMeasurement.jsm" title="en/JavaScript code modules/PerfMeasurement.jsm"><code>PerfMeasurement.jsm</code></a> pour mesurer les données de performances dans votre code JavaScript.</dd> + <dt><a href="/en-US/docs/Performance/Adding_a_new_Telemetry_probe" title="https://developer.mozilla.org/en-US/docs/Performance/Adding_a_new_Telemetry_probe">Ajout d'une nouvelle sonde de télémétrie</a></dt> + <dd>Information sur la façon d'ajouter une nouvelle mesure au système de rapport de performance de télémétrie.</dd> + <br> + <br> + <br> + + <dd></dd> + </dl> + + <h3 id="Rubriques_connexes">Rubriques connexes</h3> + + <dl> + <dd><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a>, <a href="/En/Developer_Guide" title="en/Developing_Mozilla">Développement de Mozilla</a>, <a href="/en/Extensions" title="en/Extensions">Extensions</a>, <a href="/en/Addons" title="en/Addons">Add-ons</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/fr/performance/profiling_with_the_built-in_profiler/index.html b/files/fr/performance/profiling_with_the_built-in_profiler/index.html new file mode 100644 index 0000000000..2336813699 --- /dev/null +++ b/files/fr/performance/profiling_with_the_built-in_profiler/index.html @@ -0,0 +1,109 @@ +--- +title: Mesurer les performances avec le profileur intégré +slug: Performance/Profiling_with_the_Built-in_Profiler +translation_of: Mozilla/Performance/Profiling_with_the_Built-in_Profiler +--- +<p>{{ gecko_minversion_header("16.0") }}</p> +<p>Firefox a maintenant un profileur intégré (nom de code SPS). Ce profileur permet, entres autres, de mieux mesurer la réactivité, de déterminer plus précisément à quoi est dû un changement dans les performances, et s'exécute dans des environnements et des plate formes pour lesquelles les profileurs externes ne sont généralement pas disponibles, telles que l'ordinateur d'un utilisateur standard, ou un appareil Android fermé par son constructeur.</p> +<div class="note"> + <strong>Note:</strong> La plate forme technique du profileur est terminée, mais nous travaillons encore sur l'ajout de fonctionnalités. Surveillez le composant "Gecko Profiler" dans <a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a> pour plus d'informations.</div> +<h2 id="Stackwalking_contre_pseudostack">"Stackwalking" contre "pseudostack"</h2> +<p>Le profileur est conçu pour opérer dans deux modes différents : "Pseudostack" (par défaut) ou "stackwalking".</p> +<h3 id="Pseudostack">Pseudostack</h3> +<p>Pseudostack (le défaut) requiert une version de Firefox qui a été intrumentée au niveau du code source avec <code>SAMPLE_LABEL("NAMESPACE", "NAME");'</code>. Ceci ajoute un élément dans la pile d'appel qui est utilisé par le profileur pour déterminer par échantillonnage quel code est en train de s'exécuter. Ce mode est compatible avec toutes les architectures et environnements techniques.</p> +<p>For this to be effective, you do need to liberally use <code>SAMPLE_LABEL</code> throughout the code, and unfortunately it won't be able to dig into system library and drivers.</p> +<p>Because of the small overhead of the instrumentation, the sample label shouldn't be placed inside hot loops. A profile reporting that a large portion is spent in "Unknown" code indicates that the area being executed doesn't have sample label. As we focus on using this tool and add additional sample labels this will improve.</p> +<h3 id="Stackwalking">"Stackwalking"</h3> +<p>"Stackwalking" est une fonctionnalité dépendant de l'architecture de la plate forme d'exécution dont la prise en charge est encore incomplète. L'objectif est de déterminer quel code s'exécute en parcourant la pile des appels sans instrumentation, sur les architectures où cela est possible. Ceci permet d'avoir plus de détails sur les appels, et aide à analyser les problèmes dans lesquels du temps est passé dans les librairies systèmes ou les pilotes. Nous travaillons sur les fonctions nécessaires pour ce parcours de pile et l'identification des symboles, et toute aide est la bienvenue.</p> +<h2 id="Disponibilité">Disponibilité</h2> +<p>Le profileur fonctionne en mode soit "Pseudostack" soit "stackwalking" en fonction de votre environment. Voir la description au-dessus pour les différences entre ces 2 modes.</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="row"> </th> + <th scope="col">Compilé en local</th> + <th scope="col">Version "Nightly"</th> + <th scope="col">Version officielle (Gecko 15.0+)</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Windows</th> + <td>Stackwalking (<a href="/en/Performance/Profiling_with_the_Built-in_Profiler_and_Local_Symbols_on_Windows" title="https://developer.mozilla.org/en/Performance/Profiling_with_the_Built-in_Profiler_and_Local_Symbols_on_Windows">étapes de configuration à suivre</a>)</td> + <td>Stackwalking</td> + <td>Pseudostack</td> + </tr> + <tr> + <th scope="row">Mac</th> + <td>Stackwalking</td> + <td>Stackwalking</td> + <td>Pseudostack</td> + </tr> + <tr> + <th scope="row">Linux</th> + <td>Pseudo stack (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=757186" title="https://bugzilla.mozilla.org/show_bug.cgi?id=757186">Bug</a> <span class="external">concernant l'activation du</span> stackwalking)</td> + <td>Pseudo stack (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=757186" title="https://bugzilla.mozilla.org/show_bug.cgi?id=757186">Bug</a><span class="external"> concernant l'activation du stackwalking</span>)</td> + <td>Pseudostack</td> + </tr> + <tr> + <th scope="row">Fennec</th> + <td>Pseudostack</td> + <td>Non supporté (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=751034" title="https://bugzilla.mozilla.org/show_bug.cgi?id=751034">Bug</a>)</td> + <td>Non supporté(<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=751034" title="https://bugzilla.mozilla.org/show_bug.cgi?id=751034">Bug</a>)</td> + </tr> + <tr> + <th scope="row">B2G</th> + <td>Pseudostack (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=758697" title="https://bugzilla.mozilla.org/show_bug.cgi?id=758697">patchs à appliquer au source</a>)</td> + <td>???</td> + <td>Non supporté(<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=751034" title="https://bugzilla.mozilla.org/show_bug.cgi?id=751034">Bug</a>)</td> + </tr> + </tbody> +</table> +<h2 id="Exécuter_le_profileur">Exécuter le profileur</h2> +<ol> + <li>Utiliser une <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">version "nightly"</a> ou compiler avec <code>ac_add_options --enable-profiling</code> (activez aussi les optimizations afin que que le profilage soit significatif).</li> + <li>Installer <a class="link-https" href="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi" title="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi">la dernière version de l'extension Profileur</a>. <strong>Si le module n'est pas visible, activer 'Affichage ->Barre d'outils->Barre des modules'</strong>. Laissez l'extension se mettre à jour.</li> + <li>Contrôler l'exécution du profileur depuis le menu qui s'ouvre en cliquant sur la partie Profileur de la barre des module en bas à droite.</li> + <li>Démarrer le profiler avant d'exécuter l'action anormalement lente ou le laisser simplement tourner</li> + <li>Utilisez le bouton "Analyse" ou le raccourci Ctrl-Shift-O (Cmd-Shift-O sur Mac OS X) pour visualiser le résultat en cours sur le site du Profileur</li> + <li>Sauvegarder le profil en local, ou utiliser l'option Upload et mémoriser l'URL associée.</li> + <li>Ouvrir un bug sur bugzilla concernant le problème de performance avec le fichier ou l'URL joint, ou les transmettre à une personne capable de s'en occuper</li> +</ol> +<h3 id="Profiler_une_compilation_en_local_sous_Windows">Profiler une compilation en local sous Windows</h3> +<p>If you built Firefox for Windows <strong>locally</strong> and you would like to use the local symbols with the profiler, you will need to run an additional tool; see <a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler_and_Local_Symbols_on_Windows" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler_and_Local_Symbols_on_Windows">Profiling with the Built-in Profiler and Local Symbols on Windows</a>.</p> +<h3 id="Profiler_Firefox_mobile">Profiler Firefox mobile</h3> +<ol> + <li>You'll need a custom build, this build should be built with optimization, <code>STRIP_FLAGS="--strip-debug"</code> and <code>ac_add_options --disable-elf-hack</code> (until we fix {{bug(747033)}}) but should <strong>NOT</strong> be built with <code>--enable-profiling</code>.</li> + <li>You'll need to have <code>adb</code> and <code>arm-eabi-addr2line</code> in your bash <code>PATH</code>, so use <code>locate arm-eabi-addr2line</code> (on linux) or<code> mdfind name:arm-eabi-addr2line</code> (on OS X) and stick an export to its location in <code>~/.bash_profile</code>. The extension will invoke bash to use <code>adb</code> and <code>addr2line</code>.</li> + <li>Install the <a class="link-https" href="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi" title="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi">latest version of the extension</a> in your host machine's Firefox browser that has your phone reachable via ADB.</li> + <li>On your first run use "Get Libs". You'll need to repeat this step when switching phones.</li> + <li>Start Firefox mobile normally and hit "Pull". This will recognize the instance of Firefox mobile and restart it with profiling enabled. Run your benchmark and hit "Pull" again.</li> +</ol> +<h3 id="Profiler_Boot_to_Gecko">Profiler "Boot to Gecko"</h3> +<div class="note style-wrap"> + <p><strong>Note:</strong> Pour l'instant une carte SD est requise, jusqu'à ce que le {{bug(758697)}} soit fermé.</p> +</div> +<ol> + <li>You'll need a local build of Boot to Gecko; the default build configuration is fine.</li> + <li>You'll need to have <code>adb</code> and <code>arm-eabi-addr2line</code> in your bash <code>PATH</code>, so use <code>locate arm-eabi-addr2line</code> (on linux) or<code> mdfind name:arm-eabi-addr2line</code> (on OS X) and stick an export to its location in <code>~/.bash_profile</code>. The extension will invoke bash to use <code>adb</code> and <code>arm-eabi-</code><code>addr2line</code>. If they are not there the process will fail or you'll only see raw addresses</li> + <li>In order to get symbols to work you may need to avoid stripping them. I'm not sure the best way to do this. Some candidates are adding <code>STRIP_FLAGS="--strip-debug"</code> to <code>gonk-misc/default-gecko-config</code> (this is copied to <code>objdir-gecko/.mozconfig</code> by some part of the build system)</li> + <li>Install the <a class="link-https" href="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi" title="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi">latest version of the extension</a> in your host (Desktop) machine's Firefox browser that has your phone reachable via ADB.</li> + <li>On your first run use "Get Libs". You'll need to repeat this step when switching reflashing/switching phone (this step needs to be done every time you update gecko). "Get Libs" will skip any existing files, so you'll need to delete them so that the new ones get pulled. They are stored in <code>/tmp/[device id]</code>/</li> + <li>Make sure B2G is running and hit "Pull". This will recognize the instance of B2G and restart it with profiling enabled. Run your benchmark and hit "Pull" again.</li> +</ol> +<p>Profiling content processes. Apply this <a href="http://people.mozilla.com/~jmuizelaar/b2g-child-process-profile.patch" title="http://people.mozilla.com/~jmuizelaar/b2g-child-process-profile.patch">patch</a> to the profiler add-on.</p> +<div class="warning style-wrap"> + <p><strong>Warning:</strong> When you're done profiling restart Boot to Gecko using <code>adb shell stop b2g && adb shell start b2g</code>.</p> +</div> +<h2 id="Contribuer">Contribuer</h2> +<p>Le bug listant les problèmes ouverts est le {{ bug("713227") }}. Le source se situe dans {{ Source("tools/profiler") }}.</p> +<p>Le source de l'extension Profileur se trouve sur : <a class="link-https" href="https://github.com/bgirard/Gecko-Profiler-Addon" rel="freelink">https://github.com/bgirard/Gecko-Profiler-Addon</a>.</p> +<p>Le dépôt de source Cleopatra se trouve sur : <a class="link-https" href="https://github.com/bgirard/cleopatra" rel="freelink">https://github.com/bgirard/cleopatra</a>.</p> +<h2 id="Fonctionnalités_prévues">Fonctionnalités prévues</h2> +<p>Here's a list of feature ideas that we haven't committed to yet; feel free to add your ideas:</p> +<ul> + <li>A "Doctor" extension that would detect if the user's browser periodically hangs for more than 500 ms and provide a UI notification with some profile data. The profile data can either be reported to Mozilla to correlate problems, have built in heuristics for resolving the problem (disabling the offending add-on, plug-in tab, db caches etc...), or be used by support for diagnostics.</li> + <li>Automatically turn on the profiler a few seconds prior to triggering the hang detectors and attach a profile to the minidump.</li> +</ul> +<h2 id="Capture_d'écran">Capture d'écran</h2> +<p><a href="/@api/deki/files/6062/=profiler.png" title="profiler.png"><img alt="3b.png" class="internal default" src="/@api/deki/files/6191/=3b.png" style="width: 803px; height: 562px;"></a></p> diff --git a/files/fr/performance/scroll-linked_effects/index.html b/files/fr/performance/scroll-linked_effects/index.html new file mode 100644 index 0000000000..9540c172cf --- /dev/null +++ b/files/fr/performance/scroll-linked_effects/index.html @@ -0,0 +1,98 @@ +--- +title: Effets liés au défilement +slug: Performance/Scroll-linked_effects +translation_of: Mozilla/Performance/Scroll-linked_effects +--- +<p class="summary">La définition d’un effet lié au défilement est un effet mis en œuvre dans une page web où quelque chose change en fonction de la position de défilement, par exemple une propriété de positionnement, dans le but de créer un effet de parallaxe. Cet article aborde les effets liés au défilement, leur impact sur les perfomances, les outils associés, et les techniques possibles d’atténuation.</p> + +<h2 id="Les_effets_de_défilement_expliqués">Les effets de défilement expliqués</h2> + +<p>Souvent, les effets de défilement sont mis en œuvre en écoutant l’événement {{event("scroll")}} puis en mettant à jour des éléments de la page d’une certaine façon (généralement les propriétés CSS {{cssxref("position")}} ou {{cssxref("transform")}}). Vous pouvez trouver un exemple de ces effets ici : <a class="external" href="https://github.com/RByers/css-houdini-drafts/blob/master/css-scroll-api/UseCases.md">CSS Scroll API: Use Cases</a>.</p> + +<p>Ces effets fonctionnent très bien avec les navigateurs où le défilement se fait de manière synchrone sur le <em>thread</em> (fil d’exécution) principal du navigateur. Toutefois, la plupart des navigateurs supportent aujourd’hui une sorte de défilement asynchrone afin de proposer aux utilisatrices et utilisateurs une expérience stable à 60 images par seconde. Dans le modèle de défilement asynchrone, la position visuelle du défilement est mise à jour dans le <em>thread</em> de composition, et est visible à l’utilisatrice et l’utilisateur avant que l’évènement {{event("scroll")}} soit mis à jour dans le DOM et émis sur le <em>thread</em> principal. Cela signifie que les effets mis en œuvre seront légèrement en retard par rapport à la position du défilement telle que l’utilisatrice ou l’utilisateur la voit à l’écran. Cela peut rendre l’effet décalé ou saccadé, ce que nous voulons éviter.</p> + +<p>Les exemples suivants présentent des effets qui fonctionneraient <em>mal</em> avec le scroll asynchrone, accompagnés de versions équivalentes qui fonctionnent correctement.</p> + +<h3 id="Exemple_1_positionnement_sticky">Exemple 1 : positionnement sticky</h3> + +<p>Voici une mise en œuvre d’un effet de <a href="/fr/docs/Web/CSS/position#Positionnement_adh%C3%A9rent_(sticky)">positionnement <em>sticky</em> (adhérent)</a>, où la div <code>"toolbar"</code> va adhérer au haut de l’écran à mesure que vous défilez vers le bas.</p> + +<pre class="brush: html"><body style="height: 5000px" onscroll="document.getElementById('toolbar').style.top = Math.max(100, window.scrollY) + 'px'"> + <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> +</body></pre> + +<p>Cette mise en œuvre de positionnement <em>sticky</em> s’appuie sur un gestionnaire d’évènement <code>scroll</code> pour repositionner la div <code>"toolbar"</code>. Comme le gestionnaire d’évènement <code>scroll </code>est exécuté dans le JavaScript sur le <em>thread</em> principal du navigateur, il sera asynchrone par rapport au défilement vu par l’utilisatrice ou l’utilisateur. Par conséquent, avec le défilement asynchrone, le gestionnaire d’évènement sera retardé par rapport au défilement visible, et ainsi la div ne restera pas visuellement fixe comme prévu. Au lieu de cela, elle va se déplacer avec le défilement de l’utilisatrice ou utilisateur, puis « sauter » vers sa position attendue quand le gestionnaire d’évènement <code>scroll</code> est exécuté. Ces déplacements et sauts constants produisent un effet visuel saccadé. Une manière de mettre cela en œuvre sans le gestionnaire d’évènement <code>scroll</code> est d’utiliser la propriété CSS conçue dans ce but :</p> + +<pre class="brush: html"><body style="height: 5000px"> + <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> +</body></pre> + +<p>Cette version fonctionne bien avec le défilement asynchrone car la position de la div <code>"toolbar"</code> est mise à jour par le navigateur à mesure que l’utilisatrice ou l’utilisateur fait défiler la page.</p> + +<h3 id="Exemple_2_défilement_magnétique">Exemple 2 : défilement magnétique</h3> + +<p>{{deprecated_header}}</p> + +<p>Voici une mise en œuvre de défilement magnétique, où la position du défilement est ramenée vers une destination particulière quand le défilement de l’utilisatrice ou utilisateur s’arrête près de cette destination.</p> + +<pre class="brush: html"><body style="height: 5000px"> + <script> + function snap(destination) { + if (Math.abs(destination - window.scrollY) < 3) { + scrollTo(window.scrollX, destination); + } else if (Math.abs(destination - window.scrollY) < 200) { + scrollTo(window.scrollX, window.scrollY + ((destination - window.scrollY) / 2)); + setTimeout(snap, 20, destination); + } + } + var timeoutId = null; + addEventListener("scroll", function() { + if (timeoutId) clearTimeout(timeoutId); + timeoutId = setTimeout(snap, 200, parseInt(document.getElementById('snaptarget').style.top)); + }, true); + </script> + <div id="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> +</body></pre> + +<p>Dans cet exemple, un gestionnaire d’évènement <code>scroll</code> détecte si la position du défilement est à moins de 200 pixels du haut de la div <code>"snaptarget"</code>. Le cas échéant, il déclenche une animation pour ramener la position du défilement sur le haut de la div. Comme cette animation est gérée par JavaScript sur le <em>thread</em> principal du navigateur, elle peut être interrompue par d’autres codes JavaScript s’exécutant dans d’autres onglets ou d’autres fenêtres. Par conséquent, il peut arriver que l’animation apparaisse saccadée et pas aussi fluide qu’attendu. À la place, utiliser la propriété CSS {{cssxref("CSS_Scroll_Snap_Points", "snap points")}} permettra au navigateur de gérer l’animation de manière asynchrone, produisant un effet visuel fluide.</p> + +<pre class="brush: html"><body style="height: 5000px"> + <style> + body { + scroll-snap-type: proximity; + scroll-snap-destination: 0 0; + } + #snaptarget { + scroll-snap-coordinate: 0 -8px; + } + </style> + <div id="snaptarget" style="position: relative; top: 200px; width: 100%; height: 200px; background-color: green"></div> +</body></pre> + +<p>Cette version fonctionne de manière fluide dans le navigateur même si le <em>thread</em> principal du navigateur est occupé par de longs scripts.</p> + +<h3 id="Autres_effets">Autres effets</h3> + +<p>Dans de nombreux cas, les effets liés au défilement peuvent être réécris en utilisant le CSS et en faisant en sorte qu’ils soient calculés sur le <em>thread</em> de composition. Toutefois, dans certains cas, les API actuelles proposées par les navigateurs ne permettent pas cela. Dans tous les cas, cependant, Firefox affichera un avertissement dans la console de développement (à partir de la version 46) s’il détecte la présence d’un effet lié au défilement sur une page. Les pages qui utilisent des effets de défilement sans écouter les évènements <code>scroll</code> en JavaScript n’auront pas cet avertissement. Voir l’article de blog <a href="https://staktrace.com/spout/entry.php?id=834">Asynchronous scrolling in Firefox</a> pour des exemples supplémentaires d’effets qui peuvent être implementés en utilisant CSS pour éviter les saccades.</p> + +<h2 id="Améliorations_futures">Améliorations futures</h2> + +<p>À l’avenir, nous aimerions supporter davantage d’effets dans le compositeur. Dans ce but, nous avons besoin de vous (oui, vous !) pour nous en dire plus sur le genre d’effets liés au défilement que vous essayez de mettre en œuvre, afin que nous puissions trouver de bons moyens de les supporter dans le compositeur. Actuellement, il y a quelques propositions d’API qui permettraient de tels effets, et elles ont chacune leurs avantages et leurs inconvénients. Les propositions actuellement à l’étude sont :</p> + +<ul> + <li><a href="https://w3c.github.io/web-animations/">Web Animations</a> : Une nouvelle API pour contrôler precisément les animations web en JavaScript, avec une <a href="https://wiki.mozilla.org/Platform/Layout/Extended_Timelines">proposition additionelle</a> de relier la position de défilement au temps et d’utiliser cela comme ligne temporelle pour l’animation.</li> + <li><a href="https://docs.google.com/document/d/18GGuTRGnafai17PDWjCHHAvFRsCfYUDYsi720sVPkws/edit?pli=1#heading=h.iy9r1phg1ux4">CompositorWorker</a> : Permet à JavaScript d’être exécuté sur le <em>thread</em> compositeur par petits fragments, à condition qu’il ne fasse pas baisser le nombre d’images par seconde.</li> + <li><a href="https://docs.google.com/document/d/1VnvAqeWFG9JFZfgG5evBqrLGDZYRE5w6G5jEDORekPY/edit?pli=1">Scroll Customization</a> : Introduit une nouvelle API permettant au contenu de définir comment un delta de défilement est appliqué et consommé. Au moment où ces lignes sont écrites (<time datetime="2015-12-14T21:20:35+01:00">décembre 2015</time>), Mozilla ne prévoit pas de supporter cette proposition, mais elle est inclue pour l’exhaustivité.</li> +</ul> + +<h3 id="Appel_à_l’action">Appel à l’action</h3> + +<p>Si vous avez des pensées et des opinions sur :</p> + +<ul> + <li>une ou plusieurs des propositions dans le contexte les effets liés au défilement </li> + <li>des effets liés au défilement que vous essayez de mettre en œuvre ;</li> + <li>toute autre idée ou problème en relation ;</li> +</ul> + +<p>Contactez-nous ! Vous pouvez vous joindre à la discussion sur la liste de diffusion <a href="https://lists.w3.org/Archives/Public/public-houdini/">public-houdini</a>.</p> diff --git a/files/fr/performance/signaler_un_probleme_de_performances/index.html b/files/fr/performance/signaler_un_probleme_de_performances/index.html new file mode 100644 index 0000000000..a01158b775 --- /dev/null +++ b/files/fr/performance/signaler_un_probleme_de_performances/index.html @@ -0,0 +1,31 @@ +--- +title: Signaler un problème de performances +slug: Performance/Signaler_un_probleme_de_performances +tags: + - Performances + - Profilage + - QA + - tests +translation_of: Mozilla/Performance/Reporting_a_Performance_Problem +--- +<p>Cet article va vous expliquer comment signaler un problème de performances au moyen de <a href="/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler">l'extension Gecko Profiler</a>.</p> + +<h2 id="Installation_de_l'extension_Gecko_Profiler">Installation de l'extension Gecko Profiler</h2> + +<ol> + <li>Téléchargez et lancez une <a class="external" href="http://nightly.mozilla.org/" title="http://nightly.mozilla.org/">version nightly</a> de Firefox pour votre plateforme. Avant de la lancer, assurez-vous de fermer toutes les autres instances de Firefox ;</li> + <li>Assurez-vous que cette version fonctionne correctement. Pour cela, allez dans « À propos de Nightly » et vérifiez qu'à la troisième ligne, « nightly » est bien le canal de mise à jour. L'icône devrait être un globe bleu ;</li> + <li>Téléchargez <a class="external" href="https://github.com/bgirard/Gecko-Profiler-Addon/raw/master/geckoprofiler.xpi" title="geckoprofiler.xpi">la dernière version de l'extension Gecko Profiler</a> et installez-la en faisant glisser le .xpi au dessus de la fenêtre de Firefox ;</li> + <li>L'extension apparaitra sous la forme d'une icône de globe à droite de la barre d'URL ;</li> + <li><strong>N'oubliez pas de désactiver ou de désinstaller l'extension si vous ne l'utilisez plus.</strong></li> +</ol> + +<h2 id="Utilisation_du_profileur">Utilisation du profileur</h2> + +<ol> + <li>Essayez de reproduire le problème de performances. Si possible, laissez-le se manifester pendant 5 à 10 secondes ;</li> + <li>Cliquez sur l'icône de l'extension et sélectionnez « Analyse ». Essayez de le faire dans les secondes qui suivent l'apparition du souci de performances. L'extension n'enregistre que quelques secondes. Si vous voyez apparaitre un gros bloc rouge sur la ligne du temps, c'est bon signe ;<br> + <img alt="" src="https://perf-html.io/e9a699daa7c33fcf80c361278055c65d.png" style="height: 536px; width: 780px;"></li> + <li>Les données vont s'ouvrir dans un nouvel onglet. Un bouton « Share » en bas à gauche va envoyer les données collectées vers un serveur de Mozilla et fournir un lien pour y accéder. Copiez l'adresse de ce lien via un clic droit. Créez un ticket dans Bugzilla pour décrire le problème et collez-y ce lien, ou envoyez-le directement à la bonne personne. Essayez de décrire précisément le contexte afin de permettre de reproduire le problème. Indiquez l'URL et ce qu'il faut faire pour que survienne le souci (par exemple faire défiler la page sur gmail.com).<br> + </li> +</ol> |