Using the Firefox Profiler for web performance analysis
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.
Altınova, Nazım Can
The Firefox Profiler is a profiler that is built into Firefox. It has tighter integration with Firefox than external profilers. With its special annotations on Firefox's source code, it tells you what's happening at a point in time on your JavaScript code. With various measurements, it can provide more information and insight into your web application. During the talk, I will be briefly explaining the profilers, how to capture a good profile and how to analyze the profile data. I will be sharing Firefox Profiler specific features and how to make the best use of them. In the end of the slides, I will be doing a demo on how to analyze a performance problem. A profiler is a tool that monitors the execution of an application and gathers the data about the program execution in that time frame. Using a profiling tool to look at problems can make it a lot easier to figure out what’s going on in the application. It helps you to get detailed information about the execution of your application and it allows you to understand the behavior of it. At Mozilla, we are working hard to make the Firefox Profiler better for web developers. In Firefox, we are replacing the old performance panel inside the Developer Tools with Firefox Profiler so people can fully utilize all the new features that come with Firefox Profiler. We are both happy and excited to share more about this tool!
 Hi everyone, thanks for coming to my talk. Today I will be talking about using the Firefox Profiler for Web Performance Analysis. I am Nazim Janalsnova, I am currently living in Berlin and I am originally from Turkey and I am a software engineer at Mozilla. I am working in the performance tooling team which is responsible of Firefox Profiler and these are my Twitter and GitHub handles if you are curious. So today I am going to be talking about briefly what a Profiler is and then I am going to switch to what Firefox Profiler is and its advantages are and talk about how to capture a Profile and then after I am going to talk about how to capture a good Profile and after this I am going to be showing you the Profiler Analysis UI and then I am going to show you the Profiler sharing feature and lastly I am going to do a demo session where I am going to open up a Profile and show you the UI in a more interactive way and then I will analyze two performance issues. So these performance issues are actually from Firefox Profiler itself so we are going to be profiling the Profiler and the first performance issue is about it is written over a big loop and the second one is about a reflow issue. So if you are curious about the Firefox Profiler already you can check out Profile.Firefox.com but we are going to get into the details pretty soon anyway. So this is a quick preview about what you are going to see when you open up an analysis UI in the Firefox Profiler but so it is kind of crowded if you are looking at it at the first time but don't worry if it is looking intimidating so we are going to get into the details of the UI pretty soon and you are going to understand all the components. But first we need to know what a Profiler is. In a very broad explanation Profiler is a tool that helps developers to analyze performance issues and it gives insight. So I know that this is a very broad explanation but this is because there are lots of different types of Profilers that are event based Profilers, statistical Profilers, instrumentations and heap Profilers for memory Profilers. So they all do different things under the hood but essentially the goal is the same. They give insight about your program and about the execution of your program. So it will really take a lot of time to explain all those types but at least I can explain to you what is the Firefox Profiler. So it is a built-in Profiler that comes with Firefox so you can profile your web apps, your web extensions or even Firefox itself with it. Firefox Profiler is a statistical Profiler in its core but there are also other types of data sources like markers and screenshots and so it is a lot richer than just a statistical Profiler. So when you record a Profile, statistical Profilers works like this. So when you start recording it stops the execution of the program every one millisecond and gets all the information that it needs. There can be the call stack or CPU usage or any other type of information that it needs and then resumes the program. So it continues to do that every one millisecond or every end millisecond and then after that when you capture that Profile it aggregates all this data and uses statistical approximation to visualize it for you. So a little bit of history. So this is the old performance tab in the developer tools panel. So that tab for both recording and the analysis. And in the new one in the Firefox Profiler we have two different UIs now. The recording UI and the analysis UI. This is because recording UI should be very minimal and the analysis UI also should be more powerful by utilizing all the space. So that's why we have two different UIs now. So this is the motto of Firefox Profiler. Capture a Profile, analyze it, share it and make the web faster. And let's see what the main advantages of the Firefox Profiler are. So it has more information with markers, screenshots, network requests and different type of visualizations and more. Also this is one of the things that were actually written in the motto. So you can capture a Profile and then share it with an expert. So this is pretty important because previously it wasn't as easy to share a Profile data with someone else. So but now in this case you can either be the expert or somebody else can be the expert. And let's say that you are the expert and you cannot reproduce the issue. You can tell your colleague who can reproduce the issue to just capture a Profile for you and send it to you. Then with that Profile you will be able to see what is that program doing at that moment and you can understand the issue better. So or somebody else can be the expert and that way you can just capture a Profile and send it to them and they will be able to understand the issue better with that recording. And let's see how to capture a Profile then. Actually there are multiple ways to enable the Firefox Profiler but I think this is the easiest one. So you can go to Profile.Firefox.com as I told you and then follow the instructions. That's pretty much it because there is a big button that says enable the Profiler menu button. When you click on that a menu button will appear on the top right corner of your Firefox and then when you click on that little arrow you will see this pop up. So this is the recording UI as I've shown you before. There are not a lot of things to show here. There are settings which is web developers by default and this is the most lightweight version. So I would recommend to use that and if you want to learn more you can click on that link and that will redirect you to the documentation but also you can find the documentation link at the end of these slides. And there is just start recording and capture recording button. But also it's good to note that you can directly start and capture a Profile with the shortcuts. This is pretty important because sometimes you wouldn't want to open the pop up all the time because opening a pop up also creates an overhead for the Firefox and you wouldn't want the recording of this pop up visualization in your profile. So you can just use the shortcuts which is Ctrl shoot 1 and Ctrl shoot 2. So now we've looked at how to capture Profile. Now let's see how to capture a good Profile. So because take away is to isolate the problem as much as possible. We don't want to see unrelated information in the Profile because that can distract us very easily. So it's not a must but it's a good practice to remove the unrelated tabs and make sure that nothing else can interfere with the program that you are profiling and skewed the data. So the second thing is to make sure you reproduce the result you want because sometimes you might be looking at an intermittent issue and it may be tricky to reproduce. So you need to check the result in your web application to make sure that the result is the thing that you want. And also check in the Profile analysis UI that you captured it successfully and you're happy with the result because sometimes you can start the Profile in too late or you can end it too early so you may miss the important piece. So don't hesitate to take multiple Profiles and don't be afraid of like just discarding the old ones if you're not happy with them. And now we've seen how to capture Profile. The next step is the Profiler analysis. So let's see the Analysis UI. So as I've shown you before this is the Analysis UI and at the top you are going to see the timeline. And this is an overview of the Firefox's execution of your tab that you're profiling. It's a great way to see what's going on because the X axis is the time and the other categories or other colors are the functions that are being called. So you can understand in which time what type of function is being called. And it's also a great place to navigate in your Profile. So for the navigation we have this range selection. You can drag and drop a range and zoom in that view by clicking on that magnifier button. So when you click on that this will use the 100% of the width and all the information in the Analysis UI will be updated for the view that you're seeing only. And also in this timeline we have the Screenshots. So that's a great visual indicator to see what's happening in the web page when you are recording this Profile. And for example when you are calling a function or when you're clicking somewhere. So when you hover over a screenshot also in the timeline you will see this bigger version of the screenshot so you can see more details. Also below the Screenshots we have the category Graph. So this is the Graph of the functions that are being called but they are aggregated by the category. And all the colors in that Graph represents a different category. So for example in this Graph yellow means JavaScript, blue means DOM and orange means GC. So if you see a lot of oranges intermittently all the time that means that we're doing a lot of GC and then you can try to understand why we are doing this and you can try to reduce that GC time because that can create an overhead overall. And under the category view we have the Markers. So Markers are important events that are happening inside the Firefox's code execution. So they are more precise and they also include additional information. So that's why they are pretty important and you can see a lot of things, a lot of insights. As you can see in these they are just black boxes but when you hover over those you are going to see a lot of information. Also I'm going to show you in the next slide. Also the good thing to note that like you can actually create your own markers by using the performance mark and performance measure APIs from JavaScript directly. So when you hover over those little squares you are going to see this Marker tooltip. So this tooltip gives you a lot more information about those squares. For example at first it gives you the time spent for that marker and then the name and additional information. In this case this is the styles marker and it gives you even the all styles related numbers. And in this area we have the resources panel. So this was actually collapsed at first so it wasn't visible but you can click and expand it. And when you expand it you are going to see the iframe that belongs to that web page. So in this case this was the cnn.com and as you can see there are 10 iframes and all of them are either tracking iframes or iframes that are related to ads. And actually if you look at that like most of them are pretty empty and that's because Firefox does a pretty good job on tracking the I mean removing the tracking iframes and that is thanks to the enhanced tracking protection. But if you look at the last iframe there are some activity going on. So this was because this is the ads loading in that time. So we've seen the timeline now and the timeline was the overview overall. And at the bottom side we have the panels and these panels are a lot more comprehensive and a lot more detailed. So when you are done with the timeline and when you are having an over evane when you understand where you should look then you switch back to the panels and understand or try to understand what is happening in a more detailed way. So there are lots of tabs in this panel so I'm not gonna explain everything right now because it's a lot better to do it in the demo section so I'm gonna defer that to that time. So we've talked about sharing a profile before now let's see how we can actually share it. So on the top right corner you're gonna see an upload button. When you click on that you're gonna see this panel. So there are some checkbox in it. So these checkboxes are for including or excluding some information that may or may not be personally identifiable. So for example there are screenshots, there are URLs or extension information. So these type of things can be personally identifiable and you may not be comfortable sharing those. So before uploading the profile you can uncheck those and that way you may you will not share the things that you're uncomfortable with. And lastly when you click on that upload button you're gonna see that permalink and you can use that permalink to either send it to your colleague or you can just save it somewhere and then you can take a look at that profile later on. So now we've actually seen a lot of things and this was all the things that I wanted to show in the slides. Now I want to switch back to the demo section and tell you more about the UI and then analyze the performance issues. So this is an example profile and this is actually the same profile that I've shown you in the slides. So you're gonna see something like that. So when you hover over the screenshots you're gonna see the bigger versions and when you hover over those category graph and you're gonna see all the categories for example this is JavaScript, there's GC there happening, there are layout happening, another GC etc. And there are markers as you can see. So these markers are to show you what kind of events are being happening at that moment. For example there are some DOM events happening and there is big ready state change event happened etc. So and these are the panels that we've seen before but let me introduce you more about them. So there's Coltree, FlameGraph, StackChart, MarkerChart, MarkerTable and Network. So let's start with Network because this is the easiest one I guess. And I'm sure you're pretty familiar with the network panels and network requests so this is pretty similar to that. You see for example edition.sienand.com and you see how long it took and you see the breakdown of this network event too. So it took 204 milliseconds to load. So you can see other things as well. And in the MarkerTable and MarkerChart you see the more details of these markers. So the MarkerChart is pretty visual and pretty similar to the markers in the timeline actually. So you see but we separate them in a more categorized way because you see the DOM category here, you see the graphics, JavaScript, layout, network etc. So you can see what is happening and since there are also some information in here like you can understand what type of events that are being happening at that moment. And when you double click on that you will directly zoom into that wheel and it can go in if you want. Or you can also try to go in like this and then you can go out by using this. So and the MarkerTable is the table version of MarkerChart. So you can also right click on those copy, copy, marker, JSON. You can do the same things with this too. And for the Caltree, FlameGraph and StackChart we use that the samples that were collected here thanks to the statistical profile that I've mentioned before. So here we aggregate all the samples and show you for example in the roots of course everything took 100% of the total samples. But when you go down and go inside you're gonna see the breakdown. For example this JS run script took 9.7%. And of course you can just click on this JavaScript only and only focus on your JavaScript instead of some Firefox internals. So you can also option click on those or alt click and that will automatically expand everything. So since this is the cnn.com they're all minified functions but for your web page you will see the better function names. And also you can invert the call stack. When you invert it you will see the functions that took most of the time. So this is 3% of total samples and this is the longest running function in that profile. So also inverting the call stack actually gives you pretty interesting information too. And in the frame graph of course you need to you cannot invert it but in the flame graph you also see the visualized version of the Caltree. So it's the same data but with a different visualization. So you can still see what type of events are being happening at that time and then you can see what is being called. For example event handler none null calls this and this and then eventually offset hide is being called. And stack chart is also pretty similar but it's also like the opposite way. So flame graph is bottom to top and stack chart is top to bottom but also the difference is that the x axis of the stack chart is actually time. So it's pretty similar to what you see in this graph. For the flame graph x axis doesn't mean anything actually. So yeah we've seen the profiler so this is the permalink you can get, this is the reupload button if you can upload and this is the information about this profile. So let's go back to another profile and then this is a bug actually that I want to solve with you. So there is a performance issue with this so let me show you. When we resize this page it takes a lot of time to finish the resizing. As you see it just finished. So it shouldn't be like this right? When you make it bigger again it also takes a lot of time to resize back. So we need to figure out why this is taking so long. That's why I'm going to start the profile. So I've got the profile from profile.firefox.com now it's here so I'm going to start the profiler with control shift 1 and then resize it. And I'm going to wait until it's done but I'm also ready to just capture the profile now. So it's not quite done yet and when it's done now I'm going to capture it. So now I captured it. As you can see there are lots of reflows happening so you can clearly see that there is a reflow issue here because there are hundreds of reflows, reflow markers and you can look at the marker chart here there are lots of reflows. Also you can focus on this area because when you see a red marker that means firefox wasn't responsive at that time. So you see a huge red marker there and that means bad things are happening here. So if you look at that jank marker I mean this reflow markers there are hundreds of them. And let's look at the flame graph. Let's see what we can see, what we can figure out. And so this is the reflow we already seen so we should look at the reflow. So you can either go back to only JavaScript but also it's good to see the reflow because we want to know what is actually triggering the reflow right. So the thing that is being triggered is get bounding client-rekt and it's being called by update with. So actually you can see the same data called tree 2. You can just invert it and you're going to see that there is a reflow happening all the time. When you go in you are going to see the bounding client-rekt and that is being called by update with. So I'm going to just right click and copy the function name and I'm going to go to my code base and then search this. So this is the function that is being called all the time. So and this is the get bounding client-rekt that is responsible of the reflow. So this is, this should be improved or like we should either reduce the call of this because whenever we call the get bounding client-rekt it always triggers a reflow. So we should avoid using this function as much as possible. But since we have lots of tracks here it's calling like 800 times or something. So that's why that's the problem here. So actually this, I cannot solve this right away in this demo section because this needs a bigger architectural change in the code base. But at least in a very easy profiling session we can just understand what's the comp with and what's the reason that is taking so long, right? So it's pretty easy. And I'm going to look at the second issue now. So you've seen the reflow issue and this is about the marker chart. So whenever we try to like hover over those, as you can see it's taking some time to open the tooltip. So it's not very responsive right now. We need to figure out why this is happening. So I'm going to again start capturing with control shift 1. Then actually let me start again and then I'm going to just do back and forth and when I'm done I'm going to capture it with control shift 2. So as you can see there are again some red markers. I want to focus on this area specifically because I think we can see more clearly here. And I can look at that and let's invert the cold stack and we see that draw markers is taking a lot of time. So we can clearly see that draw marker is the copper. So let me look at the flame graph and in here again draw markers is taking a lot of time and also to the canvas context that fill is also taking a lot of time as well and this is being called by draw1marker. So I'm going to also copy this function name and search it. So this is that function and here there's the context.fill. So this is being called all the time and it's taking quite a lot of time but since this is a JavaScript API we cannot make it more performant. So the thing that we should do is to either work around with either like removing the cold if it's possible or reduce the amount of colds. So let's see where we are calling this draw1marker. So draw1marker is being called from the draw markers I think. So we should avoid calling this as much as possible and there's an if check to avoid this. So it says always render non-dot markers but also do not render dot markers that occupy the same pixels as this can take a lot of time and so this is actually the thing that we want. So actually we've previously somebody else did a performance improvement on this but I think this performance improvement is not working quite well. So when I look at this Boolean expression it's not correct. So I know this because I know the code base it might not be very clear to you but actually it should be something like this. We should not compare it with zero but we should instead compare it with dot width. So when we do that actually this will be the correct expression here otherwise when we do this zero it will always be true. So that's it. I might have to cut out some of the parts from the demo session to fit that into my first time schedule but I'm hoping that it's not going to be too much. So thank you all for coming to my talk and I hope that was helpful for you. And you can find the Firefox Profiler documentation and slides in these links. Also you can join us in the Firefox Profiler Metrics channel to ask us any questions. Thank you. Okay I think we are live now. And we are live. Yes I am joined here by Nazim from Mozilla. We're in the Q&A session after the talk. Hello Nazim. Hello. Thank you. Let's get into the questions. So the first one here is from Patrick. Is there a way to start, stop or export the Profiler from WebDriver or from another automation extension after collecting them? So currently I think we don't support WebDriver yet but we have some internal tools called Raptor. So I guess you can use that also in your project too because it's open source or there's browser time tool that supports Firefox Profiler. So you can capture a profile with browser time and then you can add dash dash Gekko Profiler I think and then it will automatically capture the profile itself too and then you can just drag and drop that JSON file into the profile that Firefox.com and it will show you the profile. I hope that answers the question. Let's see if there are a follow up there. Yes the next one is from Peter. Do you know how much overhead the profile adds when you're doing the recording? So yeah it's pretty significant if you don't like if you don't want to profile it and like I wouldn't recommend it to like open all the time. So the Web Developer preset is actually using a lot less resource compared to other ones. So I would recommend you to use that also like if you select custom preset we have like a like a big list of like settings and in that settings you can select like do not sample. So if you disable sampling it will only capture the markers and if you're okay with that like if you're okay with just markers and if you think that it's going to be enough for you you can reduce the overhead significantly and it also like overhead generally depends on like how many tabs you have, how many processes you're profiling, how many threads you're profiling so it can depend on like a lot of different things. But yeah you can like the first thing is you can use Web Developer preset and then it can disable the sampling if you if you don't want that. Next question from Toto. How long are the profiles uploaded for and is there a way to delete them for example in case of mistake? Normally they're uploaded and then they're there forever but we want to change that policy to like expire in like six months so but there's actually a way to delete that. So let's say that you've uploaded a profile and we place like a cookie or something in your local storage that this is uploaded by you so if you go into that profile again you can delete it by going on the top right corner and you can go into the profile information panel and then there's delete button. You can delete your profile and it will be automatically deleted from our servers or you can go to the home page and in the home page you can actually like see the profiles that are uploaded by you so you can also look at the list there and delete from there.
 Hi everyone, thanks for coming to my talk. Today I will be talking about using the Firefox  Profiler for Web Performance Analysis. I am Nazim Janalsnova, I am currently living in  Berlin and I am originally from Turkey and I am a software engineer at Mozilla. I am  working in the performance tooling team which is responsible of Firefox Profiler and these  are my Twitter and GitHub handles if you are curious. So today I am going to be talking  about briefly what a Profiler is and then I am going to switch to what Firefox Profiler  is and its advantages are and talk about how to capture a Profile and then after I am going  to talk about how to capture a good Profile and after this I am going to be showing you  the Profiler Analysis UI and then I am going to show you the Profiler sharing feature and  lastly I am going to do a demo session where I am going to open up a Profile and show you  the UI in a more interactive way and then I will analyze two performance issues. So  these performance issues are actually from Firefox Profiler itself so we are going to  be profiling the Profiler and the first performance issue is about it is written over a big loop  and the second one is about a reflow issue. So if you are curious about the Firefox Profiler  already you can check out Profile.Firefox.com but we are going to get into the details  pretty soon anyway. So this is a quick preview about what you are going to see when you open  up an analysis UI in the Firefox Profiler but so it is kind of crowded if you are looking  at it at the first time but don't worry if it is looking intimidating so we are going  to get into the details of the UI pretty soon and you are going to understand all the components.  But first we need to know what a Profiler is. In a very broad explanation Profiler is a  tool that helps developers to analyze performance issues and it gives insight. So I know that  this is a very broad explanation but this is because there are lots of different types  of Profilers that are event based Profilers, statistical Profilers, instrumentations and  heap Profilers for memory Profilers. So they all do different things under the hood but  essentially the goal is the same. They give insight about your program and about the execution  of your program. So it will really take a lot of time to explain all those types but  at least I can explain to you what is the Firefox Profiler. So it is a built-in Profiler  that comes with Firefox so you can profile your web apps, your web extensions or even  Firefox itself with it. Firefox Profiler is a statistical Profiler in its core but there  are also other types of data sources like markers and screenshots and so it is a lot  richer than just a statistical Profiler. So when you record a Profile, statistical Profilers  works like this. So when you start recording it stops the execution of the program every  one millisecond and gets all the information that it needs. There can be the call stack  or CPU usage or any other type of information that it needs and then resumes the program.  So it continues to do that every one millisecond or every end millisecond and then after that  when you capture that Profile it aggregates all this data and uses statistical approximation  to visualize it for you. So a little bit of history. So this is the old performance tab  in the developer tools panel. So that tab for both recording and the analysis. And in the  new one in the Firefox Profiler we have two different UIs now. The recording UI and the  analysis UI. This is because recording UI should be very minimal and the analysis UI  also should be more powerful by utilizing all the space. So that's why we have two different  UIs now. So this is the motto of Firefox Profiler. Capture a Profile, analyze it, share it and  make the web faster. And let's see what the main advantages of the Firefox Profiler are.  So it has more information with markers, screenshots, network requests and different type of visualizations  and more. Also this is one of the things that were actually written in the motto. So you  can capture a Profile and then share it with an expert. So this is pretty important because  previously it wasn't as easy to share a Profile data with someone else. So but now in this  case you can either be the expert or somebody else can be the expert. And let's say that  you are the expert and you cannot reproduce the issue. You can tell your colleague who  can reproduce the issue to just capture a Profile for you and send it to you. Then with  that Profile you will be able to see what is that program doing at that moment and you  can understand the issue better. So or somebody else can be the expert and that way you can  just capture a Profile and send it to them and they will be able to understand the issue  better with that recording. And let's see how to capture a Profile then. Actually there  are multiple ways to enable the Firefox Profiler but I think this is the easiest one. So you  can go to Profile.Firefox.com as I told you and then follow the instructions. That's  pretty much it because there is a big button that says enable the Profiler menu button.  When you click on that a menu button will appear on the top right corner of your Firefox  and then when you click on that little arrow you will see this pop up. So this is the recording  UI as I've shown you before. There are not a lot of things to show here. There are settings  which is web developers by default and this is the most lightweight version. So I would  recommend to use that and if you want to learn more you can click on that link and that will  redirect you to the documentation but also you can find the documentation link at the  end of these slides. And there is just start recording and capture recording button. But  also it's good to note that you can directly start and capture a Profile with the shortcuts.  This is pretty important because sometimes you wouldn't want to open the pop up all the  time because opening a pop up also creates an overhead for the Firefox and you wouldn't  want the recording of this pop up visualization in your profile. So you can just use the shortcuts  which is Ctrl shoot 1 and Ctrl shoot 2. So now we've looked at how to capture Profile.  Now let's see how to capture a good Profile. So because take away is to isolate the problem  as much as possible. We don't want to see unrelated information in the Profile because  that can distract us very easily. So it's not a must but it's a good practice to remove  the unrelated tabs and make sure that nothing else can interfere with the program that you  are profiling and skewed the data. So the second thing is to make sure you reproduce  the result you want because sometimes you might be looking at an intermittent issue  and it may be tricky to reproduce. So you need to check the result in your web application  to make sure that the result is the thing that you want. And also check in the Profile  analysis UI that you captured it successfully and you're happy with the result because sometimes  you can start the Profile in too late or you can end it too early so you may miss the important  piece. So don't hesitate to take multiple Profiles and don't be afraid of like just discarding  the old ones if you're not happy with them. And now we've seen how to capture Profile.  The next step is the Profiler analysis. So let's see the Analysis UI. So as I've shown  you before this is the Analysis UI and at the top you are going to see the timeline.  And this is an overview of the Firefox's execution of your tab that you're profiling.  It's a great way to see what's going on because the X axis is the time and the other categories  or other colors are the functions that are being called. So you can understand in which  time what type of function is being called. And it's also a great place to navigate in  your Profile. So for the navigation we have this range selection. You can drag and drop  a range and zoom in that view by clicking on that magnifier button. So when you click  on that this will use the 100% of the width and all the information in the Analysis UI  will be updated for the view that you're seeing only. And also in this timeline we have the  Screenshots. So that's a great visual indicator to see what's happening in the web page when  you are recording this Profile. And for example when you are calling a function or when you're  clicking somewhere. So when you hover over a screenshot also in the timeline you will  see this bigger version of the screenshot so you can see more details. Also below the  Screenshots we have the category Graph. So this is the Graph of the functions that are  being called but they are aggregated by the category. And all the colors in that Graph  represents a different category. So for example in this Graph yellow means JavaScript, blue  means DOM and orange means GC. So if you see a lot of oranges intermittently all the time  that means that we're doing a lot of GC and then you can try to understand why we are  doing this and you can try to reduce that GC time because that can create an overhead  overall. And under the category view we have the Markers. So Markers are important events  that are happening inside the Firefox's code execution. So they are more precise and they  also include additional information. So that's why they are pretty important and you can  see a lot of things, a lot of insights. As you can see in these they are just black boxes  but when you hover over those you are going to see a lot of information. Also I'm going  to show you in the next slide. Also the good thing to note that like you can actually create  your own markers by using the performance mark and performance measure APIs from JavaScript  directly. So when you hover over those little squares you are going to see this Marker tooltip.  So this tooltip gives you a lot more information about those squares. For example at first  it gives you the time spent for that marker and then the name and additional information.  In this case this is the styles marker and it gives you even the all styles related numbers.  And in this area we have the resources panel. So this was actually collapsed at first so  it wasn't visible but you can click and expand it. And when you expand it you are going to  see the iframe that belongs to that web page. So in this case this was the cnn.com and as  you can see there are 10 iframes and all of them are either tracking iframes or iframes  that are related to ads. And actually if you look at that like most of them are pretty  empty and that's because Firefox does a pretty good job on tracking the I mean removing the  tracking iframes and that is thanks to the enhanced tracking protection. But if you look  at the last iframe there are some activity going on. So this was because this is the  ads loading in that time. So we've seen the timeline now and the timeline was the overview  overall. And at the bottom side we have the panels and these panels are a lot more comprehensive  and a lot more detailed. So when you are done with the timeline and when you are having  an over evane when you understand where you should look then you switch back to the panels  and understand or try to understand what is happening in a more detailed way. So there  are lots of tabs in this panel so I'm not gonna explain everything right now because  it's a lot better to do it in the demo section so I'm gonna defer that to that time. So we've  talked about sharing a profile before now let's see how we can actually share it. So  on the top right corner you're gonna see an upload button. When you click on that you're  gonna see this panel. So there are some checkbox in it. So these checkboxes are for including  or excluding some information that may or may not be personally identifiable. So for  example there are screenshots, there are URLs or extension information. So these type of  things can be personally identifiable and you may not be comfortable sharing those.  So before uploading the profile you can uncheck those and that way you may you will not share  the things that you're uncomfortable with. And lastly when you click on that upload button  you're gonna see that permalink and you can use that permalink to either send it to your  colleague or you can just save it somewhere and then you can take a look at that profile  later on. So now we've actually seen a lot of things and this was all the things that  I wanted to show in the slides. Now I want to switch back to the demo section and tell  you more about the UI and then analyze the performance issues. So this is an example  profile and this is actually the same profile that I've shown you in the slides. So you're  gonna see something like that. So when you hover over the screenshots you're gonna see  the bigger versions and when you hover over those category graph and you're gonna see  all the categories for example this is JavaScript, there's GC there happening, there are layout  happening, another GC etc. And there are markers as you can see. So these markers are to show  you what kind of events are being happening at that moment. For example there are some  DOM events happening and there is big ready state change event happened etc. So and  these are the panels that we've seen before but let me introduce you more about them.  So there's Coltree, FlameGraph, StackChart, MarkerChart, MarkerTable and Network. So let's  start with Network because this is the easiest one I guess. And I'm sure you're pretty familiar  with the network panels and network requests so this is pretty similar to that. You see  for example edition.sienand.com and you see how long it took and you see the breakdown  of this network event too. So it took 204 milliseconds to load. So you can see other  things as well. And in the MarkerTable and MarkerChart you see the more details of these  markers. So the MarkerChart is pretty visual and pretty similar to the markers in the timeline  actually. So you see but we separate them in a more categorized way because you see the  DOM category here, you see the graphics, JavaScript, layout, network etc. So you can  see what is happening and since there are also some information in here like you can  understand what type of events that are being happening at that moment. And when you double  click on that you will directly zoom into that wheel and it can go in if you want. Or  you can also try to go in like this and then you can go out by using this. So and the MarkerTable  is the table version of MarkerChart. So you can also right click on those copy, copy,  marker, JSON. You can do the same things with this too. And for the Caltree, FlameGraph  and StackChart we use that the samples that were collected here thanks to the statistical  profile that I've mentioned before. So here we aggregate all the samples and show you  for example in the roots of course everything took 100% of the total samples. But when you  go down and go inside you're gonna see the breakdown. For example this JS run script  took 9.7%. And of course you can just click on this JavaScript only and only focus on  your JavaScript instead of some Firefox internals. So you can also option click on those or alt  click and that will automatically expand everything. So since this is the cnn.com they're all  minified functions but for your web page you will see the better function names. And also  you can invert the call stack. When you invert it you will see the functions that took most  of the time. So this is 3% of total samples and this is the longest running function in  that profile. So also inverting the call stack actually gives you pretty interesting information  too. And in the frame graph of course you need to you cannot invert it but in the flame  graph you also see the visualized version of the Caltree. So it's the same data but  with a different visualization. So you can still see what type of events are being happening  at that time and then you can see what is being called. For example event handler none  null calls this and this and then eventually offset hide is being called. And stack chart  is also pretty similar but it's also like the opposite way. So flame graph is bottom  to top and stack chart is top to bottom but also the difference is that the x axis of  the stack chart is actually time. So it's pretty similar to what you see in this graph.  For the flame graph x axis doesn't mean anything actually. So yeah we've seen the profiler  so this is the permalink you can get, this is the reupload button if you can upload and  this is the information about this profile. So let's go back to another profile and then  this is a bug actually that I want to solve with you. So there is a performance issue  with this so let me show you. When we resize this page it takes a lot of time to finish  the resizing. As you see it just finished. So it shouldn't be like this right? When you  make it bigger again it also takes a lot of time to resize back. So we need to figure  out why this is taking so long. That's why I'm going to start the profile. So I've got  the profile from profile.firefox.com now it's here so I'm going to start the profiler with  control shift 1 and then resize it. And I'm going to wait until it's done but I'm also  ready to just capture the profile now. So it's not quite done yet and when it's done  now I'm going to capture it. So now I captured it. As you can see there are lots of reflows  happening so you can clearly see that there is a reflow issue here because there are  hundreds of reflows, reflow markers and you can look at the marker chart here there are  lots of reflows. Also you can focus on this area because when you see a red marker that  means firefox wasn't responsive at that time. So you see a huge red marker there and that  means bad things are happening here. So if you look at that jank marker I mean this reflow  markers there are hundreds of them. And let's look at the flame graph. Let's see what we  can see, what we can figure out. And so this is the reflow we already seen so we should  look at the reflow. So you can either go back to only JavaScript but also it's good to see  the reflow because we want to know what is actually triggering the reflow right. So the  thing that is being triggered is get bounding client-rekt and it's being called by update  with. So actually you can see the same data called tree 2. You can just invert it and  you're going to see that there is a reflow happening all the time. When you go in you  are going to see the bounding client-rekt and that is being called by update with. So  I'm going to just right click and copy the function name and I'm going to go to my code  base and then search this. So this is the function that is being called all the time.  So and this is the get bounding client-rekt that is responsible of the reflow. So this  is, this should be improved or like we should either reduce the call of this because whenever  we call the get bounding client-rekt it always triggers a reflow. So we should avoid using  this function as much as possible. But since we have lots of tracks here it's calling like  800 times or something. So that's why that's the problem here. So actually this, I cannot  solve this right away in this demo section because this needs a bigger architectural  change in the code base. But at least in a very easy profiling session we can just understand  what's the comp with and what's the reason that is taking so long, right? So it's pretty  easy. And I'm going to look at the second issue now. So you've seen the reflow issue  and this is about the marker chart. So whenever we try to like hover over those, as you can  see it's taking some time to open the tooltip. So it's not very responsive right now. We  need to figure out why this is happening. So I'm going to again start capturing with  control shift 1. Then actually let me start again and then I'm going to just do back and  forth and when I'm done I'm going to capture it with control shift 2. So as you can see  there are again some red markers. I want to focus on this area specifically because I  think we can see more clearly here. And I can look at that and let's invert the cold  stack and we see that draw markers is taking a lot of time. So we can clearly see that draw  marker is the copper. So let me look at the flame graph and in here again draw markers  is taking a lot of time and also to the canvas context that fill is also taking a lot of  time as well and this is being called by draw1marker. So I'm going to also copy this function name  and search it. So this is that function and here there's the context.fill. So this is  being called all the time and it's taking quite a lot of time but since this is a JavaScript  API we cannot make it more performant. So the thing that we should do is to either work  around with either like removing the cold if it's possible or reduce the amount of colds.  So let's see where we are calling this draw1marker. So draw1marker is being called from the  draw markers I think. So we should avoid calling this as much as possible and there's an if  check to avoid this. So it says always render non-dot markers but also do not render dot  markers that occupy the same pixels as this can take a lot of time and so this is actually  the thing that we want. So actually we've previously somebody else did a performance  improvement on this but I think this performance improvement is not working quite well. So when  I look at this Boolean expression it's not correct. So I know this because I know the  code base it might not be very clear to you but actually it should be something like this.  We should not compare it with zero but we should instead compare it with dot width. So when  we do that actually this will be the correct expression here otherwise when we do this  zero it will always be true. So that's it. I might have to cut out some of the parts  from the demo session to fit that into my first time schedule but I'm hoping that it's  not going to be too much. So thank you all for coming to my talk and I hope that was  helpful for you. And you can find the Firefox Profiler documentation and slides in these  links. Also you can join us in the Firefox Profiler Metrics channel to ask us any questions.  Thank you.  Okay I think we are live now. And we are live. Yes I am joined here by Nazim from Mozilla.  We're in the Q&A session after the talk. Hello Nazim. Hello. Thank you. Let's get into the  questions. So the first one here is from Patrick. Is there a way to start, stop or export the  Profiler from WebDriver or from another automation extension after collecting them? So currently  I think we don't support WebDriver yet but we have some internal tools called Raptor.  So I guess you can use that also in your project too because it's open source or there's browser  time tool that supports Firefox Profiler. So you can capture a profile with browser time  and then you can add dash dash Gekko Profiler I think and then it will automatically capture  the profile itself too and then you can just drag and drop that JSON file into the profile  that Firefox.com and it will show you the profile. I hope that answers the question.  Let's see if there are a follow up there. Yes the next one is from Peter. Do you know  how much overhead the profile adds when you're doing the recording? So yeah it's pretty significant  if you don't like if you don't want to profile it and like I wouldn't recommend it to like  open all the time. So the Web Developer preset is actually using a lot less resource compared  to other ones. So I would recommend you to use that also like if you select custom preset  we have like a like a big list of like settings and in that settings you can select like  do not sample. So if you disable sampling it will only capture the markers and if you're  okay with that like if you're okay with just markers and if you think that it's going to  be enough for you you can reduce the overhead significantly and it also like overhead generally  depends on like how many tabs you have, how many processes you're profiling, how many  threads you're profiling so it can depend on like a lot of different things. But yeah  you can like the first thing is you can use Web Developer preset and then it can disable  the sampling if you if you don't want that. Next question from Toto. How long are the  profiles uploaded for and is there a way to delete them for example in case of mistake?  Normally they're uploaded and then they're there forever but we want to change that policy  to like expire in like six months so but there's actually a way to delete that. So let's say  that you've uploaded a profile and we place like a cookie or something in your local storage  that this is uploaded by you so if you go into that profile again you can delete it by  going on the top right corner and you can go into the profile information panel and  then there's delete button. You can delete your profile and it will be automatically  deleted from our servers or you can go to the home page and in the home page you can  actually like see the profiles that are uploaded by you so you can also look at the list there  and delete from there.
