页面加载多个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第三方库,或者自行实现,都比较简单。

写在最后

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

作者:雨霖
链接:https://juejin.cn/post/7305984583962279962


版权声明:

作者: freeclashnode

链接: https://www.freeclashnode.com/news/article-2781.htm

来源: FreeClashNode

文章版权归作者所有,未经允许请勿转载。

免费节点实时更新

热门文章

最新文章

归档