工程化与框架系列（13）--虚拟DOM实现

虚拟DOM实现 🌳

虚拟DOM（Virtual DOM）是现代前端框架的核心技术之一，它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。

虚拟DOM概述 🌟

💡 小知识：虚拟DOM是对真实DOM的一种轻量级抽象表示，它以JavaScript对象的形式存在，通过diff算法计算最小更新路径，从而减少对实际DOM的操作。

为什么需要虚拟DOM

在现代前端开发中，虚拟DOM带来以下优势：

1. 性能优化

   • 批量DOM更新
   • 最小化DOM操作
   • 跨平台渲染
   • 服务端渲染

2. 开发体验

   • 声明式编程
   • 组件化开发
   • 状态驱动UI
   • 代码可维护性

3. 跨平台能力

   • 浏览器渲染
   • 原生应用渲染
   • 服务端渲染
   • Canvas/WebGL渲染

4. 调试能力

   • 状态追踪
   • 组件调试
   • 性能分析
   • 错误边界

核心实现 ⚡

虚拟DOM节点定义

// vnode.ts
export type VNodeType = string | Component;export interface VNode {type: VNodeType;props: Record<string, any>;children: (VNode | string)[];key?: string | number;el?: HTMLElement | Text;
}export interface Component {render: () => VNode;props?: Record<string, any>;setup?: (props: Record<string, any>) => Record<string, any>;
}export function h(type: VNodeType,props: Record<string, any> = {},children: (VNode | string)[] = []
): VNode {return {type,props,children,key: props.key};
}// JSX类型定义
declare global {namespace JSX {interface Element extends VNode {}interface IntrinsicElements {[elemName: string]: any;}}
}// 创建文本节点
export function createTextVNode(text: string): VNode {return {type: 'text',props: {},children: [text]};
}// 创建Fragment
export function Fragment(props: Record<string, any>): VNode {return {type: 'fragment',props,children: props.children || []};
}

DOM渲染实现

