[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-25":3,"comments-25":22},{"id":4,"title":5,"summary":6,"cover":7,"author":8,"tags":13,"viewCount":14,"likeCount":9,"collectCount":15,"commentCount":15,"status":16,"publishedAt":17,"contentMd":18,"contentHtml":19,"likedByMe":20,"collectedByMe":20,"updatedAt":21},25,"说说真实DOM和虚拟DOM的区别?它们的优缺点是什么?：深入理解前端渲染机制与性能优化之道",null,"https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F808ada09-b138-45dc-bb66-db1a9c1c1b08.jpg",{"id":9,"username":10,"avatar":11,"bio":12},1,"DevShareAdmin","https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F98609a86-e08d-437b-b921-1291fc5a1b4d.jpg","DevShare（技享）官方账号",[],31,0,"published","2026-09-10T06:12:29.982Z","一、真实DOM与虚拟DOM的本质概念\n1.1 真实DOM的定义与结构\n真实DOM是浏览器原生提供的文档对象模型,它是HTML 或XML文档在内存中的对象表示。当浏览器解析HTML时,会构建出一棵由节点组成的树形结构,每个节点都是DOM对象,包含标签名、属性、子节点、文本内容等信息。\n\n真实DOM的核心特点如下:\n\n它是浏览器原生API,由C++实现,运行在浏览器底层\n每个DOM节点都是一个重量级对象,包含大量属性和方法\nDOM操作会触发浏览器的重排与重绘,性能开销较大\n它是页面可视元素的直接映射,操作DOM会立即影响页面呈现\n一个真实DOM节点的简化创建过程如下:\n\n```language\nconst div = document.createElement('div');\ndiv.id = 'app';\ndiv.className = 'container';\ndiv.textContent = 'Hello World';\n\n```\n上述代码创建的div对象在浏览器中包含上百个属性和方法,如childNodes、parentNode、style、addEventListener等,这些都是浏览器为每个DOM节点提供的标准接口。\n\n1.2 虚拟DOM的定义与结构\n虚拟DOM是用普通JavaScript对象来描述真实DOM的一种轻量级数据结构。它本质上是一棵普通的JavaScript对象树,通过属性来描述DOM节点的标签、类型、属性和子节点,而不是真正的浏览器DOM节点。\n\n虚拟DOM的核心特点如下:\n\n它是普通的JavaScript对象,创建和操作成本极低\n不依赖浏览器环境,可以运行在Node.js等服务端\n通过Diff算法比对前后两棵虚拟DOM树的差异\n最终将差异批量应用到真实DOM,减少直接操作DOM的次数\n一个虚拟DOM节点的简化结构如下:\n\n```language\n{\n  tag: 'div',\n  props: {\n    id: 'app',\n    className: 'container'\n  },\n  children: [\n    {\n      tag: 'span',\n      props: {},\n      children: ['Hello World']\n    }\n  ]\n}\n```\n在React中,虚拟DOM通过createElement函数创建:\n\n```language\nconst element = React.createElement(\n  'div',\n  { id: 'app', className: 'container' },\n  React.createElement('span', null, 'Hello World')\n);\n\n```\n1.3 两者的核心关系\n虚拟DOM与真实DOM并非对立关系,而是协作关系。虚拟DOM是真实DOM在JavaScript层的抽象映射,最终仍需转换为真实DOM才能在页面上呈现。它们的关系可以用如下流程描述:\n![](https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F1ff34189-c192-459c-b66b-ff85d6603dcd.png)\n从流程图可以看出,虚拟DOM充当了数据与真实DOM之间的中间层,通过最小化真实DOM操作来提升性能。\n\n二、真实DOM与虚拟DOM的区别详解\n2.1 渲染流程对比\n真实DOM的渲染流程相对直接:开发者通过原生API 操作DOM,浏览器立即响应并触发重排或重绘。每次操作都会引发浏览器的渲染流程,缺乏批量处理的机制。\n\n真实DOM渲染流程如下:\n![](https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002Fa4d06782-6437-4a78-bb15-f8537d679bda.png)\n\n","\u003Cp>一、真实DOM与虚拟DOM的本质概念\u003Cbr>\n1.1 真实DOM的定义与结构\u003Cbr>\n真实DOM是浏览器原生提供的文档对象模型,它是HTML 或XML文档在内存中的对象表示。当浏览器解析HTML时,会构建出一棵由节点组成的树形结构,每个节点都是DOM对象,包含标签名、属性、子节点、文本内容等信息。\u003C\u002Fp>\n\u003Cp>真实DOM的核心特点如下:\u003C\u002Fp>\n\u003Cp>它是浏览器原生API,由C++实现,运行在浏览器底层\u003Cbr>\n每个DOM节点都是一个重量级对象,包含大量属性和方法\u003Cbr>\nDOM操作会触发浏览器的重排与重绘,性能开销较大\u003Cbr>\n它是页面可视元素的直接映射,操作DOM会立即影响页面呈现\u003Cbr>\n一个真实DOM节点的简化创建过程如下:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-language\">const div = document.createElement('div');\ndiv.id = 'app';\ndiv.className = 'container';\ndiv.textContent = 'Hello World';\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>上述代码创建的div对象在浏览器中包含上百个属性和方法,如childNodes、parentNode、style、addEventListener等,这些都是浏览器为每个DOM节点提供的标准接口。\u003C\u002Fp>\n\u003Cp>1.2 虚拟DOM的定义与结构\u003Cbr>\n虚拟DOM是用普通JavaScript对象来描述真实DOM的一种轻量级数据结构。它本质上是一棵普通的JavaScript对象树,通过属性来描述DOM节点的标签、类型、属性和子节点,而不是真正的浏览器DOM节点。\u003C\u002Fp>\n\u003Cp>虚拟DOM的核心特点如下:\u003C\u002Fp>\n\u003Cp>它是普通的JavaScript对象,创建和操作成本极低\u003Cbr>\n不依赖浏览器环境,可以运行在Node.js等服务端\u003Cbr>\n通过Diff算法比对前后两棵虚拟DOM树的差异\u003Cbr>\n最终将差异批量应用到真实DOM,减少直接操作DOM的次数\u003Cbr>\n一个虚拟DOM节点的简化结构如下:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-language\">{\n  tag: 'div',\n  props: {\n    id: 'app',\n    className: 'container'\n  },\n  children: [\n    {\n      tag: 'span',\n      props: {},\n      children: ['Hello World']\n    }\n  ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在React中,虚拟DOM通过createElement函数创建:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-language\">const element = React.createElement(\n  'div',\n  { id: 'app', className: 'container' },\n  React.createElement('span', null, 'Hello World')\n);\n\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>1.3 两者的核心关系\u003Cbr>\n虚拟DOM与真实DOM并非对立关系,而是协作关系。虚拟DOM是真实DOM在JavaScript层的抽象映射,最终仍需转换为真实DOM才能在页面上呈现。它们的关系可以用如下流程描述:\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002F1ff34189-c192-459c-b66b-ff85d6603dcd.png\" alt>\u003Cbr>\n从流程图可以看出,虚拟DOM充当了数据与真实DOM之间的中间层,通过最小化真实DOM操作来提升性能。\u003C\u002Fp>\n\u003Cp>二、真实DOM与虚拟DOM的区别详解\u003Cbr>\n2.1 渲染流程对比\u003Cbr>\n真实DOM的渲染流程相对直接:开发者通过原生API 操作DOM,浏览器立即响应并触发重排或重绘。每次操作都会引发浏览器的渲染流程,缺乏批量处理的机制。\u003C\u002Fp>\n\u003Cp>真实DOM渲染流程如下:\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fdevshare-assets.oss-cn-guangzhou.aliyuncs.com\u002Fuploads\u002F2026\u002F09\u002Fa4d06782-6437-4a78-bb15-f8537d679bda.png\" alt>\u003C\u002Fp>\n",false,"2026-10-09T16:00:00.047Z",{"items":23,"nextCursor":6},[]]