Incremental DOM is used internally at Google, and it is defined by this key idea:<\/p>\n\n\n\n
Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.<\/em><\/p>\n\n\n\n For instance, the following component:<\/p>\n\n\n\n Will be compiled into:<\/p>\n\n\n\n The template function contains the instructions rendering and updating the DOM. Note that the instructions aren\u2019t interpreted by the framework\u2019s rendering engine.\u00a0They are the rendering engine.<\/strong><\/p>\n\n\n\n Why did the Google team go with incremental DOM instead of virtual DOM?<\/p>\n\n\n\n They have one goal in mind: applications have to perform well on mobile devices. This mainly meant optimizing two things: the bundle size and the memory footprint.<\/strong><\/p>\n\n\n\n To achieve the two goals:<\/p>\n\n\n\n When using incremental DOM, the framework does not interpret the component. Instead, the component references instructions. If it doesn\u2019t reference a particular instruction, it will never be used. And since we know this at compile time, we can omit the unused instruction from the bundle.<\/p>\n","protected":false},"excerpt":{"rendered":" Incremental DOM is used internally at Google, and it is defined by this key idea: Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes. For instance, the following component: Will be compiled into: The template function contains the instructions rendering and updating […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-199","post","type-post","status-publish","format-standard","hentry","category-angular"],"yoast_head":"\n@Component({\n selector: 'todos-cmp',\n template: `\n <div *ngFor=\"let t of todos|async\">\n {{t.description}}\n <\/div>\n `\n})\nclass TodosComponent {\n todos: Observable<Todo[]> = this.store.pipe(select('todos'));\n constructor(private store: Store<AppState>) {}\n}<\/code><\/pre>\n\n\n\nvar TodosComponent = \/** @class *\/ (function () {\n function TodosComponent(store) {\n this.store = store;\n this.todos = this.store.pipe(select('todos'));\n }\n\n TodosComponent.ngComponentDef = defineComponent({\n type: TodosComponent,\n selectors: [[\"todos-cmp\"]],\n factory: function TodosComponent_Factory(t) {\n return new (t || TodosComponent)(directiveInject(Store));\n },\n consts: 2,\n vars: 3,\n template: function TodosComponent_Template(rf, ctx) {\n if (rf & 1) { \/\/ create dom\n pipe(1, \"async\");\n template(0, TodosComponent_div_Template_0, 2, 1, null, _c0);\n } if (rf & 2) { \/\/ update dom\n elementProperty(0, \"ngForOf\", bind(pipeBind1(1, 1, ctx.todos)));\n }\n },\n encapsulation: 2\n });\n\n return TodosComponent;\n}());<\/code><\/pre>\n\n\n\nWhy Incremental DOM<\/h1>\n\n\n\n
Why Incremental DOM is Tree Shakable?<\/h1>\n\n\n\n