滚动卡顿复盘：隐藏浮层为什么还在定位

{
  "recordType": "manual-observation-summary",
  "observedDate": "2026-11-01",
  "note": "根据当次页面调试记录整理；不是原始 CPU Profile、事件日志或完整性能追踪。",
  "pageUrl": "https://juejin.cn/book/7223230325122400288/section/7224404685799555111",
  "browser": "Edge 156",
  "devicePixelRatio": 2,
  "bundle": {
    "url": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/0266bcd.js",
    "bytes": 2471378,
    "sha256": "22d84ad71517db20c780b71753b612c62cda915737e9b00fc14090f807019be3",
    "locations": [
      {
        "name": "scheduleUpdate",
        "line": 4,
        "column": 775534,
        "behavior": "requestAnimationFrame 调度 update"
      },
      {
        "name": "B / update",
        "line": 4,
        "column": 763308,
        "behavior": "测量参考元素、执行 modifiers、调用 onUpdate"
      },
      {
        "name": "preventOverflow.fn",
        "line": 4,
        "column": 768709,
        "behavior": "临时清空 top/left/transform，读取边界后恢复"
      },
      {
        "name": "updatePopper",
        "line": 4,
        "column": 181782,
        "behavior": "组件层调用 scheduleUpdate"
      }
    ]
  },
  "hiddenOverlayObservation": {
    "count": 7,
    "display": "none",
    "stateEventsEnabled": true
  },
  "controlledComparisonNotes": {
    "action": "相同滚动路径，临时停止这 7 个隐藏浮层的事件监听",
    "original": {
      "scriptDurationSeconds": 3.5,
      "taskDurationSeconds": 5.58,
      "wallSeconds": 5.6
    },
    "listenersDisabled": {
      "scriptDurationSeconds": 0.94,
      "taskDurationSeconds": 5.02,
      "wallSeconds": 5.11
    },
    "note": "一次现场对照的手工摘要，不能外推为固定收益；并非对原站源码的正式修复。"
  },
  "limits": [
    "未取得完整 CPU Profile，不能把全部卡顿归给某一次函数调用。",
    "Long Animation Frame 脚本区间可能包含回调后的微任务，不能视为该回调的纯函数自身耗时。",
    "几何 API 调用次数不等于整页重新布局次数。",
    "未以相同方式单独测量正常显示中的原站浮层；配套压力实验是独立模型。"
  ]
}

