From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/tools/performance/ui_tour/index.html | 125 ++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/fr/tools/performance/ui_tour/index.html (limited to 'files/fr/tools/performance/ui_tour') diff --git a/files/fr/tools/performance/ui_tour/index.html b/files/fr/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..b364f3029b --- /dev/null +++ b/files/fr/tools/performance/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: UI Tour +slug: Outils/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +
{{ToolsSidebar}}
+ +

La plateforme d'outils se découpe en 4 parties principales :

+ + + +

Outil

+ +

La boite à outils contient les boutons pour :

+ + + +

+ +

Recordings pane

+ +

The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.

+ +

+ +

Pour un temps donné, un enregistrement est sélectionné, et cet enregistrement est affiché dans le reste de l'outil. Pour sélectionner un enregistrement différent, cliquer sur son entrée dans le panneau. Pour sauvegarder l'enregistrement en tant que fichier d'extension JSON, appuyer sur "Save".

+ +

Vue d'ensemble de l'enregistrement

+ +

Ceci affiche une vue d'ensemble de la totalité de l'enregistrement.This displays an overview of the entire recording, with the x-axis representing time.

+ +

+ +

It contains two elements: an overview of the Waterfall and a frame rate graph.

+ +

Waterfall overview

+ +

This presents a compressed view of the Waterfall:

+ +

+ +

Recorded operations are color-coded using the same scheme as in the main Waterfall view.

+ +

Frame rate graph

+ +

The frame rate gives you an overview of the browser's responsiveness during the recording:

+ +

+ +

See the separate article on frame rate.

+ +

Correlating events

+ +

Because these elements are synchronized, you can correlate events in one element with events in another.

+ +

For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:

+ +

+ +

Zooming in

+ +

You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:

+ +

+ +

Details pane

+ +

The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.

+ +

Waterfall

+ +

The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.

+ +

+ +

To learn much more about the Waterfall, see the separate Waterfall page.

+ +

Call Tree

+ +

The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.

+ +


+ To learn much more about the Call Tree, see the separate Call Tree page.

+ +

Flame Chart

+ +

If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:

+ +

+ +

To learn much more about the Flame Chart, see the separate Flame Chart page.

+ +

Allocations

+ +
+

La vue Allocations est une des nouvautés de Firefox 46.

+
+ +

La vue Allocations ressemble à la vue Call tree view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.

+ +

+ +

The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

To learn much more about the Allocations view, see the separate Allocations page.

-- cgit v1.2.3-54-g00ecf