So Cool，2024年还可以这样实现DOM可视化！！！

掌握DOM结构的理解和分析对于提升网页性能至关重要。在浏览器执行回流和重绘这两个渲染过程中，DOM的层级关系起到了决定性作用。通过深入分析DOM结构，我们可以识别出那些可能触发回流或重绘的元素，并采取措施减少这些成本高昂的操作。了解DOM布局和层次之间的相互作用，对于制定有效的性能优化策略至关重要，它不仅能够指导我们精确地实施性能改进措施，还能帮助我们提前规避潜在的渲染瓶颈，确保网页渲染过程的高效与稳定。

虽然我们可以通过浏览器的调试工具直接查看页面元素节点的结构和层级，但这种方式往往缺乏直观性。

然而，借助于浏览器调试工具，我们可以更加直观地分析页面层级分布。以下是简单直观的操作步骤：

打开Chrome浏览器，并启动开发者工具。
点击右上角的菜单按钮，选择"More tools"，然后点击"Layers"选项。

最近，我在闲暇时发现了一位国外开发者的创新操作，他开发了一个3D DOM可视化工具，该工具能够将网页的DOM结构以三维形式展现，仅需在控制台运行一段代码，即可实现网页元素的立体堆叠效果，从而更加直观地展示页面的层级分布，这一创意令人赞叹。

以下是实现该效果的代码，附有详细注释：

JavaScript 复制代码

// 3D DOM查看器：将此代码复制粘贴到浏览器控制台中，即可以立体块的形式可视化DOM结构。
(() => {
  // 计算DOM树深度的函数
  const getDOMDepth = element => [...element.children].reduce((max, child) => Math.max(max, getDOMDepth(child)), 0) + 1;
  // 获取DOM树的深度
  const domDepthCache = getDOMDepth(document.body);
  // 根据DOM元素的深度获取颜色的函数
  const getColorByDepth = (depth, hue = 190, lighten = 0, opacity = 1) => `hsla(${hue}, 75%, ${Math.min(10 + depth * (1 + 60 / domDepthCache), 90) + lighten}%,${opacity})`;

  // 配置选项
  const COLOR_SURFACES = true; // 是否为堆叠块的顶部着色？
  const COLOR_SIDES = true; // 是否为DOM元素的侧面着色？
  const COLOR_HUE = 190; // HSL中的色调（https://hslpicker.com） 
  const COLOR_OPACITY = 1;
  const MAX_ROTATION = 180; // 设置为360以使旋转完整
  const DEPTH_INCREMENT = 30; // 层的高度/深度
  const PERSPECTIVE = 1000; 
  const SIDE_FACE_CLASS = 'side-face'; // 我们使用这个类来避免无限遍历

  // 应用初始样式到body，启用3D透视
  const body = document.body;
  body.style.overflow = "visible";
  body.style.transformStyle = "preserve-3d";
  body.style.perspective = PERSPECTIVE;
  const perspectiveOriginX = (window.innerWidth / 2);
  const perspectiveOriginY = (window.innerHeight / 2);
  body.style.perspectiveOrigin = body.style.transformOrigin = `${perspectiveOriginX}px ${perspectiveOriginY}px`;
  // 遍历DOM，应用3D样式和创建侧面
  traverseDOM(body, 0, 0, 0);

  // 监听鼠标移动事件，根据鼠标位置旋转DOM
  document.addEventListener("mousemove", (event) => {
    const rotationY = (MAX_ROTATION * (1 - event.screenY / screen.height) - (MAX_ROTATION / 2));
    const rotationX = (MAX_ROTATION * event.screenX / screen.width - (MAX_ROTATION / 2));
    body.style.transform = `rotateX(${rotationY}deg) rotateY(${rotationX}deg)`;
  });

  // 创建DOM元素的侧面，使其具有3D外观
  function createSideFaces(element, depthLevel) {
    const width = element.offsetWidth;
    const height = element.offsetHeight;
    const color = getColorByDepth(depthLevel, 190, -5, COLOR_OPACITY);
    const fragment = document.createDocumentFragment();

    // 辅助函数用于创建和样式化面
    const createFace = ({ width, height, transform, transformOrigin, top, left, right, bottom }) => {
      const face = document.createElement('div');
      face.className = SIDE_FACE_CLASS;
      Object.assign(face.style, {
        transformStyle: "preserve-3d",
        position: 'absolute',
        width: `${width}px`,
        height: `${height}px`,
        background: color,
        transform,
        transformOrigin,
        overflow: 'hidden',
        willChange: 'transform',
        top,
        left,
        right,
        bottom
      });
      fragment.appendChild(face);
    }

    // 顶部面
    createFace({
      width,
      height: DEPTH_INCREMENT,
      transform: 'rotateX(-90deg)',
      transformOrigin: 'top',
      top: '0px',
      left: '0px'
    });

    // 右侧面
    createFace({
      width: DEPTH_INCREMENT,
      height,
      transform: 'rotateY(90deg)',
      transformOrigin: 'left',
      top: '0px',
      left: `${width}px`
    });

    // 底部面
    createFace({
      width,
      height: DEPTH_INCREMENT,
      transform: 'rotateX(90deg)',
      transformOrigin: 'bottom',
      bottom: '0px',
      left: '0px'
    });

    // 左侧面
    createFace({
      width: DEPTH_INCREMENT,
      height,
      transform: `translateX(${-DEPTH_INCREMENT}px) rotateY(-90deg)`,
      transformOrigin: 'right',
      top: '0px',
      left: '0px'
    });

    element.appendChild(fragment);
  }

  // 递归遍历子节点，应用3D样式和创建侧面
  function traverseDOM(parentNode, depthLevel, offsetX, offsetY) {
    for (let children = parentNode.childNodes, childrenCount = children.length, i = 0; i < childrenCount; i++) {
      const childNode = children[i];
      if (!(1 === childNode.nodeType && !childNode.classList.contains(SIDE_FACE_CLASS))) continue;
      Object.assign(childNode.style, {
        transform: `translateZ(${DEPTH_INCREMENT}px)`,
        overflow: "visible",
        transformStyle: "preserve-3d",
        backgroundColor: COLOR_SURFACES ? getColorByDepth(depthLevel, COLOR_HUE, 0, COLOR_OPACITY) : 'transparent',
        willChange: 'transform',
      });

      let updatedOffsetX = offsetX;
      let updatedOffsetY = offsetY;
      if (childNode.offsetParent === parentNode) {
        updatedOffsetX += parentNode.offsetLeft;
        updatedOffsetY += parentNode.offsetTop;
      }
      createSideFaces(childNode, depthLevel);
      traverseDOM(childNode, depthLevel + 1, updatedOffsetX, updatedOffsetY);
    }
  }
})()