{
  "measuredAt": "2026-11-02T00:17:58.365Z",
  "browser": "156.0.8078.74",
  "conditions": {
    "width": 1100,
    "height": 1000,
    "dpr": 1,
    "overlayCount": 256,
    "cpuThrottling": "none",
    "warmupScrolls": 4,
    "measuredScrolls": 24,
    "headless": true,
    "videoRecording": true
  },
  "cdp": [
    {
      "mode": "interleave",
      "metrics": {
        "LayoutCount": 6144,
        "LayoutDuration": 0.542814,
        "RecalcStyleCount": 6144,
        "RecalcStyleDuration": 0.012604,
        "ScriptDuration": 0.021001,
        "TaskDuration": 0.685001
      }
    },
    {
      "mode": "batched",
      "metrics": {
        "LayoutCount": 24,
        "LayoutDuration": 0.003271000000000024,
        "RecalcStyleCount": 24,
        "RecalcStyleDuration": 0.004742,
        "ScriptDuration": 0.008659999999999998,
        "TaskDuration": 0.09074700000000002
      }
    },
    {
      "mode": "batched",
      "metrics": {
        "LayoutCount": 24,
        "LayoutDuration": 0.004007000000000094,
        "RecalcStyleCount": 24,
        "RecalcStyleDuration": 0.005034,
        "ScriptDuration": 0.010606000000000004,
        "TaskDuration": 0.10683900000000002
      }
    },
    {
      "mode": "interleave",
      "metrics": {
        "LayoutCount": 6144,
        "LayoutDuration": 0.9778180000000001,
        "RecalcStyleCount": 6144,
        "RecalcStyleDuration": 0.031728000000000006,
        "ScriptDuration": 0.044053,
        "TaskDuration": 1.1935479999999998
      }
    }
  ],
  "automatic": {
    "schemaVersion": 1,
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.0.0 Safari/537.36",
    "viewport": {
      "width": 1100,
      "height": 1000,
      "dpr": 1
    },
    "overlayCount": 256,
    "readsPerUpdate": 512,
    "assignmentsPerUpdate": 512,
    "timingScope": "position callback; includes forced synchronous layout; excludes deferred rendering",
    "runs": [
      {
        "mode": "interleave",
        "samplesMs": [
          44,
          43.5,
          43.20000000298023,
          45.69999999925494,
          48.400000002235174,
          45.5,
          49.5,
          48,
          46.899999998509884,
          46.599999997764826,
          43.399999998509884,
          44.19999999925494,
          43.600000001490116,
          46.30000000074506,
          46.100000001490116,
          43.19999999925494,
          43,
          41.5,
          44.70000000298023,
          43.5,
          48.600000001490116,
          46.69999999925494,
          44.899999998509884,
          42.899999998509884,
          42.69999999925494,
          44.19999999925494,
          46.80000000074506,
          45,
          45.900000002235174,
          43,
          43.100000001490116,
          44.100000001490116,
          46.80000000074506,
          44.600000001490116,
          44.399999998509884,
          44.599999997764826,
          42.599999997764826,
          46.399999998509884,
          47.30000000074506,
          45.899999998509884,
          46.69999999925494,
          42.399999998509884,
          42.100000001490116,
          43.5,
          41.69999999925494,
          47,
          48.80000000074506,
          47.899999998509884
        ]
      },
      {
        "mode": "batched",
        "samplesMs": [
          0.6999999992549419,
          0.3999999985098839,
          0.5,
          0.6999999992549419,
          0.5,
          1.1000000014901161,
          0.6999999992549419,
          0.6999999992549419,
          0.5,
          0.5,
          0.5,
          0.6000000014901161,
          0.5999999977648258,
          0.8000000007450581,
          0.5999999977648258,
          0.9000000022351742,
          0.9000000022351742,
          1,
          0.8000000007450581,
          0.9000000022351742,
          1,
          0.9000000022351742,
          0.7000000029802322,
          0.8000000007450581,
          0.7000000029802322,
          0.9000000022351742,
          0.8000000007450581,
          0.6000000014901161,
          0.6999999992549419,
          0.7000000029802322,
          0.6999999992549419,
          0.8000000007450581,
          1,
          0.8999999985098839,
          0.8000000007450581,
          0.8000000007450581,
          0.8000000007450581,
          0.8000000007450581,
          0.8000000007450581,
          0.6999999992549419,
          0.6000000014901161,
          0.6999999992549419,
          0.8000000007450581,
          0.6999999992549419,
          0.6999999992549419,
          0.6999999992549419,
          0.8000000007450581,
          0.6999999992549419
        ]
      },
      {
        "mode": "batched",
        "samplesMs": [
          0.8000000007450581,
          0.6999999992549419,
          0.7999999970197678,
          0.7999999970197678,
          0.8000000007450581,
          0.6999999992549419,
          0.5,
          0.5999999977648258,
          0.7999999970197678,
          0.6999999992549419,
          0.8999999985098839,
          0.8000000007450581,
          0.8999999985098839,
          0.8000000007450581,
          0.6999999992549419,
          0.6999999992549419,
          0.6999999992549419,
          0.5,
          0.6999999992549419,
          0.5,
          0.6000000014901161,
          0.5,
          1.0999999977648258,
          0.8000000007450581,
          0.5,
          0.7000000029802322,
          0.6000000014901161,
          0.7000000029802322,
          0.9000000022351742,
          0.6999999992549419,
          0.6999999992549419,
          0.5999999977648258,
          0.8000000007450581,
          0.6000000014901161,
          0.6999999992549419,
          0.8000000007450581,
          0.6999999992549419,
          0.7999999970197678,
          0.8000000007450581,
          0.9000000022351742,
          0.8000000007450581,
          0.6999999992549419,
          0.6999999992549419,
          0.5999999977648258,
          0.5999999977648258,
          0.5,
          0.6999999992549419,
          0.5999999977648258
        ]
      },
      {
        "mode": "interleave",
        "samplesMs": [
          46.899999998509884,
          45.20000000298023,
          52.19999999925494,
          43.19999999925494,
          42.399999998509884,
          43.30000000074506,
          43.100000001490116,
          43.899999998509884,
          47,
          47.100000001490116,
          46,
          54,
          45,
          44.70000000298023,
          47.5,
          45.399999998509884,
          49.70000000298023,
          48.5,
          44.600000001490116,
          49.600000001490116,
          47.69999999925494,
          49.899999998509884,
          47.900000002235174,
          47.30000000074506,
          50.5,
          57.600000001490116,
          46.599999997764826,
          47.599999997764826,
          46.899999998509884,
          47.80000000074506,
          47.30000000074506,
          46.399999998509884,
          44.79999999701977,
          46.30000000074506,
          43.69999999925494,
          46.099999997764826,
          47.19999999925494,
          45.899999998509884,
          54.899999998509884,
          46.20000000298023,
          51.29999999701977,
          46.80000000074506,
          45.5,
          44.100000001490116,
          44.79999999701977,
          43.100000001490116,
          44.400000002235174,
          45.80000000074506
        ]
      }
    ],
    "summary": {
      "interleave": {
        "count": 96,
        "meanMs": 45.99062499997672,
        "p95Ms": 51.29999999701977
      },
      "batched": {
        "count": 96,
        "meanMs": 0.725000000015522,
        "p95Ms": 1
      }
    }
  },
  "mobile": {
    "width": 390,
    "scrollWidth": 390,
    "count": 8
  },
  "errors": []
}

