performance/overview

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Two major aspects of web performance

Page Load Performance measures how fast the application shows content and becomes interactive on the initial visit, usually measured using web vital metrics like Largest Contentful Paint (LCP) and Interaction to Next Paint. Update Performance measures how fast the application updates in response to user input, such as how fast a list updates when the user types in a search box, or how fast the page switches when the user clicks a navigation link in a Single-Page Application (SPA).

Virtual DOM definition and purpose

The virtual DOM (VDOM) is a programming concept where an ideal or virtual representation of a UI is kept in memory and synced with the real DOM. A vnode is a plain JavaScript object representing a DOM element, containing type, props, and children. Virtual DOM is a pattern rather than a specific technology, pioneered by React and adopted by many frameworks including Vue.

Mount and patch processes

Mount is the process where a runtime renderer walks a virtual DOM tree and constructs a real DOM tree from it. Patch, also called diffing or reconciliation, is the process where the renderer walks and compares two virtual DOM trees, figuring out differences and applying those changes to the actual DOM.

Vue render pipeline steps

When a Vue component is mounted, three steps occur: (1) Compile - Vue templates are compiled into render functions that return virtual DOM trees, done either ahead-of-time via build step or on-the-fly by runtime compiler. (2) Mount - the runtime renderer invokes render functions, walks the virtual DOM tree, and creates actual DOM nodes, performed as a reactive effect. (3) Patch - when a reactive dependency changes, the effect re-runs, creating a new virtual DOM tree which is compared to the old one and updates are applied to the actual DOM.

Templates versus render functions

Vue recommends templates by default because they are closer to actual HTML (easier to reuse snippets, apply accessibility practices, style with CSS, and for designers to understand), and they are easier to statically analyze with more deterministic syntax, allowing compile-time optimizations. Render functions are more flexible for highly dynamic logic but are typically only used in reusable components with highly dynamic rendering logic.

Compiler-Informed Virtual DOM

Vue's hybrid approach where the framework controls both compiler and runtime allows compile-time optimizations that a tightly-coupled renderer can use. The compiler statically analyzes templates and leaves hints in generated code so the runtime can take shortcuts, while still allowing users to drop down to render functions for direct control in edge cases.

Give your agent this brain