Discover the New Firefox Profiler
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 490 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47460 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2020244 / 490
4
7
9
10
14
15
16
25
26
29
31
33
34
35
37
40
41
42
43
45
46
47
50
51
52
53
54
58
60
64
65
66
67
70
71
72
74
75
76
77
78
82
83
84
86
89
90
93
94
95
96
98
100
101
105
106
109
110
116
118
123
124
130
135
137
141
142
144
146
151
154
157
159
164
166
167
169
172
174
178
182
184
185
186
187
189
190
191
192
193
194
195
200
202
203
204
205
206
207
208
211
212
214
218
222
225
228
230
232
233
235
236
240
242
244
249
250
251
253
254
258
261
262
266
267
268
271
273
274
275
278
280
281
282
283
284
285
286
288
289
290
291
293
295
296
297
298
301
302
303
305
306
307
310
311
315
317
318
319
328
333
350
353
354
356
359
360
361
370
372
373
374
375
379
380
381
383
385
386
387
388
391
393
394
395
397
398
399
401
409
410
411
414
420
421
422
423
424
425
427
429
430
434
438
439
444
449
450
454
457
458
459
460
461
464
465
466
468
469
470
471
472
480
484
486
487
489
490
00:00
SoftwareTwitterSoftware developerSampling (music)CodeBit rateInformationExecution unitSample (statistics)Event horizonView (database)Stack (abstract data type)Network topologyExpert systemMotion captureProfil (magazine)View (database)System callComputer programmingGraph (mathematics)Goodness of fitRow (database)Line (geometry)User interfaceWeb browserInformationSoftware bugData analysisCASE <Informatik>Bit rateExpert systemSequelWeb pageMathematical analysisSource codeComa BerenicesSampling (statistics)AdditionCodeComputer iconTask (computing)2 (number)Network topologyMultiplication signFunctional (mathematics)Software engineeringSingle-precision floating-point formatStack (abstract data type)Machine codeBranch (computer science)Web 2.0MereologyMotion captureData compressionFrame problemSoftware developerLatent heatElement (mathematics)Graph (mathematics)Scripting languageGreatest elementLogic gateInformation technology consultingReal numberWebsite1 (number)File formatMultilaterationTouchscreenPower (physics)Closed setArrow of timeComputer animation
09:06
Thread (computing)Graph (mathematics)Range (statistics)InformationSample (statistics)Pointer (computer programming)Default (computer science)DemonTrailWeb-DesignerArithmetic progression1 (number)Demo (music)Sheaf (mathematics)InformationMultiplication signDifferent (Kate Ryan album)View (database)Slide ruleContent (media)Computer iconUniform resource locatorCodeSource codeProfil (magazine)Web 2.0Selectivity (electronic)Sampling (statistics)Right angleProcess (computing)Row (database)Category of beingSoftwareRange (statistics)TouchscreenMultilaterationSingle-precision floating-point formatShared memoryGraph (mathematics)Line (geometry)Logic gateRepetitionSoftware developer2 (number)Computer animation
14:42
Profil (magazine)Demo (music)Slide ruleComputer animation
15:04
Profil (magazine)InformationMotion captureWeb pageTap (transformer)Keyboard shortcutComputer animation
15:51
Arithmetic meanConvex hullStructural loadWritingMereologyBitMultiplication signFunctional (mathematics)Closed setView (database)System call2 (number)Table (information)Stack (abstract data type)InformationGroup actionSoftwareCorrespondence (mathematics)Range (statistics)Frame problemProcess (computing)Event horizonPattern languageInterpreter (computing)Graph (mathematics)Computer configurationDifferent (Kate Ryan album)Profil (magazine)Web pageGreatest elementSheaf (mathematics)Java appletRevision controlFlagSoftware developerKeyboard shortcutNetwork topologySpeicherbereinigungCartesian coordinate systemUniform boundedness principleFilm editingCellular automatonFrequencyLevel (video gaming)Physical lawTouchscreenTap (transformer)Android (robot)MathematicsComputer animationLecture/Conference
25:06
Execution unitSlide ruleMatrix (mathematics)InformationMatrix (mathematics)Slide ruleProfil (magazine)Computer animationLecture/Conference
25:55
Open sourcePoint cloudFacebook
Transcript: English(auto-generated)
00:05
Okay, hello everyone and welcome So yeah, as you said, I'm gonna talk about the new Firefox profiler today, and I'm Nazem John I am a software engineer at Mozilla and I'm working on the performance tooling team and
00:20
You can find me there So the Firefox profiler is essentially the profiler dot Firefox dot com so you can visit there and there are some instructions But I'm gonna walk you through everything so bear with me So this is a typical like screenshot from Firefox profiler and like What's happening here? Like there are a lot of stuff going on. Like there are a lot of colors. There are a lot of graphs. So
00:48
It's kind of intimidating at first for people's to use that tool but I'm gonna walk you through all the panels and every detail So you're gonna be more comfortable to use that tool once we're done
01:05
so but essentially you should take a look at back and like we should Learn what is a profiler first? so profiler essentially helps developer to analyze the performance issues and
01:20
Use insight or into how Program works so it does that by sampling the prof program. So what is sampling then? Profiler stopped execution of the program in a like a fixed rate for example one millisecond. So
01:41
and records the relevant data For example, that can be a current stack. It records the data and resumes the profile program later So in this graph you can see a simple program and the work the vertical lines are the profiling profiler sampling and
02:04
those straight lines are the program execution and main calls a calls B and calls C So as you can see on the first peak first sequel actually Profiler missed it because like the red
02:24
Arrows are the stack of the current program and we managed to capture the main B, but at the at the first peak we actually managed to miss it because like the C runs less than one millisecond and
02:44
It just falls between two sampling time and we didn't see it but Rest of it like as you can see on the second peak second sequel. We actually managed to capture that call so it gets all the stack information in an interval time and
03:01
Once we have that we aggregate those data and we create something like this a call tree So this is an example from Firefox actually So there's a main function and there from the main there are other calls So we sample
03:22
Every millisecond and aggregate that data and also we create those timings from that that aggregated data I'm gonna talk about the same the timing later so yeah, as we learn the samples provide a view into the profile program, but as you can see on the
03:42
First sequel we can miss some stuff that happens quickly So markers to the rescue as an additional to the sample data in the profiler we also have marker data and What are markers so they are also very similar to samples
04:02
They provide a view into the executing code but they don't miss anything because we manually add those information in the source code and We also include additional information for example in this picture There is the call stack the stack and then there are some
04:24
Additional information for styling. So this is a marker that we add whenever there's a new styling happens in a web page so We learned those two Main data sources from a profiler, but what is the Firefox profiler now then?
04:47
So the motto of the Firefox profiler is capture performance profile Analyze it share it and the make the web faster so this is again the same one, but there are two main advantages of
05:01
Firefox profiler and The first one is you can see both JavaScript and the native call stack in a single call tree What that means is so when you run a JavaScript function in your web page and if that function
05:21
for example as a DOM element and we need to see the DOM edition in the Firefox source code, so We also after that JavaScript Frame we also see some Firefox related native code execution so you can also see that those informations as well
05:41
Also, you can filter to just JavaScript only. So if you are profiling your web page, you can just see JavaScript that that's what it's important to you and The second part has two branches The first one is for actually non-technical people
06:02
So if you're a non-technical person you can just capture a profile for example Firefox is a performance issue and you you have you can reproduce that but You don't know what to do So what you can do is capture a profile and then share it with an expert in this case
06:22
you can create a bug in bugzilla and you can share the URL of that specific profile data and Some expert can come and see that profile later Also, if you're a technical person, you can capture it yourself it can be again a web page or Firefox and
06:44
You can save it into your desktop or you can share it and keep the URL and then take a look at your data later So we'll now learn that there are actually two main UIs in this first You need to be able to capture a profile and then you need to be able to analyze it
07:02
so we're gonna see the first capture in UI and How to capture a good profile data so first you need to go into the profiler dot Firefox dot com and You just need to follow the instructions. It's pretty straightforward
07:20
there is a big button that says install add-on so you need to install the add-on first and once you install that You're gonna see this pop-up So this an icon will appear on the top right side of your Firefox and once you click that this pop-up appears and
07:41
There are two big like main buttons here. So once the first one is for you to Start recording or stop recording and the second button is to capture that profile So a work a typical workflow is this first you need to
08:01
Make sure that you don't have any background task or tabs in your Firefox So you need to isolate that performance problem as much as possible and once you do that you need to start the profiler and After that, you can do the work that that do you think?
08:22
there is a performance issue, for example, you can if there's a performance issue during the page reload You can start the profiler and then reload it wait until it it's done and then capture the profiler once you do that a new tab will pop up and
08:42
It's gonna bring you the profiler at Firefox dot com again And now you're gonna see the data there and you're gonna see the analysis data Analysis UI that we've seen before Okay, so now we captured the profile data and now we can actually
09:04
Analysis and try to analyze it So this is the UI I know it's complicated at first But this section is the timeline. So as you can see on the top side here, there are some time and information and
09:23
here at first Row, there is a screenshot track so it also records screenshots of your Firefox so you can actually see the UI and the code at the same time and try to see what is happening here and
09:45
You can also hover over those and try to see the bigger screenshots and In this section in this process This is the stack graph. So we were capturing the stack
10:01
during the sampling now we have that data and we aggregate that and We show a dense view here. So it's not great Accessibility wise because there are a lot of colors. We're trying to make it better But the important color for example here is the yellow one because that means JavaScript category
10:23
So you can also see other ones for example DOM as blue and etc and Here you can see The markers that we mentioned before they're more precise there are a lot of them so we again put it into add them to you and
10:42
You can hover over those and see the details of those markers. For example This is a stylin marker and you can see some relevant information About that marker and you can see that to 17 milliseconds, which is quite long usually and
11:01
You can also actually Select a range during that timeline and then you can click into that magnifier icon in the center And you can actually make it make that we you the full view and then you can zoom into that as long as you want to
11:20
see what's happening there and The other thing is we have the panels So at the top of the profiler we have the dense view That we put everything but on the bottom side there are more information for you to see This is more detailed. So I'm not going to go into each tab right now because we're gonna see
11:47
Those into the demo slide so That's easier that way but also So now we are familiar with the UI But if you're a non-technical person, you don't have to care about that. You can you should just know how to
12:07
share that profile so inside the profiler data we have a lot of Different kind of data the first two ones are that we mentioned Those are the main ones samples and markers and we have screenshots network requests
12:25
Metadata, etc. So keep in mind those and so Once you get the UI actually, there's a button on the top right corner Named publish so you can click into that and this pop-up will come up and
12:41
Here you can actually remove some of your personal data before Sharing it because as we can see on the previous slide There are a lot of information and those information can include some personal data as well so here for example, we can
13:00
Remove the screenshots that can be personal information or we can remove the source resource URLs So once you remove those you can click publish and It's gonna just bring you the URL after That upload session is done
13:21
And now you have the URL you can just copy that and send it to someone else or you can post this into the bugzilla comment and some other people can Take a look at that information later And also we have
13:41
Single tab and advanced view so this profile UI is Complicated and there are a lot of Firefox related information in it as well but if you're a web developer, you don't have to take you don't have to know those and you can just
14:02
See your web content track and you can try to analyze it So this is still a work in progress So we are trying to make it the profiler better for web developers so you can easily start using it but
14:20
It's it will happen very soon so you can actually just see the information that you want to see so let's go back to the demo section now and Now we can See those panels and you can see what is happening there
14:47
As you can see when once you open up that profile so by the way, you can get those slides here in that URL and You can get that demo
15:01
Profile so you can take a look at that So here you can click on that and once you have that you can see it So here this is an example profile that we captured before but before that I want to actually Show how we capture it. So we've seen the UI before but still I want to show you how to do that
15:25
So the here not here here. We have the add-on so you can Press start and now we are capturing the information of Firefox and that web page And now you can do some stuff for example, we are doing the tap switch now to
15:45
Analyze the performance issue of that tap switch and now we are done with it and we can click capture but I would recommend you to use the shortcuts instead because once you open this Pop up it actually affects the performance of Firefox like you can it
16:05
Creates a new view and paints it so To you can minimize the usage of that pop-up and then just use the shortcuts instead So that's much better. So once you done that it captures it. So this is the capturing part and
16:24
Let's go back to our profile so we have the screenshots here so you can actually hover over those and see the Bigger version of those and For example, this is a profile that we captured
16:40
during the Wikipedia and We try to open the dev tools panel and then close it afterwards. So this part is The one that we open the panel as you can see here. So we are open in this dev tools panel here and this
17:01
Big Stack is the dev tools initialization so here we start to initialize that dev tools as you can see and Here it's done at the end of that stack. We initialized it and Afterwards here. We are closing back again and this tag corresponds to the closing part so you can see
17:27
what Functions that we are calling during the initialization during the Dev tools opening and during the closing and For example here a garbage collection happens once we are done with that data
17:46
So and those are the markers that you can just hover over those and see more information about them and Usually Red bar means that you need to fix something
18:01
There's something interesting going on there because there's a delay happening there. So you need to minimize the event processing delays essentially and Here we are doing a lot of work so we can just zoom into that view as well to
18:20
see what's happening and Also, we can click into a marker to Automatically select that range and we can zoom into that wheel. So Once you're in there, you can go back here to the full range So let's take a look at that section because there are a lot of
18:45
information there and there are some interesting things going on so we zoomed in here and We are going to See the bottom of the page the tabs so The this part is the part that we need to analyze and we need to see what is happening
19:05
so you can click each or you can option click and you can Expand everything and you can try to analyze this data. So For example here there's a start there's a main function of Firefox and there's other functions happening
19:22
but if you're another Firefox Developer you don't need to know those you can just switch here to JavaScript and you can only see the frames that you actually Can change and here you can again
19:42
Expand those and try to see for example on the left side. There's a run in time and this callback this promise callback takes the forty nine percent of the time and it is 295 milliseconds, so it's very high and we can see the self time here
20:01
so the running time is the whole time including the Nested function calls and the self time means the time actually that function itself takes so we can try to see for example, there's a
20:20
Ten milliseconds half time half time happening here, so That's a red flag so we can try to see what that load function actually does and maybe we can try to make it more performant or Let's see other things
20:40
So there's a seven millisecond again the load function interesting so That means that that load function does a lot of work I don't know if it actually has to do it or maybe you can do some tweaks and make it more performant Here another load function so we start to see a pattern here
21:05
So there are a lot of individual load function calls happening. Maybe we can just merge them together try to Call everything at once instead of just doing everything Or Yeah, we can just try to
21:22
See how we can reduce that time and this is the call tree basically. So this is the that and the second Tab is a bit more visual. So this is the flame graph and This is essentially the same data with the call tree, but you you now have a bottom-up
21:43
call stack here, so you see the Longest running functions here. For example, this is a promise call stack that we've seen before and once you go up you see the other functions and You can hover over those again and see
22:03
More details about those functions and for example, you can see how long overall takes or how long JavaScript interpreter actually takes that time and You can again change this text you can change the JavaScript only or native only so native only means that
22:24
basically C++ rust or if you're an on Android it can be Kotlin or Java so it depends and this is the JavaScript and If you change it back to all all stacks, it will show you everything here
22:43
So the stack chart is also pretty similar with the first one But the difference with the flame graph is the first thing this is the top-down and the most important Difference is this X axis is actually the time. So if you
23:01
Go back to the full range. You actually see those frames here and You see those frames Here so you can see the timing information and what? frame is being called in what time so and
23:21
You Can go back to marker chart. So this is the same data with the those markers, but it's more detailed and Grouped for example, you can see the DOM group. There's garbage collection graphics JavaScript, etc. And You can see more information if you hover over those and
23:44
Marker table is the same data, but with a table Also, by the way, you can filter whatever you want for example if you want to see the load Events you can write load events and you'll see load DOM events. For example
24:04
This is the before load before unload and load and stuff and you can see this network load function markers, so And you can do that filtering pretty much everywhere you can do that here as well you can see
24:24
only load functions and The last tab is the network tab. So that Helps you to see what network requests are being made in this profile session and you can again
24:40
hover over those and you can see how long does it take and You can see a more detailed view into that HTTP request Yeah, I think we are pretty much out of time like we have two seconds two minutes I guess so I'm gonna
25:03
Close up the demo and So you can Learn more information in this documentation you can go in there and try to see you can also get those slides and You can take a look at those again, and if you have any question, please
25:26
just join into our matrix channel it is profiler and Just ask us anything. We are happy to help you You can just ask us. So thank you. Thank you so much
25:44
and If you have any questions, please ask yeah, we can have like one or two questions Till I ask the next speaker to come and set up. Yeah, I'm coming
Recommendations
Series of 2 media