// 源文件：https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/0266bcd.js
// SHA-256：22d84ad71517db20c780b71753b612c62cda915737e9b00fc14090f807019be3
// 从当次产物提取，以 Prettier 格式化；中文解释注释为本文添加。
// 保留原标识符与表达式，按调用关系排列。省略外层模块、其他 modifier 及辅助函数，供阅读而非独立运行。
// 逗号表达式从左到右执行，并返回最后一项；不能把其中几次操作误认为同时发生。

// 0266bcd.js:4:178938
t.default = {
  // ...省略组件的 props、watch 和其他方法
  data: function () {
    return {
      popperJS: null,
      popperStatus: !1,
      // 组件层的默认选项把边界设为 window，覆盖库默认的 scrollParent。
      // 这里展示默认数据；调用方仍可通过 popperOptions 提供选项。
      popperOptionsData: {
        placement: this.placement,
        computeStyle: { gpuAcceleration: !0 },
        modifiers: { preventOverflow: { boundariesElement: "window" } },
      },
      _timer: null,
      _disabledAppendToBody: !1,
    };
  },
};

// 0266bcd.js:4:768668，pe.modifiers.preventOverflow
var pe = {
  // ...省略其他默认选项
  modifiers: {
    // ...省略其他 modifier
    preventOverflow: {
      // 300 是在 modifier 链中的执行顺序，!0 等价于 true。
      order: 300,
      enabled: !0,
      // data 是本轮定位数据；e 是 preventOverflow 的运行时选项。
      fn: function (data, e) {
        // t 是边界元素或边界类型；_ 是获取定位父元素的 helper。
        // 边界若恰好是参考元素自身，就继续向外取定位父元素。
        var t = e.boundariesElement || _(data.instance.popper);
        data.instance.reference === t && (t = _(t));
        // n 是浏览器支持的 transform 属性名；r 是浮层的 style。
        // o、l、c 保存现有的 top、left、transform 字符串。
        var n = K("transform"),
          r = data.instance.popper.style,
          o = r.top,
          l = r.left,
          c = r[n];
        // 写 DOM：临时清空浮层的三个定位样式。
        ((r.top = ""), (r.left = ""), (r[n] = ""));
        // 读几何信息：E 计算边界，内部通过 M、I 等函数测量。
        // 如果前面的样式改动使布局失效，读取可能在这里触发同步布局。
        // 参数依次是浮层、参考元素、内边距、边界、fixed 定位标记。
        var d = E(
          data.instance.popper,
          data.instance.reference,
          e.padding,
          t,
          data.positionFixed,
        );
        // 再次写 DOM：恢复原定位样式，再把边界 d 留在选项对象上。
        ((r.top = o), (r.left = l), (r[n] = c), (e.boundaries = d));
        // h 是边界检查顺序；f 是当前浮层的坐标和尺寸。
        // 以下 primary / secondary 只计算并合并坐标对象，不逐项写 DOM。
        var h = e.priority,
          f = data.offsets.popper,
          m = {
            // 处理 left / top：越过最小边界时把坐标向内推。
            // 此处参数 t 是边名，和外层的边界元素 t 属于不同作用域。
            primary: function (t) {
              var n = f[t];
              return (
                f[t] < d[t] && !e.escapeWithReference && (n = Math.max(f[t], d[t])),
                // T({}, t, n) 在这里生成只有一个坐标属性的对象，等价于 { [t]: n }。
                T({}, t, n)
              );
            },
            // 处理 right / bottom：换算为 left / top，再扣除浮层宽高。
            // escapeWithReference 开启时，下面的边界修正条件不成立。
            secondary: function (t) {
              var n = "right" === t ? "left" : "top",
                r = f[n];
              return (
                f[t] > d[t] &&
                  !e.escapeWithReference &&
                  (r = Math.min(f[n], d[t] - ("right" === t ? f.width : f.height))),
                T({}, n, r)
              );
            },
          };
        return (
          // 按优先级逐边修正。这里的 e 是边名，遮蔽了外层的选项参数 e。
          h.forEach(function (e) {
            var t = -1 !== ["left", "top"].indexOf(e) ? "primary" : "secondary";
            // W 在这里相当于 Object.assign：合并本次修正后的坐标。
            f = W({}, f, m[t](e));
          }),
          // 写回本轮数据并返回；后续 computeStyle / applyStyle 负责最终位置样式。
          (data.offsets.popper = f),
          data
        );
      },
      priority: ["left", "right", "top", "bottom"],
      padding: 5,
      // 这是库默认值，可被组件和调用方覆盖；组件默认配置见配套源码。
      boundariesElement: "scrollParent",
    },
  },
};

