{"id":830,"date":"2023-04-20T05:00:00","date_gmt":"2023-04-20T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=830"},"modified":"2023-04-18T17:56:54","modified_gmt":"2023-04-19T00:56:54","slug":"angular-profiler-for-performance-tuning","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-profiler-for-performance-tuning\/","title":{"rendered":"Angular profiler for performance tuning"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-devtools-extension\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Angular dev tools<\/a> introduced in our previous newsletter include a second tab called <strong>Profiler<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"156\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/Angular-profiler.png\" alt=\"\" class=\"wp-image-831\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/Angular-profiler.png 336w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/Angular-profiler-300x139.png 300w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The Profiler has a single record button. We can hit it, play with our application, then stop the recording. This turns the UI into a profiler view of what happened during the recording. In the example below, we can see how a click generated a change detection event that impacted several components:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"875\" height=\"490\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-34.png\" alt=\"\" class=\"wp-image-832\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-34.png 875w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-34-300x168.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-34-768x430.png 768w\" sizes=\"auto, (max-width: 875px) 100vw, 875px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>As you can see in the above screenshot, every change detection event is tracked as a bar chart entry. The taller a bar is, the more time it takes to complete that cycle. We can explore which components and directives are impacted for each event and how long it took to re-render that component (in the above example, 0.1 ms).<\/p>\n\n\n\n<p>When facing a performance issue, the Profiler is perfect for identifying the problem&#8217;s root cause. For instance, it could highlight that one component is much slower than the others and gets refreshed for no good reason, indicating that a different <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">change detection strategy<\/a> is needed.<\/p>\n\n\n\n<p>The <a href=\"https:\/\/angular.io\/guide\/devtools#profile-your-application\" target=\"_blank\" rel=\"noopener\" title=\"\">official documentation showcases all individual features<\/a> of the Profiler one by one.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Angular dev tools introduced in our previous newsletter include a second tab called Profiler: The Profiler has a single record button. We can hit it, play with our application, then stop the recording. This turns the UI into a profiler view of what happened during the recording. In the example below, we can see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20],"tags":[],"class_list":["post-830","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/830\/revisions"}],"predecessor-version":[{"id":838,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/830\/revisions\/838"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}