// renderer.ts
export class Renderer {private container: HTMLElement;constructor(container: HTMLElement) {this.container = container;}render(vnode: VNode | null) {if (vnode === null) {// 卸载if (this.container.firstChild) {this.container.innerHTML = '';}return;}// 挂载或更新const prevVNode = this.container._vnode;if (!prevVNode) {// 首次挂载this.mount(vnode, this.container);} else {// 更新this.patch(prevVNode, vnode, this.container);}this.container._vnode = vnode;}private mount(vnode: VNode, container: HTMLElement, anchor?: Node | null) {const { type, props, children } = vnode;if (typeof type === 'string') {// 创建元素const el = document.createElement(type);vnode.el = el;// 设置属性this.patchProps(el, {}, props);// 挂载子节点children.forEach(child => {if (typeof child === 'string') {el.appendChild(document.createTextNode(child));} else {this.mount(child, el);}});// 插入到容器container.insertBefore(el, anchor || null);} else if (typeof type === 'function') {// 挂载组件this.mountComponent(vnode, container, anchor);}}private mountComponent(vnode: VNode,container: HTMLElement,anchor?: Node | null) {const component = vnode.type as Component;// 执行setuplet setupResult = {};if (component.setup) {setupResult = component.setup(vnode.props);}// 执行renderconst renderVNode = component.render.call(setupResult);// 挂载渲染结果this.mount(renderVNode, container, anchor);vnode.el = renderVNode.el;}private patch(n1: VNode,n2: VNode,container: HTMLElement,anchor?: Node | null) {if (n1.type !== n2.type) {// 类型不同，直接替换this.unmount(n1);this.mount(n2, container, anchor);return;}if (typeof n2.type === 'string') {// 更新元素const el = (n2.el = n1.el as HTMLElement);// 更新属性this.patchProps(el, n1.props, n2.props);// 更新子节点this.patchChildren(n1, n2, el);} else if (typeof n2.type === 'function') {// 更新组件this.patchComponent(n1, n2, container);}}private patchProps(el: HTMLElement,oldProps: Record<string, any>,newProps: Record<string, any>) {// 移除旧属性for (const key in oldProps) {if (!(key in newProps)) {if (key.startsWith('on')) {const event = key.slice(2).toLowerCase();el.removeEventListener(event, oldProps[key]);} else {el.removeAttribute(key);}}}// 设置新属性for (const key in newProps) {const newValue = newProps[key];const oldValue = oldProps[key];if (newValue !== oldValue) {if (key.startsWith('on')) {// 事件处理const event = key.slice(2).toLowerCase();if (oldValue) {el.removeEventListener(event, oldValue);}el.addEventListener(event, newValue);} else if (key === 'style') {// 样式处理if (typeof newValue === 'string') {el.style.cssText = newValue;} else {for (const styleKey in newValue) {el.style[styleKey] = newValue[styleKey];}}} else if (key === 'class') {// 类名处理if (Array.isArray(newValue)) {el.className = newValue.join(' ');} else {el.className = newValue;}} else {// 其他属性el.setAttribute(key, newValue);}}}}private patchChildren(n1: VNode, n2: VNode, container: HTMLElement) {const oldChildren = n1.children;const newChildren = n2.children;// 处理文本节点if (typeof newChildren[0] === 'string') {if (typeof oldChildren[0] === 'string') {// 文本节点更新if (newChildren[0] !== oldChildren[0]) {container.textContent = newChildren[0];}} else {// 替换为文本节点container.textContent = newChildren[0];}return;}// 处理子节点数组const oldLen = oldChildren.length;const newLen = newChildren.length;const commonLen = Math.min(oldLen, newLen);// 更新公共部分for (let i = 0; i < commonLen; i++) {this.patch(oldChildren[i] as VNode,newChildren[i] as VNode,container);}if (newLen > oldLen) {// 添加新节点for (let i = commonLen; i < newLen; i++) {this.mount(newChildren[i] as VNode, container);}} else if (oldLen > newLen) {// 移除多余节点for (let i = commonLen; i < oldLen; i++) {this.unmount(oldChildren[i] as VNode);}}}private unmount(vnode: VNode) {if (typeof vnode.type === 'string') {vnode.el?.parentNode?.removeChild(vnode.el);} else if (typeof vnode.type === 'function') {// 组件卸载if (vnode.el) {vnode.el.parentNode?.removeChild(vnode.el);}}}
}

Diff算法实现

// diff.ts
interface KeyToIndexMap {[key: string]: number;
}export function patchKeyedChildren(oldChildren: VNode[],newChildren: VNode[],container: HTMLElement
) {let oldStartIdx = 0;let oldEndIdx = oldChildren.length - 1;let newStartIdx = 0;let newEndIdx = newChildren.length - 1;let oldStartVNode = oldChildren[oldStartIdx];let oldEndVNode = oldChildren[oldEndIdx];let newStartVNode = newChildren[newStartIdx];let newEndVNode = newChildren[newEndIdx];const keyToIndexMap: KeyToIndexMap = {};while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (!oldStartVNode) {oldStartVNode = oldChildren[++oldStartIdx];} else if (!oldEndVNode) {oldEndVNode = oldChildren[--oldEndIdx];} else if (isSameVNode(oldStartVNode, newStartVNode)) {// 头部节点相同patch(oldStartVNode, newStartVNode, container);oldStartVNode = oldChildren[++oldStartIdx];newStartVNode = newChildren[++newStartIdx];} else if (isSameVNode(oldEndVNode, newEndVNode)) {// 尾部节点相同patch(oldEndVNode, newEndVNode, container);oldEndVNode = oldChildren[--oldEndIdx];newEndVNode = newChildren[--newEndIdx];} else if (isSameVNode(oldStartVNode, newEndVNode)) {// 老头和新尾相同patch(oldStartVNode, newEndVNode, container);container.insertBefore(oldStartVNode.el!,oldEndVNode.el!.nextSibling);oldStartVNode = oldChildren[++oldStartIdx];newEndVNode = newChildren[--newEndIdx];} else if (isSameVNode(oldEndVNode, newStartVNode)) {// 老尾和新头相同patch(oldEndVNode, newStartVNode, container);container.insertBefore(oldEndVNode.el!, oldStartVNode.el!);oldEndVNode = oldChildren[--oldEndIdx];newStartVNode = newChildren[++newStartIdx];} else {// 处理其他情况if (!keyToIndexMap) {// 生成旧节点的key映射for (let i = oldStartIdx; i <= oldEndIdx; i++) {const key = oldChildren[i].key;if (key != null) {keyToIndexMap[key] = i;}}}// 在旧节点中寻找新头节点const idxInOld = keyToIndexMap[newStartVNode.key!];if (idxInOld === undefined) {// 新节点mount(newStartVNode, container, oldStartVNode.el!);} else {// 移动节点const vnodeToMove = oldChildren[idxInOld];patch(vnodeToMove, newStartVNode, container);container.insertBefore(vnodeToMove.el!, oldStartVNode.el!);oldChildren[idxInOld] = undefined as any;}newStartVNode = newChildren[++newStartIdx];}}// 处理剩余节点if (oldStartIdx > oldEndIdx) {// 添加新节点const anchor = newChildren[newEndIdx + 1]? newChildren[newEndIdx + 1].el: null;for (let i = newStartIdx; i <= newEndIdx; i++) {mount(newChildren[i], container, anchor);}} else if (newStartIdx > newEndIdx) {// 移除多余节点for (let i = oldStartIdx; i <= oldEndIdx; i++) {if (oldChildren[i]) {unmount(oldChildren[i]);}}}
}function isSameVNode(n1: VNode, n2: VNode): boolean {return n1.type === n2.type && n1.key === n2.key;
}

组件系统实现 🏗️

组件定义

// component.ts
export interface ComponentOptions {name?: string;props?: Record<string, PropOptions>;setup?: (props: Record<string, any>,context: SetupContext) => Record<string, any>;render?: () => VNode;
}interface PropOptions {type: any;required?: boolean;default?: any;validator?: (value: any) => boolean;
}interface SetupContext {attrs: Record<string, any>;slots: Record<string, (...args: any[]) => VNode[]>;emit: (event: string, ...args: any[]) => void;
}export function defineComponent(options: ComponentOptions) {return {name: options.name,props: options.props,setup: options.setup,render: options.render,// 组件实例创建create(props: Record<string, any>) {// 创建组件实例const instance = {props: shallowReactive(props),attrs: {},slots: {},emit: (event: string, ...args: any[]) => {const handler = props[`on${capitalize(event)}`];if (handler) {handler(...args);}}};// 执行setupif (options.setup) {const setupContext = {attrs: instance.attrs,slots: instance.slots,emit: instance.emit};const setupResult = options.setup(instance.props,setupContext);if (typeof setupResult === 'function') {// setup返回渲染函数instance.render = setupResult;} else if (typeof setupResult === 'object') {// setup返回状态对象instance.setupState = proxyRefs(setupResult);}}// 渲染函数instance.render = options.render || instance.render;return instance;}};
}// 工具函数
function capitalize(str: string): string {return str.charAt(0).toUpperCase() + str.slice(1);
}

生命周期实现

// lifecycle.ts
export const enum LifecycleHooks {BEFORE_CREATE = 'beforeCreate',CREATED = 'created',BEFORE_MOUNT = 'beforeMount',MOUNTED = 'mounted',BEFORE_UPDATE = 'beforeUpdate',UPDATED = 'updated',BEFORE_UNMOUNT = 'beforeUnmount',UNMOUNTED = 'unmounted'
}export function injectHook(type: LifecycleHooks,hook: Function,target: any
): Function | undefined {if (target) {const hooks = target[type] || (target[type] = []);const wrappedHook = (...args: any[]) => {hook.call(target, ...args);};hooks.push(wrappedHook);return wrappedHook;}
}export const createHook = (lifecycle: LifecycleHooks) => {return (hook: Function, target: any = currentInstance) =>injectHook(lifecycle, hook, target);
};export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT);
export const onMounted = createHook(LifecycleHooks.MOUNTED);
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE);
export const onUpdated = createHook(LifecycleHooks.UPDATED);
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT);
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED);