// 0266bcd.js:4:763308
// B 是定位更新入口：先构造 data，测量参考元素并生成浮层初始坐标，再交给 D。
// O 计算参考元素偏移，P 选择 placement，F 生成浮层初始矩形。
function B() {
  if (!this.state.isDestroyed) {
    var data = {
      instance: this,
      styles: {},
      arrowStyles: {},
      attributes: {},
      flipped: !1,
      offsets: {},
    };
    ((data.offsets.reference = O(
      this.state,
      this.popper,
      this.reference,
      this.options.positionFixed,
    )),
      (data.placement = P(
        this.options.placement,
        data.offsets.reference,
        this.popper,
        this.reference,
        this.options.modifiers.flip.boundariesElement,
        this.options.modifiers.flip.padding,
      )),
      (data.originalPlacement = data.placement),
      (data.positionFixed = this.options.positionFixed),
      (data.offsets.popper = F(this.popper, data.offsets.reference, data.placement)),
      (data.offsets.popper.position = this.options.positionFixed ? "fixed" : "absolute"),
      (data = D(this.modifiers, data)),
      this.state.isCreated
        ? this.options.onUpdate(data)
        : ((this.state.isCreated = !0), this.options.onCreate(data)));
  }
}

// 0266bcd.js:4:762824
// D 依次执行 modifier；e 是 modifier 数组，t 是可选的截断位置。
// 数组在实例初始化时按 order 排序；这里仅执行 enabled 且 fn 可调用的项目。
function D(e, data, t) {
  return (
    (void 0 === t
      ? e
      : e.slice(
          0,
          (function (e, t, n) {
            if (Array.prototype.findIndex)
              return e.findIndex(function (e) {
                return e[t] === n;
              });
            var r = j(e, function (e) {
              return e[t] === n;
            });
            return e.indexOf(r);
          })(e, "name", t),
        )
    ).forEach(function (e) {
      e.function && console.warn("`modifier.function` is deprecated, use `modifier.fn`!");
      var t = e.function || e.fn;
      e.enabled &&
        c(t) &&
        ((data.offsets.popper = G(data.offsets.popper)),
        (data.offsets.reference = G(data.offsets.reference)),
        // 调用具体 modifier，包括正文展示的 preventOverflow.fn。
        (data = t(data, e)));
    }),
    data
  );
}

