{
  "id": 2991711,
  "title": "From Angular.js to Fine-Grained Reactivity: Part 3 - How to Optimize the Render Phase",
  "url": "https://urgent.news/2026/08/24/from-angular-js-to-fine-grained-reactivity-part-3-how-to-optimize-the",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-24T10:00:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/straccia17/from-angularjs-to-fine-grained-reactivity-part-3-how-to-optimize-the-render-phase-1pp9"
  },
  "original_language": "en",
  "account": "This is the third part of a series exploring optimization techniques for rendering phases in Angular.js and Reactivity. The previous article introduced using the Proxy API to notify templates of changes. In this article, we address the rendering performance issue caused by multiple updates triggered by individual assignments within a controller.\n\nConsider a controller with multiple assignments, such as:\n\n$scope.name = 'Mario';\n$scope.age = 24;\n\nEach assignment generates a new change, resulting in multiple update calls. In larger applications, this can lead to dozens of controller executions with numerous assignments, and multiple assignments to the same property, potentially causing flickering effects on the rendered view.\n\nThe solution is to queue mutations via microtasks in the event loop, ensuring changes are merged before calling the update function. Microtasks run after the calling function returns but before the next tick of the event loop checks its macrotask queue. This occurs prior to updating the view with new values.\n\nTo implement this solution, we create a batching engine that merges changes and schedules updates using a microtask. Pending changes are stored in the pendingChanges object, which is updated using Object.assign to overwrite previous values for the same key. A flag (isScheduled) prevents multiple redundant microtasks from being enqueued.\n\nThe proxies must now call the scheduleUpdate method instead of the update function directly when intercepting set operations. This batching engine effectively addresses the problem of multiple mutations within the same controller execution, optimizing the rendering phase and improving user experience.",
  "summary": "In the last article of this series, we saw how to use the Proxy API to notify changes to the templates. For example, this controller: // simple-controller.js export function SimpleController ( $scope ) { $scope . name = \" Mario \" ; } produces a change like this: let changes = { name : \" Mario \" , }; update ( changes ); Suppose now that we have a controller with multiple assignments: //…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}