自制类Codepen代码Playground：添加iframe高度后Resize卡顿如何解决？

嘿，这个场景我太熟悉了！之前做自己的代码 playground 时，也踩过同样的坑——给 iframe 固定或动态设置高度后，拖拽列的分隔条就变得卡顿跳帧。本质原因是浏览器在 resize 过程中频繁触发重排（Reflow）：iframe 作为独立的渲染上下文，父容器尺寸变化时，浏览器不仅要计算外层布局，还要同步处理 iframe 内部的布局渲染，双重计算直接拉低了性能。

下面是几个亲测有效的解决方案，按实现成本从低到高排序：

1. 拖拽过程中临时“冻结”iframe 渲染 #

这是见效最快的方法——拖拽开始时，暂时让 iframe 停止渲染内容，用空白占位代替；拖拽结束后再恢复。这样浏览器在拖拽过程中不用处理 iframe 内部的布局，能大幅减少重排开销。

利用 jquery-resizable.js 提供的事件钩子，代码示例：

// 监听拖拽开始事件
$('.resizable-column').on('resizeStart', function() {
  const $iframe = $(this).find('iframe');
  // 保存原始状态
  $iframe.data('originalSrc', $iframe.attr('src'));
  $iframe.data('originalBg', $iframe.css('background-color'));
  
  // 替换为空白页面+占位背景
  $iframe.attr('src', 'about:blank');
  $iframe.css('background-color', '#f8f9fa');
});

// 监听拖拽结束事件，恢复iframe状态
$('.resizable-column').on('resizeStop', function() {
  const $iframe = $(this).find('iframe');
  $iframe.attr('src', $iframe.data('originalSrc'));
  $iframe.css('background-color', $iframe.data('originalBg'));
});

2. 用 CSS contain 属性限制重排范围 #

给包含 iframe 的列容器添加 contain 属性，告诉浏览器这个元素的布局、绘制和尺寸变化不会影响外部。这样拖拽时浏览器只会计算该列内部的布局，不用遍历整个文档树，能有效降低重排成本。

CSS 代码：

.resizable-column {
  /* 限制布局、绘制、尺寸的影响范围 */
  contain: layout paint size;
  /* 你的其他原有样式 */
  flex: 1;
  overflow: hidden;
}

注意：contain 属性兼容性很好，现代浏览器（Chrome/Firefox/Edge 80+）都支持，不会影响 iframe 的正常渲染。

3. 节流 iframe 的高度更新（动态高场景） #

如果你的 iframe 高度是根据内容动态计算的（比如同步内部文档高度），不要在拖拽的每帧都更新高度，而是用节流函数限制更新频率（比如每 16ms 一次，对应 60fps），只在拖拽结束时再做一次最终校正。

代码示例：

let resizeThrottleTimer;

$('.resizable-column').on('resizing', function() {
  const $iframe = $(this).find('iframe');
  clearTimeout(resizeThrottleTimer);
  
  // 节流：每16ms更新一次高度
  resizeThrottleTimer = setTimeout(() => {
    const iframeDoc = $iframe[0].contentWindow.document;
    $iframe.css('height', iframeDoc.body.scrollHeight + 'px');
  }, 16);
});

// 拖拽结束时立即更新，保证高度准确
$('.resizable-column').on('resizeStop', function() {
  const $iframe = $(this).find('iframe');
  const iframeDoc = $iframe[0].contentWindow.document;
  $iframe.css('height', iframeDoc.body.scrollHeight + 'px');
});

4. 进阶：用 Shadow DOM 替代 iframe（重构方案） #

如果你的 playground 有重构计划，可以考虑用 Shadow DOM 代替 iframe 来隔离代码渲染区域。Shadow DOM 是浏览器原生的隔离方案，渲染开销比 iframe 小得多，同时能实现样式和脚本的完全隔离，完全适配代码 playground 的需求。不过这个方案改动较大，适合长期优化时采用。

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