// 0266bcd.js:4:760717
// E 计算边界：e 是浮层，t 是参考元素，n 是 padding，r 是边界元素或类型。
// 第五个参数通过 arguments[4] 读取，o 表示是否为 fixed 定位。
// c 是几何计算参照；L / x 分别处理 fixed 参照和共同定位祖先。
function E(e, t, n, r) {
  var o = arguments.length > 4 && void 0 !== arguments[4] && arguments[4],
    l = { top: 0, left: 0 },
    c = o ? L(e) : x(e, t);
  if ("viewport" === r) l = A(c, o);
  else {
    var d = void 0;
    "scrollParent" === r
      ? "BODY" === (d = f(h(t))).nodeName && (d = e.ownerDocument.documentElement)
      : (d = "window" === r ? e.ownerDocument.documentElement : r);
    // 非 viewport 分支先选出边界节点 d，再测量它相对参照 c 的矩形。
    var m = M(d, c, o);
    if ("HTML" !== d.nodeName || N(c)) l = m;
    else {
      var v = V(e.ownerDocument),
        y = v.height,
        _ = v.width;
      ((l.top += m.top - m.marginTop),
        (l.bottom = y + m.top),
        (l.left += m.left - m.marginLeft),
        (l.right = _ + m.left));
    }
  }
  // 以下只根据 padding 收缩边界对象，不修改元素样式。
  var w = "number" == typeof (n = n || 0);
  return (
    (l.left += w ? n : n.left || 0),
    (l.top += w ? n : n.top || 0),
    (l.right -= w ? n : n.right || 0),
    (l.bottom -= w ? n : n.bottom || 0),
    l
  );
}

// 0266bcd.js:4:759397
// M 把元素 e 的矩形换算到参照元素 t 的坐标系，兼顾边框、margin 和滚动。
function M(e, t) {
  var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
    r = y(10),
    o = "HTML" === t.nodeName,
    // 读取两份矩形。I 内部会调用 getBoundingClientRect 和尺寸属性。
    l = I(e),
    c = I(t),
    h = f(e),
    // d(t) 读取计算样式，下面使用参照元素的边框与 margin。
    m = d(t),
    v = parseFloat(m.borderTopWidth, 10),
    _ = parseFloat(m.borderLeftWidth, 10);
  n && o && ((c.top = Math.max(c.top, 0)), (c.left = Math.max(c.left, 0)));
  var w = G({
    top: l.top - c.top - v,
    left: l.left - c.left - _,
    width: l.width,
    height: l.height,
  });
  if (((w.marginTop = 0), (w.marginLeft = 0), !r && o)) {
    var x = parseFloat(m.marginTop, 10),
      S = parseFloat(m.marginLeft, 10);
    ((w.top -= v - x),
      (w.bottom -= v - x),
      (w.left -= _ - S),
      (w.right -= _ - S),
      (w.marginTop = x),
      (w.marginLeft = S));
  }
  return (
    (r && !n ? t.contains(h) : t === h && "BODY" !== h.nodeName) && (w = k(w, t)),
    w
  );
}

// 0266bcd.js:4:758788
// I 读取 DOM 几何信息，并做浏览器兼容与尺寸修正；G 补出 right、bottom。
// 只有读取需要更新的布局时才可能触发同步布局，不是每次 API 调用都必然重排。
function I(element) {
  var rect = {};
  try {
    if (y(10)) {
      rect = element.getBoundingClientRect();
      var e = S(element, "top"),
        t = S(element, "left");
      ((rect.top += e), (rect.left += t), (rect.bottom += e), (rect.right += t));
    } else rect = element.getBoundingClientRect();
  } catch (e) {}
  var n = {
      left: rect.left,
      top: rect.top,
      width: rect.right - rect.left,
      height: rect.bottom - rect.top,
    },
    r = "HTML" === element.nodeName ? V(element.ownerDocument) : {},
    o = r.width || element.clientWidth || n.right - n.left,
    l = r.height || element.clientHeight || n.bottom - n.top,
    c = element.offsetWidth - o,
    h = element.offsetHeight - l;
  if (c || h) {
    var f = d(element);
    ((c -= Z(f, "x")), (h -= Z(f, "y")), (n.width -= c), (n.height -= h));
  }
  return G(n);
}

// 0266bcd.js:4:765735
// ie 是最终样式写入 helper：尺寸和位置的数值补 px，其余属性直接写 style。
function ie(element, e) {
  Object.keys(e).forEach(function (t) {
    var n = "";
    (-1 !== ["width", "height", "top", "right", "bottom", "left"].indexOf(t) &&
      ne(e[t]) &&
      (n = "px"),
      (element.style[t] = e[t] + n));
  });
}

