一个逐步绘制渲染当前dom页面的js脚本

脚本下载地址：https://p.kuraa.cc/api/files/content/KZwKnb-MDvxjt7VD2mq8-A/download

示例：

使用方法：

  
<script src="./page-plotter.js"></script>

<script>
  function startPlotting() {
    // 初始化并运行
   new PagePlotter({
       // penCount: 2,
       // strokeSpeed: 100000
    }).start();
  }
  // 页面加载完成后自动绘制一次
  window.addEventListener('DOMContentLoaded', () => {
    setTimeout(startPlotting, 300);
  });
</script>

可选参数：

new PagePlotter({
  target: document.body,
  strokeSpeed: 10000,          // 描边速度 (px/s)
  fillDuration: 1000,         // 上色持续时间 (ms)
  penColor: '#00f0ff',       // 笔尖颜色
  penSize: 18,
  penCount: 2,              // 画笔数量；按空间区域并行绘制
  showTelemetry: true,       // 显示标签与尺寸
  autoStart: false,
  direction: 'top-left-to-bottom-right', // 绘制流向策略
  filterSelector: '*',
  onNodeStart: null,
  onComplete: null
}).start();

慢慢绘制，可以看到dom树的框架结构与加载情况。

没啥卵用，以前还能小窃喜一下，如今ai几分钟完成。