 Okay, hello everyone and welcome So yeah, as you said, I'm gonna talk about the new Firefox profiler today, and I'm now some John I am a software engineer at Mozilla, and I'm working on the performance tool in team You can find me there So the Firefox profiler is essentially the profiler that firefox.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 a 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 It's kind of intimidating at first for peoples 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 So but essentially we 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 Gives insight or into how Program works, so it does that by sampling the pro program. So what is sampling then? so Profiler stop the execution of the program in a like a fixed rate for example one millisecond so 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 those straight lines are the program execution and Main calls a calls B and call C So as you can see on the first peak first sequel actually a Profiler missed it because like the red arrows are the stack of the current Program and we managed to capture the main B, but at the first peak we actually managed to miss it because like the C runs less than one millisecond and 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 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 they're from the main there are other calls So we sample Every millisecond and aggregate that data and also we create those timings from that that aggregated data I'm gonna talk about the time the timing later So yeah as we learn the samples provide a view into the profile program But as you can see on the 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. They are 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 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? 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 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 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 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 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 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 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. So we're going to see the first capturing ui and How to capture a good profile data so first you need to go into the profiler.Firefox.com and You just need to follow the instructions. It's pretty straightforward. 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 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 for a typical workflow is this first you need to 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 there's a performance issue for example you can if there is 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 It's gonna bring you the profile at Firefox.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 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 timing information and 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 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 this stack 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 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 dense through you and You can hover over those and see the date details of those markers For example, this is a styling marker and you can see some relevant information About that marker and you can see that took 17 milliseconds, which is quite long usually and 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 view the full view and then you can zoom into that and as long as you want to 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 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 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 Metadata etc. So keep in mind those and so Once you get the UI actually there is a button on the top right corner named publish so you can click into that and this pop-up will come up and 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 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 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 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 see Your web content track and you can try to analyze it. And 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 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 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 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 So 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 Analyze the performance issue of that tap switch and now we are done with it and we can click capture but I will 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 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've done that it captures it. So this is the capturing part and 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 during the Wikipedia and We try to open the DevTools 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 opening this DevTools panel here and this Big stack is the DevTools initialization. So here we start to initialize that DevTools 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 stack corresponds to the closing part so you can see what Functions that we are calling during the initialization during the DevTools opening and during the closing and For example here a garbage collection happens once we are done with that data 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. 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 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 are 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 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 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 But if you're not a 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 Expand those and try to see for example on the left side. There's a running time and this Callback this promise callback takes the 49% of the time and it is 295 millisecond. So it's Very high and we can see the self time here. 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 10 millisecond self time self 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 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. 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 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 call stack here, so you see the Longest running functions here, for example, this is the 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 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 Basically C++ rust or if you're an Android it can be Kotlin or Java It depends and this is the JavaScript and if you change it back to all all stacks, it will show you everything here 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 Go back to the full range you actually see those frames here and You see those frames here. So you can see the time and information and what frame is being called in what time so and 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 the garbage collection graphics JavaScript, etc and You can see more information if you hover over those and 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 This is the before load before on load 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 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 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 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 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 If you have any questions, please ask yeah, we can have like one or two questions Do I ask the next speaker to come and set up? Yeah, I'm coming