// 0266bcd.js:4:774779
var pe = {
  modifiers: {
    // applyStyle 排在 order 900，接收前面计算的 data.styles，并通过 ie 写回 DOM。
    // 保留 onLoad 初始化分支，避免把初始化写入和滚动时 fn 的写入混为一谈。
    applyStyle: {
      order: 900,
      enabled: !0,
      fn: function (data) {
        var element, e;
        return (
          ie(data.instance.popper, data.styles),
          (element = data.instance.popper),
          (e = data.attributes),
          Object.keys(e).forEach(function (t) {
            !1 !== e[t] ? element.setAttribute(t, e[t]) : element.removeAttribute(t);
          }),
          data.arrowElement &&
            Object.keys(data.arrowStyles).length &&
            ie(data.arrowElement, data.arrowStyles),
          data
        );
      },
      onLoad: function (e, t, n, r, o) {
        var l = O(o, t, e, n.positionFixed),
          c = P(
            n.placement,
            l,
            t,
            e,
            n.modifiers.flip.boundariesElement,
            n.modifiers.flip.padding,
          );
        return (
          t.setAttribute("x-placement", c),
          ie(t, { position: n.positionFixed ? "fixed" : "absolute" }),
          n
        );
      },
      gpuAcceleration: void 0,
    },
  },
};

{
  "checkedAt": "2026-11-02T01:23:30.327Z",
  "siteBundle": {
    "url": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/0266bcd.js",
    "status": 200,
    "sha256": "22d84ad71517db20c780b71753b612c62cda915737e9b00fc14090f807019be3",
    "sourceMappingUrls": [
      "0266bcd.js.map"
    ],
    "sourceMapHeader": null,
    "xSourceMapHeader": null
  },
  "declaredMap": {
    "url": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/0266bcd.js.map",
    "status": 404,
    "contentType": "application/json",
    "error": "The specified key does not exist."
  },
  "retrievedUpstreamMap": {
    "url": "https://unpkg.com/popper.js@1.16.1/dist/umd/popper.js.map",
    "sha256": "1408c0eb5570ed3279b7d6a9a6f5b3c1cdeb6e6a67e2ec60cfb49bfd608dcd92",
    "bytes": 140747,
    "version": 3,
    "sources": 61,
    "sourcesContent": 61,
    "names": 381,
    "selectedSourceIndex": 54,
    "selectedSourcePath": "../../src/modifiers/preventOverflow.js",
    "selectedSourceSha256": "e97d67ceabc87a119f95c58f45daacfab9fdb409b0fa54d99f5a3268fa2141e9"
  },
  "comparison": {
    "sameNormalizedMinifiedCode": false,
    "behaviorCases": 120,
    "behaviorsEqual": true,
    "scope": "对比 preventOverflow 函数；用桩隔离边界测量，核对坐标、样式恢复、测量时样式与调用参数。不能证明整个依赖版本相同。",
    "aliases": {
      "_": "getOffsetParent",
      "K": "getSupportedPropertyName",
      "E": "getBoundaries",
      "T": "_defineProperty",
      "W": "_extends"
    }
  },
  "limits": [
    "没有取得掘金 bundle 对应的 source map，不能直接建立其压缩位置到作者源文件的位置映射。",
    "上游 1.16.1 仅作为已核对的函数对照，不能据此锁定现场依赖版本或恢复掘金业务源码。",
    "120 组对照隔离了边界测量，并核对坐标、样式恢复及测量调用；不能替代完整浏览器几何验证。"
  ]
}

import getOffsetParent from '../utils/getOffsetParent';
import getBoundaries from '../utils/getBoundaries';
import getSupportedPropertyName from '../utils/getSupportedPropertyName';

/**
 * @function
 * @memberof Modifiers
 * @argument {Object} data - The data object generated by `update` method
 * @argument {Object} options - Modifiers configuration and options
 * @returns {Object} The data object, properly modified
 */
