最近接到一个需求，和AI 的对话需要展示图表，而这个图表的功能由另外一个系统提供，打算采用iframe的方式嵌入。
当我们和AI对话越来越多，嵌入的图表也会越来越多，此时一次性渲染多个iframe会导致页面白屏时间比较长，体验很差。
要解决这个问题，其本质就是减少不必要的iframe渲染。最简单的方式：只渲染可视区域的iframe。
由此，我想了2种解决方案。
虚拟滚动
只渲染可视区域，我下意识的就想到通过「虚拟滚动」来解决。
「虚拟滚动」的本质有两点：
1）只渲染可视区域的内容
2）根据内容高度模拟滚动条
第 1 点很容易实现，第 2 点难点在计算高度上。和AI的每次对话，其答案长度都是不确定的，所以要先获得高度，必须进行计算。
虽然粗略计算对话内容高度，从而来模拟滚动，不是不可行，但结合我们实际场景，这种方案性价比不高。
首先，我们对话内容并不是一次性获得，而是通过异步加载拉取，本质上不会存在一次性渲染太多内容，而导致页面卡顿的问题。
其次，如果要模拟滚动条高度，每次拉取数据时，都要遍历这些数据，通过预渲染，获得每条对话内容的高度，最后得到粗略的滚动条高度。
在已经异步加载的场景下，再去实现虚拟滚动，改动明显比较大，所以最后没有选择这种方案。
懒加载
从图片懒加载思路，获得灵感，iframe 是不是也可以通过懒加载来实现？
答案很明显，是可以的。
iframe自带属性
iframe 默认支持设置 loading="lazy" 来实现懒加载，而且兼容性也还不错。
如果对兼容性没有极致要求，这种方案就很高效，可以很好的解决一次性渲染太多iframe导致页面白屏时间过长的问题。
手动实现懒加载
实现懒加载，需要搞清楚一个表达式：
element：表示当前需要懒加载的内容元素，可以是img、iframe等
scrollEl：滚动条元素
scrollTop：一个元素的 scrollTop 值是这个元素的内容顶部 （卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
offsetTop：当前元素相对于其 offsetParent 元素的顶部内边距的距离。
document.documentElement.clientHeight：文档可视区域高度。
element.offsetTop - scrollEl.scrollTop < document.documentElement.clientHeight 当这个条件成立，则说明元素已经进入可视区域，结合下图更好理解。
dart
const scrollEl = 当前滚动元素
const lazyLoad = (elements) => { const clientH = document.documentElement.clientHeight const scrollT = scrollEl?.scrollTop || 0 for (const element of elements) { if (element.offsetTop - scrollT < clientH && !element.src) element.src = element.dataset.src ?? '' } }
// 使用节流函数，避免滚动时频繁触发
const iframeLazyLoad = throttle(() => { const iframes = document.querySelectorAll('.iframe') if (iframes) lazyLoad(iframes) }, 500)scrollEl.addEventListener('scroll', iframeLazyLoad)图片懒加载原理同上，只需将elements换成img对应的元素即可。
由于滚动时会频繁触发计算，造成不必要的性能开销，所以需要控制事件的触发频率，此处使用 throttle 函数，这里不做赘述，使用lodash第三方库，或者自行实现，都比较简单。
写在最后
针对这种场景------一次性渲染过多数据，导致的性能问题，解决方案的原理大同小异，基本上就是减少不必要的渲染，需要时再触发渲染，或者分批异步渲染。细化到具体方案，就只能根据实际情况分析。