webperf_firefox_profiler_0_383.png webperf_firefox_profiler_384_899.png webperf_firefox_profiler_900_2471.png webperf_firefox_profiler_2472_3227.png webperf_firefox_profiler_3228_3287.png webperf_firefox_profiler_3288_3515.png webperf_firefox_profiler_3516_4259.png webperf_firefox_profiler_4260_4307.png webperf_firefox_profiler_4308_4355.png webperf_firefox_profiler_4356_5123.png webperf_firefox_profiler_5124_5207.png webperf_firefox_profiler_5208_5255.png webperf_firefox_profiler_5256_5303.png webperf_firefox_profiler_5304_5351.png webperf_firefox_profiler_5352_5399.png webperf_firefox_profiler_5400_5579.png webperf_firefox_profiler_5580_5627.png webperf_firefox_profiler_5628_5675.png webperf_firefox_profiler_5676_6083.png webperf_firefox_profiler_6084_6131.png webperf_firefox_profiler_6132_6491.png webperf_firefox_profiler_6492_7391.png webperf_firefox_profiler_7392_7487.png webperf_firefox_profiler_7488_8855.png webperf_firefox_profiler_8856_9131.png webperf_firefox_profiler_9132_9191.png webperf_firefox_profiler_9192_9347.png webperf_firefox_profiler_9348_9491.png webperf_firefox_profiler_9492_11663.png webperf_firefox_profiler_11664_12371.png webperf_firefox_profiler_12372_13715.png webperf_firefox_profiler_13716_13919.png webperf_firefox_profiler_13920_17291.png webperf_firefox_profiler_17292_24827.png webperf_firefox_profiler_24828_26351.png webperf_firefox_profiler_26352_26867.png webperf_firefox_profiler_26868_27107.png webperf_firefox_profiler_27108_28067.png webperf_firefox_profiler_28068_28175.png webperf_firefox_profiler_28176_28307.png webperf_firefox_profiler_28308_28595.png webperf_firefox_profiler_28596_28907.png webperf_firefox_profiler_28908_31487.png webperf_firefox_profiler_31488_31895.png webperf_firefox_profiler_31896_34691.png webperf_firefox_profiler_34692_37919.png webperf_firefox_profiler_37920_39071.png webperf_firefox_profiler_39072_39455.png webperf_firefox_profiler_39456_41471.png webperf_firefox_profiler_41472_50747.png webperf_firefox_profiler_50748_50915.png webperf_firefox_profiler_50916_51032.png