export default function preventOverflow(data, options) {
  let boundariesElement =
    options.boundariesElement || getOffsetParent(data.instance.popper);

  // If offsetParent is the reference element, we really want to
  // go one step up and use the next offsetParent as reference to
  // avoid to make this modifier completely useless and look like broken
  if (data.instance.reference === boundariesElement) {
    boundariesElement = getOffsetParent(boundariesElement);
  }

  // NOTE: DOM access here
  // resets the popper's position so that the document size can be calculated excluding
  // the size of the popper element itself
  const transformProp = getSupportedPropertyName('transform');
  const popperStyles = data.instance.popper.style; // assignment to help minification
  const { top, left, [transformProp]: transform } = popperStyles;
  popperStyles.top = '';
  popperStyles.left = '';
  popperStyles[transformProp] = '';

  const boundaries = getBoundaries(
    data.instance.popper,
    data.instance.reference,
    options.padding,
    boundariesElement,
    data.positionFixed
  );

  // NOTE: DOM access here
  // restores the original style properties after the offsets have been computed
  popperStyles.top = top;
  popperStyles.left = left;
  popperStyles[transformProp] = transform;

  options.boundaries = boundaries;

  const order = options.priority;
  let popper = data.offsets.popper;

  const check = {
    primary(placement) {
      let value = popper[placement];
      if (
        popper[placement] < boundaries[placement] &&
        !options.escapeWithReference
      ) {
        value = Math.max(popper[placement], boundaries[placement]);
      }
      return { [placement]: value };
    },
    secondary(placement) {
      const mainSide = placement === 'right' ? 'left' : 'top';
      let value = popper[mainSide];
      if (
        popper[placement] > boundaries[placement] &&
        !options.escapeWithReference
      ) {
        value = Math.min(
          popper[mainSide],
          boundaries[placement] -
            (placement === 'right' ? popper.width : popper.height)
        );
      }
      return { [mainSide]: value };
    },
  };

  order.forEach(placement => {
    const side =
      ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary';
    popper = { ...popper, ...check[side](placement) };
  });

  data.offsets.popper = popper;

  return data;
}

// 0266bcd.js:4:178424，Popper 组件封装的相关字段
// 保留标识符与控制流，中文注释为文章添加。
t.default = {
  props: {
    // ...省略其余 props
    // 0266bcd.js:4:178895
    autoFixPosition: { type: Boolean, default: !0 },
  },
  // 0266bcd.js:4:178938
  data: function () {
    return {
      popperJS: null,
      popperStatus: !1,
      popperOptionsData: {
        placement: this.placement,
        computeStyle: { gpuAcceleration: !0 },
        modifiers: { preventOverflow: { boundariesElement: "window" } },
      },
      _timer: null,
      _disabledAppendToBody: !1,
    };
  },
  // 0266bcd.js:4:179166
  watch: {
    popperStatus: function (e) {
      (e
        ? (this.$emit("on-show"),
          this.popperJS && this.popperJS.enableEventListeners(),
          this.updatePopper())
        : (this.$emit("on-hide"), this.popperJS && this.popperJS.disableEventListeners()),
        this.$emit("input", e));
    },
    disabled: function (e) {
      e && (this.popperStatus = !1);
    },
  },
  // 0266bcd.js:4:179590
  mounted: function () {
    var e = this;
    this.$nextTick(
      function () {
        ((0, r.default)(this, e),
          this.autoFixPosition &&
            this.popperElm &&
            (0, d.addResizeListener)(this.popperElm, this.handleResize));
      }.bind(this),
    );
  },
  // 0266bcd.js:4:179778
  beforeDestroy: function () {
    (this.destroyPopper(),
      this.autoFixPosition &&
        this.popperElm &&
        (0, d.removeResizeListener)(this.popperElm, this.handleResize));
  },
  methods: {
    // ...省略鼠标事件、延时开关和箭头添加等方法
    // 0266bcd.js:4:180404
    destroyPopper: function () {
      (this.popperJS && (this.popperJS.destroy(), (this.popperJS = null)),
        this.appendedToBody &&
          ((this.appendedToBody = !1), document.body.removeChild(this.popperElm)));
    },
    // 0266bcd.js:4:180578
    createPopper: function () {
      var e = this;
      this.$nextTick(
        function () {
          if (
            ((0, r.default)(this, e),
            this.visibleArrow && this.appendArrow(this.popperElm),
            !this.appendToBody ||
              this.appendedToBody ||
              this._disabledAppendToBody ||
              ((this.appendedToBody = !0), document.body.appendChild(this.popperElm)),
            this.popperJS && this.popperJS.destroy && this.popperJS.destroy(),
            this.boundariesSelector)
          ) {
            var t = document.querySelector(this.boundariesSelector);
            t &&
              ((this.popperOptionsData.modifiers = (0, o.default)(
                {},
                this.popperOptionsData.modifiers,
              )),
              (this.popperOptionsData.modifiers.preventOverflow = (0, o.default)(
                {},
                this.popperOptionsData.modifiers.preventOverflow,
              )),
              (this.popperOptionsData.modifiers.preventOverflow.boundariesElement = t));
          }
          ((this.popperOptionsData.onCreate = function () {
            ((0, r.default)(this, e), this.$nextTick(this.updatePopper));
          }.bind(this)),
            (this.popperJS = new l.default(
              this.referenceElm,
              this.popperElm,
              this.popperOptionsData,
            )),
            (this.popperJS.popper.style.width = this.width),
            (this.popperJS.popper.style["max-width"] = this.maxWidth));
        }.bind(this),
      );
    },
    // 0266bcd.js:4:181769
    updatePopper: function () {
      this.popperJS
        ? (this.popperJS.scheduleUpdate(),
          (this.popperJS.popper.style.zIndex = c.default.nextZIndex()))
        : this.createPopper();
    },
    // 0266bcd.js:4:181918
    handleResize: function () {
      this.updatePopper();
    },
  },
};

