网站建设最低价,网站建设需要英语吗,wordpress多梦,网络推广什么做虚拟DOM实现 #x1f333;
虚拟DOM#xff08;Virtual DOM#xff09;是现代前端框架的核心技术之一#xff0c;它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。
虚拟DOM概述 #x1f31f; #x1f4a1; 小知识#xff1…虚拟DOM实现
虚拟DOMVirtual DOM是现代前端框架的核心技术之一它通过在内存中维护UI的虚拟表示来提高渲染性能。本文将深入探讨虚拟DOM的实现原理和关键技术。
虚拟DOM概述 小知识虚拟DOM是对真实DOM的一种轻量级抽象表示它以JavaScript对象的形式存在通过diff算法计算最小更新路径从而减少对实际DOM的操作。 为什么需要虚拟DOM
在现代前端开发中虚拟DOM带来以下优势 性能优化 批量DOM更新最小化DOM操作跨平台渲染服务端渲染 开发体验 声明式编程组件化开发状态驱动UI代码可维护性 跨平台能力 浏览器渲染原生应用渲染服务端渲染Canvas/WebGL渲染 调试能力 状态追踪组件调试性能分析错误边界
核心实现 ⚡
虚拟DOM节点定义
// vnode.ts
export type VNodeType string | Component;export interface VNode {type: VNodeType;props: Recordstring, any;children: (VNode | string)[];key?: string | number;el?: HTMLElement | Text;
}export interface Component {render: () VNode;props?: Recordstring, any;setup?: (props: Recordstring, any) Recordstring, any;
}export function h(type: VNodeType,props: Recordstring, 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: Recordstring, 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: Recordstring, any,newProps: Recordstring, 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?: Recordstring, PropOptions;setup?: (props: Recordstring, any,context: SetupContext) Recordstring, any;render?: () VNode;
}interface PropOptions {type: any;required?: boolean;default?: any;validator?: (value: any) boolean;
}interface SetupContext {attrs: Recordstring, any;slots: Recordstring, (...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: Recordstring, 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: SetVNode 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 Mapnumber, 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;
}最佳实践建议 ⭐
性能优化建议 节点优化 使用key标识提取静态节点避免深层嵌套合理使用v-show 更新优化 批量更新异步更新合并操作缓存结果 渲染优化 懒加载组件虚拟滚动时间切片优先级调度
开发建议
组件设计
// 好的实践
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)));}
});更新处理
// 好的实践
function handleUpdates() {// 批量更新nextTick(() {state.count;state.total calculateTotal();});
}// 避免频繁更新
function badUpdate() {state.count;state.total calculateTotal();// 直接触发DOM更新
}结语
虚拟DOM是现代前端框架的重要基石通过本文我们学习了
虚拟DOM的核心概念DOM diff算法的实现组件系统的设计性能优化的策略开发中的最佳实践 学习建议 深入理解虚拟DOM原理掌握diff算法的优化注重性能优化实践遵循最佳实践指南持续学习新的优化方案 如果你觉得这篇文章有帮助欢迎点赞收藏也期待在评论区看到你的想法和建议
终身学习共同成长。
咱们下一期见
