JavaScript DOM更新算法工作原理：底层实现、规范与复杂度

交互示例：实时记录DOM状态 #

以下是一个简单的DOM交互式示例，点击按钮时会记录当前DOM元素的兄弟关系状态：

JavaScript代码 #

const parent = document.querySelector('#parent');
const [div1, div2, div3] = parent.children;
const [removeDiv2, addDiv4, reset] =
  document.querySelectorAll('button');

const div4 = document.createElement('div');
div4.classList.add('children');
div4.id = 'div4';
div4.textContent = 'div4';


logCurrentState();


removeDiv2.addEventListener('click', () => {
  parent.removeChild(div2);
  logCurrentState();
});


addDiv4.addEventListener('click', () => {
  parent.insertBefore(div4, div3);
  logCurrentState();
});


reset.addEventListener('click', () => {
  parent.replaceChildren(div1, div2, div3);
  console.clear();
  logCurrentState();
})

function logCurrentState() {
  console.log(
    [...parent.children].map(
      child => ({
        previous: child.previousElementSibling?.id ?? null,
        current: child.id,
        next: child.nextElementSibling?.id ?? null
      })
    )
  );
}

CSS样式 #

.children {
  padding: 1em;
  font-family: monospace;
}

#div1 {
  background: #ef6461;
}

#div2 {
  background: #e4b363;
}

#div3 {
  background: #e8e9eb;
}

#div4 {
  background: #e0dfd5;
}

HTML结构 #

<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<div id="parent">
  <div class="children" id="div1">div1</div>
  <div class="children" id="div2">div2</div>
  <div class="children" id="div3">div3</div>
</div>

<button>Remove div2</button>
<button>Add div4</button>
<button>Reset</button>

日志片段参考 #

// 初始状态
[
  { previous: null, current: 'div1', next: 'div2' },
  { previous: 'div1', current: 'div2', next: 'div3' },
  { previous: 'div2', current: 'div3', next: null }
]

// 删除div2后
[
  { previous: null, current: 'div1', next: 'div3' },
  { previous: 'div1', current: 'div3', next: null }
]

可以看到，调用removeChild()、insertBefore()等DOM修改方法时，previousElementSibling、nextElementSibling等属性会立刻更新为最新状态。

技术问题解答 #

1. 浏览器引擎底层实现逻辑 #

浏览器的DOM引擎会将每个元素节点设计成双向链表结构：每个节点持有两个引用，分别指向previousElementSibling和nextElementSibling，父节点则维护子节点链表的头部和尾部引用。

执行DOM修改操作时，引擎直接操作这些引用：

• 删除节点：将被删节点的前一个节点的next引用指向被删节点的后一个节点，同时把后一个节点的previous引用指向被删节点的前一个节点，最后解除被删节点与父节点的关联。
• 插入节点：找到目标位置的前一个节点，调整它的next引用指向新节点，新节点的previous指向前一个节点，新节点的next指向原目标节点，原目标节点的previous指向新节点。

这种直接修改引用的方式，让相关属性在操作完成后能立刻返回最新值。

2. 规范标准化 vs 厂商自定义实现 #

这一机制是完全由W3C DOM规范标准化的。规范明确要求，所有DOM修改方法执行后，必须同步更新previousElementSibling、nextElementSibling、children等关联属性的取值，且这些属性的访问必须返回实时的当前状态。

所有符合标准的浏览器（Chrome、Firefox、Safari等）都严格遵循这一规范，不存在依赖厂商自定义实现的情况。

3. 更新算法的复杂度 #

这类DOM节点关系更新的算法复杂度为O(1)：

• 插入、删除、替换节点的操作，本质上都是修改固定数量的引用，无需遍历整个子节点列表。
• 唯一例外的是children属性，它返回的是动态HTMLCollection集合，访问该集合时浏览器可能会重新遍历子节点生成集合，但这是访问时的操作，并非修改节点关系的操作，修改操作本身仍为O(1)。

内容的提问来源于stack exchange，提问作者InSync