About the UI of Firefox Profiler
It is a tool provided by Firefox to capture and visualize the performance of the site. The new tab that contains the various visual elements which are graphs, charts, timeline of the sites performance. At first glance the UI can look overwhelming but it is easy to navigate if you divide in into specific parts.
Firefox Profiler
- Tracks: Tracks represent different processes and rendering timelines. You can focus on a specific part of the time line and check the graph spikes to understand the flow of rendering and processing. Some useful tracks are screenshots, renderers, and parent processes. You can hide or unhide a track if you right-click it and select the option you want.
- Call Tree: This view displays the function call stack in JS in a tree-like way. It helps you understand the flow of the execution of functions in JS and the various computer resources used by them.
- Flame Chart: This view provides a representation of function calls. It is an easily readable view and conveys the call stack information clearly because of the hierarchical view.
- Stack Chart: This view is a chronological view of the call stack with respect to the timeline. It displays the different functions called and in what order according to the tacks in the timeline.
- Marker Chart: This view is a timeline view of markers used in the source code during profiling. Some markers are CSS animations, DOM events, and timeout callbacks.
- Marker Table: This presents a detailed tabular view of the marker characters. The information shown is the start time, duration, type, and description, which allow easy searching and viewing of the marker information.
- Network Chart: This chart will only show if there is a network request due to any kind of interaction before pressing “Capture Recording“. It displays the chronological order of network requests during capture.
Performance Tab in Mozilla Firefox Browser
We can analyze the performance of our site by using the Firefox browser performance tool. The tool provides visual information about all the processes that are being run at that time and also various resources, such as JS or CSS, that are being downloaded and rendered. This tool is very helpful for developers who are looking for optimization and good performance for a wide range of users.