{
  "observedAt": "2026-11-02T01:55:06.425Z",
  "pageUrl": "https://juejin.cn/book/7223230325122400288/section/7224404685799555111",
  "bundleUrl": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/0266bcd.js",
  "browser": "156.0.8078.74",
  "viewport": {
    "width": 1280,
    "height": 960
  },
  "needle": "handleResize:function(){this.updatePopper()}",
  "replacement": "handleResize:function(){if(this.popperStatus)this.updatePopper()}",
  "scope": "全新匿名浏览器上下文；仅在受控浏览器网络响应内替换 handleResize，不修改原站；只记录状态与更新次数，不测量性能收益。",
  "runs": [
    {
      "patched": false,
      "originalHash": "22d84ad71517db20c780b71753b612c62cda915737e9b00fc14090f807019be3",
      "replacementCount": 0,
      "before": [
        {
          "uid": 58,
          "component": "ByteTooltip",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 60,
          "component": "ByteTooltip",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 90,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 106,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 122,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 138,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        },
        {
          "uid": 154,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        }
      ],
      "scroll": {
        "events": 24,
        "updates": 168
      },
      "transition": {
        "component": "ByteTooltip",
        "open": {
          "popperStatus": true,
          "display": "block",
          "hasInstance": true,
          "eventsEnabled": true
        },
        "closed": {
          "popperStatus": false,
          "display": "none",
          "hasInstance": true,
          "eventsEnabled": true
        }
      },
      "log": {
        "resize": [
          {
            "at": 1471.5,
            "uid": 58,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1474,
            "uid": 60,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1671.800000000745,
            "uid": 90,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1673.199999999255,
            "uid": 106,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1673.8999999985099,
            "uid": 122,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1674.3999999985099,
            "uid": 138,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1675.199999999255,
            "uid": 154,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 6244.300000000745,
            "uid": 58,
            "popperStatus": true,
            "hadInstanceBeforeCallback": true,
            "display": "block",
            "width": 204,
            "height": 20
          },
          {
            "at": 6853,
            "uid": 58,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          }
        ],
        "actualScrollEvents": 24,
        "updates": 170
      },
      "errors": []
    },
    {
      "patched": true,
      "originalHash": "22d84ad71517db20c780b71753b612c62cda915737e9b00fc14090f807019be3",
      "replacementCount": 1,
      "before": [
        {
          "uid": 58,
          "component": "ByteTooltip",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 60,
          "component": "ByteTooltip",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 90,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 106,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 122,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 138,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        },
        {
          "uid": 154,
          "component": "BytePopover",
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        }
      ],
      "scroll": {
        "events": 24,
        "updates": 0
      },
      "transition": {
        "component": "ByteTooltip",
        "open": {
          "popperStatus": true,
          "display": "block",
          "hasInstance": true,
          "eventsEnabled": true
        },
        "closed": {
          "popperStatus": false,
          "display": "none",
          "hasInstance": false,
          "eventsEnabled": null
        }
      },
      "log": {
        "resize": [
          {
            "at": 1326.5999999977648,
            "uid": 58,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1327.0999999977648,
            "uid": 60,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1490.3999999985099,
            "uid": 90,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1490.5999999977648,
            "uid": 106,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1490.5999999977648,
            "uid": 122,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1490.7999999970198,
            "uid": 138,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 1490.8999999985099,
            "uid": 154,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          },
          {
            "at": 6131.699999999255,
            "uid": 58,
            "popperStatus": true,
            "hadInstanceBeforeCallback": true,
            "display": "block",
            "width": 204,
            "height": 20
          },
          {
            "at": 6732.199999999255,
            "uid": 58,
            "popperStatus": false,
            "hadInstanceBeforeCallback": false,
            "display": "none",
            "width": 0,
            "height": 0
          }
        ],
        "actualScrollEvents": 24,
        "updates": 0
      },
      "errors": []
    }
  ]
}