DOM patching updates the browser’s view after an interaction by changing only the HTML parts affected by application-state changes. A single DOM change is a patch. Minimizing patches matters because browser updates can trigger repaint and reflow. section 1.3.2
The process connects four practical responsibilities:
- Handle the browser event with application-defined event-handling code. section 1.3.2
- Update the application state and determine the resulting view. section 1.3.2
- Compare the current representation with the desired one when using a virtual DOM. section 1.3.2
- Apply only the necessary changes to the browser’s DOM. section 1.3.2
A small DOM update
JavaScript can create a paragraph, assign its text, and append it to the document. After an interaction changes the desired view, patching applies the corresponding update instead of rebuilding unrelated HTML. section 1.3.2
Figure 1.8 SPA handling user interactions
Trace the SPA flow from a browser interaction through event handling and view updates. section 1.3.2
