浏览器渲染原理:从解析到像素管线

渲染流程:HTML 解析 → DOM → 样式计算 → 布局 → 分层 → 绘制 → 合成。

// 减少回流的技巧
const frag = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = String(i);
  frag.appendChild(li);
}
document.querySelector('ul').appendChild(frag);