{"id":28719,"date":"2019-04-24T22:13:00","date_gmt":"2019-04-24T20:13:00","guid":{"rendered":"https:\/\/blexin.com\/angular-performance-improvements\/"},"modified":"2021-05-20T19:18:38","modified_gmt":"2021-05-20T17:18:38","slug":"angular-performance-improvements","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/","title":{"rendered":"Angular Performance Improvements"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

One of the most interesting features of the front-end libraries is the ability to maintain in binding the user\u2019s interface and properties, which contains data to be displayed. Angular also offers this feature: it offers a mechanism called Change Detection, thanks to which it \u201cunderstands\u201d when to update the interface if an application\u2019s change occurs.<\/p>\n\n\n\n

On the web, you can find many articles about the detailed mode of operation of this mechanism and how it uses zone.js to understand when to intervene to update the UI, but I would like to highlight, with an easy example, how this mechanism can impact on our application\u2019s performances, if we are not careful enough.<\/p>\n\n\n\n

We start from a simple component, in which we insert a text box with a bidirectional binding with a property of the component itself. When we digit text in this box and then press \u201center\u201d, we would like to push the typed string within a simple not ordered list, together with a number between 1 and 10, casually produced. If we want to see, to the naked eye, what is the impact that the change detection might have on the user experience, we have to force a little bit: when we display the element of the list, we don\u2019t restrict ourselves to print the numeric value, but we invoke a method directly from binding expression, which will calculate from the original value the corresponding Fibonacci number, multiplied by 4:<\/p>\n\n\n

\nimport { Component } from '@angular\/core';\n\u00a0\n@Component({\n\u00a0\u00a0selector: 'app-sample-list',\n\u00a0\u00a0templateUrl: '.\/sample-list.component.html'\n})\nexport class SampleListComponent {\n\u00a0\n\u00a0\u00a0text: string;\n\u00a0\u00a0items: {label: string, value: number}[] = [];\n\u00a0\n\u00a0\u00a0addTextToList() {\n\u00a0\u00a0\u00a0\u00a0const randomValue =\u00a0 Math.floor(Math.random() * 10) + 1;\n\u00a0\u00a0\u00a0\u00a0this.items.push({ label: this.text, value: randomValue });\n\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0generateValue(value: number) {\n\u00a0\u00a0\u00a0\u00a0console.log('value ' + value + ' generated');\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(value * 4);\n\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0private fibonacci(num: number): number {\n\u00a0\u00a0\u00a0\u00a0if (num === 1 || num === 2) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(num - 1) + this.fibonacci(num - 2);\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
You might remind from your IT course, that the calculation of the value of the Fibonacci sequence has a computational complexity, that increases exponentially as the value itself increases. This implementation is, obviously, only an example, but it is useful for us to exaggerate the problem. Note that, in the code, I don\u2019t call the algorithm directly, but I invoke a method, which prints a string in the console first, then runs the calculation. This system allows us to see how many times the method has been called while we interact with the interface:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
As you can see in the image, as you modify the text, the change detection call back the calculation\u2019s method for every element in the list. If you try to insert some elements, you realize that the application\u2019s responsivity visibly decreases after a short time.<\/p>\n\n\n\n
How can we intervene to improve the situation? A first approach can be the reorganization of our component and externalization of the text box, so that the list to be displayed would not be processed at the same time, but will be passed by input to the component. In our example, we move the text and the list management in app-component:<\/p>\n\n\n
\n<input type="text" [(ngModel)]="text" (keydown.enter)="addTextToList()">\n<app-sample-list [items]="items"><\/app-sample-list>\n<\/pre><\/div>\n\n
\nimport { Component } from '@angular\/core';\n\u00a0\n@Component({\n\u00a0\u00a0selector: 'app-root',\n\u00a0\u00a0templateUrl: '.\/app.component.html'\n})\nexport class AppComponent {\n\u00a0\u00a0text: string;\n\u00a0\u00a0items: {label: string, value: number}[] = [];\n\u00a0\n\u00a0\u00a0addTextToList() {\n\u00a0\u00a0\u00a0\u00a0const randomValue =\u00a0 Math.floor(Math.random() * 10) + 1;\n\u00a0\u00a0\u00a0\u00a0this.items.push({ label: this.text, value: randomValue });\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
We leave in the list component only the part of the calculation of the Fibonacci sequence. In Angular, the change detection spreads from the component we are operating with, to all its sons: we don\u2019t solve the problem if we move the text box in the father-component. We can though disable the change detection in the list component, in order to avoid the value to be recalculated any time: you just need to set the component\u2019s set detection strategy in its designer. Values, which are possible, are: Default, default behavior and OnePush. These values allow us to tell Angular, that we will decide when to run the interface update. It is interesting to note that the change detection interruption does not apply to input parameters, then, if the input value changes, the interface will update:<\/p>\n\n\n
\nimport { Component, Input, ChangeDetectionStrategy } from '@angular\/core';\n\u00a0\n@Component({\n\u00a0\u00a0selector: 'app-sample-list',\n\u00a0\u00a0templateUrl: '.\/sample-list.component.html',\n\u00a0\u00a0changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SampleListComponent {\n\u00a0\n\u00a0\u00a0@Input()\n\u00a0\u00a0items: {label: string, value: number}[] = [];\n\u00a0\n\u00a0\u00a0generateValue(value: number) {\n\u00a0\u00a0\u00a0\u00a0console.log('value ' + value + ' generated');\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(value * 4);\n\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0private fibonacci(num: number): number {\n\u00a0\u00a0\u00a0\u00a0if (num === 1 || num === 2) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(num - 1) + this.fibonacci(num - 2);\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
As you run this code, anyway, the application stops working. This happens because we are providing in input an array, that grows up with every input, but the connection to the array doesn\u2019t change and Angular doesn\u2019t notice the change. The immutability comes to help us to solve the problem. As first approach, we try to create the array again, any time we add a value: the easiest way to do that is to convert the array in a string and then transform it again in an array:<\/p>\n\n\n
\naddTextToList() {\n\u00a0\u00a0const randomValue =\u00a0 Math.floor(Math.random() * 10) + 1;\n\u00a0\u00a0this.items.push({ label: this.text, value: randomValue });\n\u00a0\u00a0this.items = JSON.parse(JSON.stringify(this.items));\n}\n<\/pre><\/div>\n\n\n
It’s nasty, but effective. With this solution, you can see that the modification to the text in the box doesn\u2019t cause the recalculation of values in the list:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This approach has the problem that the operation to recreate the list at every input is both uncomfortable and not very efficient whether considering the time or the memory allocation. To solve this further problem, we can use immutable.js (https:\/\/immutable-js.github.io\/immutable-js\/<\/a>), which provides all necessary instruments to work with immutable objects, optimizing the resources. You can easily install it with npm i immutable<\/strong>. At this stage, we can use immutable lists, instead of the simple array, that provides an unshift method to add a new element, which returns a new array\u2019s instance.<\/p>\n\n\n
\nimport { Component } from '@angular\/core';\nimport { List } from 'immutable';\n\u00a0\n@Component({\n\u00a0\u00a0selector: 'app-root',\n\u00a0\u00a0templateUrl: '.\/app.component.html'\n})\nexport class AppComponent {\n\u00a0\u00a0text: string;\n\u00a0\u00a0items = List<{label: string, value: number}>();\n\u00a0\n\u00a0\u00a0addTextToList() {\n\u00a0\u00a0\u00a0\u00a0const randomValue =\u00a0 Math.floor(Math.random() * 10) + 1;\n\u00a0\u00a0\u00a0\u00a0this.items = this.items.unshift({ label: this.text, value: randomValue });\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
This library optimizes the resources with the creation of a data structure, where the elements already present will not be lost, but used again in the new array.<\/p>\n\n\n\n
Now we will use a little-known feature of Angular\u2019s Pipes. We create a Pipe to calculate the Fibonacci sequence, instead of invoking the component method:<\/p>\n\n\n
\nimport { Pipe, PipeTransform } from '@angular\/core';\n\u00a0\n@Pipe({\n\u00a0\u00a0name: 'fibonacci',\n\u00a0\u00a0pure: true\n})\nexport class FibonacciPipe implements PipeTransform {\n\u00a0\u00a0transform(value: any, ...args: any[]): any {\n\u00a0\u00a0\u00a0\u00a0console.log('value ' + value + ' generated');\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(value * 4);\n\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0private fibonacci(num: number): number {\n\u00a0\u00a0\u00a0\u00a0if (num === 1 || num === 2) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(num - 1) + this.fibonacci(num - 2);\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
In the code, I make explicit the Pipe\u2019s pure<\/strong> parameter default value: this value is \u201ctrue\u201d. The meaning is that, even if it\u2019s not clearly declared, as in this case, Pipes are treated as pure functions, thus the result of their elaboration will change only if parameters change. A pure Pipe in Angular would not be revoked if parameters don\u2019t change since the result would not change too. This feature optimizes our code very much, because we will invoke the Pipe only on newly inserted values:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
if you set the parameter pure<\/strong> to false, you will discover that Angular would invoke the Pipe every time. Even if we leave the Pipe pure, we cannot avoid the value to be calculated for any new line, although parameters could correspond to a different line. As a matter of fact, the n-simo value of the Fibonacci sequence It\u2019s always the same, thus, once calculated, we could reuse it every time the same value is required. Angular has no integrated instrument for this functionality, which is only a values\u2019 caching strategy. However, we can install a library, that can do that with the command npm i memo-decorator<\/strong>. . Pipe becomes:<\/p>\n\n\n
\nimport { Pipe, PipeTransform } from '@angular\/core';\nimport memo from 'memo-decorator';\n\u00a0\n@Pipe({\n\u00a0\u00a0name: 'fibonacci'\n})\nexport class FibonacciPipe implements PipeTransform {\n\u00a0\n\u00a0\u00a0@memo()\n\u00a0\u00a0transform(value: any, ...args: any[]): any {\n\u00a0\u00a0\u00a0\u00a0console.log('value ' + value + ' generated');\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(value * 4);\n\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0private fibonacci(num: number): number {\n\u00a0\u00a0\u00a0\u00a0if (num === 1 || num === 2) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return 1;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0return this.fibonacci(num - 1) + this.fibonacci(num - 2);\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
with the addition of the memo<\/strong> decorator to the transform method, we save the result of the elaboration the parameters being equal, in order to skip the execution for already calculated values:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
You find the code here:
https:\/\/github.com\/apomic80\/angular-performance-improvements<\/a><\/p>\n\n\n\n
Happy Coding!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
How to improve the performances of our Angular application with the use of Pipe and disabling the Change Detection, where is not useful<\/p>\n","protected":false},"author":196716248,"featured_media":28704,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637524],"tags":[688637390],"class_list":["post-28719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en"],"yoast_head":"\nAngular Performance Improvements - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Performance Improvements - Blexin\" \/>\n<meta property=\"og:description\" content=\"How to improve the performances of our Angular application with the use of Pipe and disabling the Change Detection, where is not useful\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-24T20:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-20T17:18:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michele Aponte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michele Aponte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/\"},\"author\":{\"name\":\"Michele Aponte\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"headline\":\"Angular Performance Improvements\",\"datePublished\":\"2019-04-24T20:13:00+00:00\",\"dateModified\":\"2021-05-20T17:18:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/\"},\"wordCount\":1115,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/\",\"name\":\"Angular Performance Improvements - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-04-24T20:13:00+00:00\",\"dateModified\":\"2021-05-20T17:18:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/angular-performance-improvements\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Performance Improvements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/cdc5540c3b6edcacd8d760669e797005\",\"name\":\"Michele Aponte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g\",\"caption\":\"Michele Aponte\"},\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/author\\\/michele-aponteblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Performance Improvements - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/","og_locale":"en_US","og_type":"article","og_title":"Angular Performance Improvements - Blexin","og_description":"How to improve the performances of our Angular application with the use of Pipe and disabling the Change Detection, where is not useful","og_url":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/","og_site_name":"Blexin","article_published_time":"2019-04-24T20:13:00+00:00","article_modified_time":"2021-05-20T17:18:38+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Michele Aponte","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Michele Aponte","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/"},"author":{"name":"Michele Aponte","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"headline":"Angular Performance Improvements","datePublished":"2019-04-24T20:13:00+00:00","dateModified":"2021-05-20T17:18:38+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/"},"wordCount":1115,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/","url":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/","name":"Angular Performance Improvements - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","datePublished":"2019-04-24T20:13:00+00:00","dateModified":"2021-05-20T17:18:38+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/en\/blog-en\/angular-performance-improvements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Angular Performance Improvements"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/cdc5540c3b6edcacd8d760669e797005","name":"Michele Aponte","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32138aff568f2063b34d27a23cef27e09f3159bfcadea5ea05599c499cf4342f?s=96&d=identicon&r=g","caption":"Michele Aponte"},"url":"https:\/\/blexin.com\/en\/author\/michele-aponteblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ccc34bfb-ebde-488d-873c-6195df9b513b.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7td","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716248"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28719"}],"version-history":[{"count":5,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28719\/revisions"}],"predecessor-version":[{"id":31993,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28719\/revisions\/31993"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28704"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}