dynaTrace AJAX - powerful JS profiler
Recently, in the discussion of the article, the browser scale talked about the fact that IE is not so poor and every self-respecting web developer should have it on his computer, not only to see if the layout was removed there, but also because , I think, the best at the moment data tools for debugging and profiling JS.
One of these tools is dynaTrace Ajax, which can be downloaded here .
What is dynaTrace? It is the most powerful tool for advanced profiling of the loading of your page, it records everything that happens on the page during its loading, and then provides a detailed report.
Let's take a closer look at what data we can get from the report. To do this, run dynaTrace, and click Start tracing and go to habrahabr for example.
After loading the page we get the opportunity to view a detailed report.
What can we see on the summary tab?
First, the data on the page load from the server: how much time was spent on what, and what files we loaded from the server and which were taken from the cache:
Secondly, you can see how much time was spent on JS and on what kind of operation this time was spent:
from the picture you can see that Habr uses the motools JS framework and most of the work takes place inside it, and the calls come from the script and nothing is hung up on the Load Event.
A more interesting picture can be obtained, for example, on Yandex:
Also on the summary tab, we see the timeline:
it shows processor activity during page load, time spent on JS, rendering the page and network activity. At the bottom of the event line shows the events that occurred with the page. When you hover the mouse over any of the blocks of the timeline, we see in more detail what happened there.
As we see, the Load event happened only 45 seconds after the start of the page loading, and this is due to the fact that some image was loaded for 42 seconds. For Habr, this is not scary, because nothing has been hung on Load, but on other projects that hang up the handler for the Load event, this timeline can help to see bottlenecks that prevent the browser from triggering the Load event.
All charts on the summary tab are clickable, and a double-click on a part of the chart leads to another tab with the filter installed. For example, a double click on a diagram that displays the ratio of cached and uncached elements on a page leads to the Network tab with the filter turned on to display only those elements that have been cached.
')
On the Network tab, we see a table that lists everything that was loaded from the network during the page load. When you select any row in the table in the lower windows you see the headers and the actual content that was loaded.
The table shows the load time and TimeChart.
The data in the table can be filtered:
On the Pure Paths tab, we see the entire history of the activity that occurred on our page, including such things as rendering the page and the time spent parsing the javascript.
In the upper table, we select a line with a Ya.metric for example and then in the middle table we get a tree of function calls: what functions were called, how much time was spent on their parsing and execution, what DOM methods they were accessing.
If you select one of the branches of the tree, then in the lower left table we will see all the functions that were called in this branch and the time they were executed, and in the lower right table - the code of the called function.
This tool can help in finding functions that inhibit the work of your JavaScript.
Well, the last tab is the Hot Spots tab.
On this tab, we can see which functions are spent on calls the most time, which again allows us to identify bottlenecks and optimize our JS code.
That's the whole story :)
The tool is very powerful, and, in my opinion, a must have for any self-respecting JS-developer who works under Windows.
One of these tools is dynaTrace Ajax, which can be downloaded here .
What is dynaTrace? It is the most powerful tool for advanced profiling of the loading of your page, it records everything that happens on the page during its loading, and then provides a detailed report.
Let's take a closer look at what data we can get from the report. To do this, run dynaTrace, and click Start tracing and go to habrahabr for example.
After loading the page we get the opportunity to view a detailed report.
Summary
What can we see on the summary tab?
First, the data on the page load from the server: how much time was spent on what, and what files we loaded from the server and which were taken from the cache:
Secondly, you can see how much time was spent on JS and on what kind of operation this time was spent:
from the picture you can see that Habr uses the motools JS framework and most of the work takes place inside it, and the calls come from the script and nothing is hung up on the Load Event.
A more interesting picture can be obtained, for example, on Yandex:
Also on the summary tab, we see the timeline:
it shows processor activity during page load, time spent on JS, rendering the page and network activity. At the bottom of the event line shows the events that occurred with the page. When you hover the mouse over any of the blocks of the timeline, we see in more detail what happened there.
As we see, the Load event happened only 45 seconds after the start of the page loading, and this is due to the fact that some image was loaded for 42 seconds. For Habr, this is not scary, because nothing has been hung on Load, but on other projects that hang up the handler for the Load event, this timeline can help to see bottlenecks that prevent the browser from triggering the Load event.
All charts on the summary tab are clickable, and a double-click on a part of the chart leads to another tab with the filter installed. For example, a double click on a diagram that displays the ratio of cached and uncached elements on a page leads to the Network tab with the filter turned on to display only those elements that have been cached.
')
Network
On the Network tab, we see a table that lists everything that was loaded from the network during the page load. When you select any row in the table in the lower windows you see the headers and the actual content that was loaded.
The table shows the load time and TimeChart.
The data in the table can be filtered:
Pure paths
On the Pure Paths tab, we see the entire history of the activity that occurred on our page, including such things as rendering the page and the time spent parsing the javascript.
In the upper table, we select a line with a Ya.metric for example and then in the middle table we get a tree of function calls: what functions were called, how much time was spent on their parsing and execution, what DOM methods they were accessing.
If you select one of the branches of the tree, then in the lower left table we will see all the functions that were called in this branch and the time they were executed, and in the lower right table - the code of the called function.
This tool can help in finding functions that inhibit the work of your JavaScript.
Hot spots
Well, the last tab is the Hot Spots tab.
On this tab, we can see which functions are spent on calls the most time, which again allows us to identify bottlenecks and optimize our JS code.
That's the whole story :)
The tool is very powerful, and, in my opinion, a must have for any self-respecting JS-developer who works under Windows.
Source: https://habr.com/ru/post/85838/
All Articles