方案网站,南昌小程序开发定制,广州市行政区划图,免费模板下载网站推荐真实节点、虚拟节点与影子节点的区别
本文将深入介绍真实节点、虚拟节点与影子节点是如何协同工作共同创建一个高性能的文档对象模型。
DOM#xff08;Document Object Module文档对象模型#xff09;正如它所描述的那样。网站的 HTML 树由一个名为document的对象表示。在这…真实节点、虚拟节点与影子节点的区别
本文将深入介绍真实节点、虚拟节点与影子节点是如何协同工作共同创建一个高性能的文档对象模型。
DOMDocument Object Module文档对象模型正如它所描述的那样。网站的 HTML 树由一个名为document的对象表示。在这个对象中有一个 HTML 树元素的模型可以通过document.xxx方便地访问。
document.head将返回head/head树的部分document.body将返回body/body树的部分依此类推。您还可以使用document.xxx的方法来操作 DOM。例如document.body.style.background red 将正文的背景颜色更改为红色。
这个 DOM 被称为页面的真实 DOM。真正的 DOM 本身只能在每次 DOM 发生更改时同时更新整个 DOM。这使得页面更新变得非常缓慢且昂贵。这就是虚拟 DOM能诞生的缘故。
虚拟DOM是真实 DOM 的虚拟表示。该虚拟 DOM 保存在内存中并与真实 DOM 同步。React 等库将真实的 DOM 编译成 Javascript对象这是创建更高性能更新的第一步。然后虚拟 DOM 制作其自身的副本我们将其称为虚拟 DOM 2。当页面上进行更新时它首先应用于虚拟 DOM 2。React 然后将虚拟 DOM 2 与原始虚拟 DOM真实 DOM 的精确副本进行比较。React 使用这种比较来快速检测真实 DOM 需要更新的位置并仅更新这些元素而不是整个 DOM。这就是神奇的地方只更新需要更新的内容会更快。
如果我们想查看虚拟 DOM 的运行情况可以在 Google Chrome 的检查工具中通过Paint flashing功能查看可视化表示 选中该框然后使用该页面任何 DOM 更改都将用绿色框突出显示。
最后大家比较少听到的就是shadow dom影子节点这允许隐藏的 DOM 树附加到常规 DOM 树中的元素。可以使用Web API创建自定义元素这些元素仅由影子 DOM 控制。重要的是要记住真实 DOM 和影子 DOM 是有界限。真实节点和影子节点之间的界限可以通过以下几种方式跨越 可继承的样式、 CSS属性 Constructable Stylesheets特性 :part:theme并非所有浏览器都支持样式 如果我们在检查工具中调试查看 HTML 元素并且在页面上正确查看时没有看到列出的内容那么它可能位于影子 DOM 中。最好的例子是视频播放器。在页面上您可以直观地看到内部 UI播放按钮、跳过按钮等但在真实 DOM 中看不到它。它由 Shadow DOM 控制。
尽管影子节点可能难以捉摸但如果我们需要的话实际上是可以显示影子节点在 Google Chrome 的检查工具中转到设置选择首选项然后转到元素部分。选择Show user agent shadow DOM以在检查工具的“元素”选项卡中与真实节点一起显示任何影子节点。