性能优化 ⚡

静态节点优化

// optimize.ts
interface StaticNodeAnalysis {isStatic: boolean;staticRoot: boolean;
}export function optimizeNode(node: VNode): StaticNodeAnalysis {if (typeof node.type === 'string') {// 分析静态节点const analysis: StaticNodeAnalysis = {isStatic: true,staticRoot: false};// 检查属性for (const key in node.props) {if (key === 'v-if' ||key === 'v-for' ||key === 'v-model' ||key.startsWith(':') ||key.startsWith('@')) {analysis.isStatic = false;break;}}// 检查子节点if (analysis.isStatic && node.children.length > 0) {let allChildrenStatic = true;let staticChildCount = 0;for (const child of node.children) {if (typeof child === 'object') {const childAnalysis = optimizeNode(child);if (!childAnalysis.isStatic) {allChildrenStatic = false;break;}if (childAnalysis.staticRoot) {staticChildCount++;}}}analysis.staticRoot =allChildrenStatic && staticChildCount > 0;}return analysis;}return {isStatic: false,staticRoot: false};
}// 标记静态根节点
export function markStaticRoots(node: VNode, analysis: StaticNodeAnalysis) {if (analysis.staticRoot) {node.staticRoot = true;// 缓存静态子树node.staticChildren = [...node.children];}// 递归处理子节点for (const child of node.children) {if (typeof child === 'object') {const childAnalysis = optimizeNode(child);markStaticRoots(child, childAnalysis);}}
}

更新优化

// update-optimization.ts
export class UpdateOptimizer {private static readonly BATCH_SIZE = 1000;private updates: Set<VNode> = new Set();private updating = false;queueUpdate(vnode: VNode) {this.updates.add(vnode);if (!this.updating) {this.updating = true;requestAnimationFrame(() => this.processUpdates());}}private processUpdates() {const updates = Array.from(this.updates);this.updates.clear();this.updating = false;// 批量处理更新for (let i = 0; i < updates.length; i += this.BATCH_SIZE) {const batch = updates.slice(i, i + this.BATCH_SIZE);this.processBatch(batch);}}private processBatch(vnodes: VNode[]) {// 按照组件层级排序vnodes.sort((a, b) => getDepth(a) - getDepth(b));// 合并同层级更新const updateMap = new Map<number, VNode[]>();for (const vnode of vnodes) {const depth = getDepth(vnode);if (!updateMap.has(depth)) {updateMap.set(depth, []);}updateMap.get(depth)!.push(vnode);}// 按层级处理更新for (const [depth, nodes] of updateMap) {this.processDepthUpdates(nodes);}}private processDepthUpdates(vnodes: VNode[]) {// 处理同一层级的更新for (const vnode of vnodes) {if (vnode.staticRoot) {// 跳过静态根节点continue;}// 更新节点patch(vnode, vnode, vnode.el!.parentNode);}}
}function getDepth(vnode: VNode): number {let depth = 0;let current = vnode;while (current.parent) {depth++;current = current.parent;}return depth;
}

最佳实践建议 ⭐

性能优化建议

1. 节点优化

   • 使用key标识
   • 提取静态节点
   • 避免深层嵌套
   • 合理使用v-show

2. 更新优化

   • 批量更新
   • 异步更新
   • 合并操作
   • 缓存结果

3. 渲染优化

   • 懒加载组件
   • 虚拟滚动
   • 时间切片
   • 优先级调度

开发建议

1. 组件设计

// 好的实践
const GoodComponent = defineComponent({name: 'GoodComponent',props: {items: {type: Array,required: true}},setup(props) {// 提取复杂逻辑const state = reactive({selectedIndex: -1});// 计算属性const filteredItems = computed(() =>props.items.filter(item => item.visible));return {state,filteredItems};}
});// 避免这样做
const BadComponent = defineComponent({render() {// 渲染函数中包含复杂逻辑const items = this.items.filter(item => {return item.visible && this.complexCheck(item);});return h('div', {}, items.map(item =>h('div', { key: item.id }, item.name)));}
});

2. 更新处理

// 好的实践
function handleUpdates() {// 批量更新nextTick(() => {state.count++;state.total = calculateTotal();});
}// 避免频繁更新
function badUpdate() {state.count++;state.total = calculateTotal();// 直接触发DOM更新
}

结语 📝

虚拟DOM是现代前端框架的重要基石，通过本文，我们学习了：

1. 虚拟DOM的核心概念
2. DOM diff算法的实现
3. 组件系统的设计
4. 性能优化的策略
5. 开发中的最佳实践

💡 学习建议：

1. 深入理解虚拟DOM原理
2. 掌握diff算法的优化
3. 注重性能优化实践
4. 遵循最佳实践指南
5. 持续学习新的优化方案

---

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