这段代码的核心原理包括以下几个关键步骤：

DOM深度计算： 通过递归遍历DOM树，对每个元素进行深度优先搜索，计算出每个元素在DOM树中的深度。这一过程由getDOMDepth函数完成，它将遍历每个元素的子节点，并递归计算子节点的深度，最终返回整个DOM树的最大深度。
3D样式应用： 通过遍历DOM树的每个节点，为每个节点添加适当的CSS样式，以实现3D效果。这包括将元素放置在3D空间中的适当位置、旋转元素以展现3D效果以及为元素设置颜色以突出显示层级关系。
侧面创建： 为每个DOM元素创建顶部、右侧、底部和左侧的面，以便在3D空间中呈现立体效果。createSideFaces函数通过使用CSS的transform属性来旋转和定位每个面，并根据元素的深度设置适当的颜色。
动态旋转： 通过监听鼠标移动事件，捕获鼠标在屏幕上的位置，并据此调整整个DOM结构的旋转角度。这使得用户能够以动态的方式查看3D可视化效果，更好地理解页面的层级结构。
透视效果： 应用透视效果是实现3D立体效果的关键。通过在body元素上设置透视属性，以及为每个元素设置适当的transform-style属性，使得整个DOM树在3D空间中呈现出透视效果，使得远处的元素看起来比近处的元素小，从而增强了立体感。

这段代码通过JavaScript实现了一个3D DOM可视化工具，其核心原理是利用CSS的3D转换和透视效果，结合遍历DOM树和样式设置，将网页的DOM结构以立体堆叠的方式呈现出来。