页面加载多个Iframe，白屏时间太长，如何优化？

最近接到一个需求，和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 当这个条件成立，则说明元素已经进入可视区域，结合下图更好理解。

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第三方库，或者自行实现，都比较简单。

写在最后

针对这种场景——一次性渲染过多数据，导致的性能问题，解决方案的原理大同小异，基本上就是减少不必要的渲染，需要时再触发渲染，或者分批异步渲染。细化到具体方案，就只能根据实际情况分析。