页面加载多个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
文章版权归作者所有,未经允许请勿转载。
热门文章
- 11月15日|20.1M/S,Shadowrocket/Clash/SSR/V2ray免费节点订阅链接每天更新
- 11月21日|20.9M/S,SSR/Shadowrocket/Clash/V2ray免费节点订阅链接每天更新
- 11月29日|18.1M/S,SSR/Clash/Shadowrocket/V2ray免费节点订阅链接每天更新
- 11月28日|19.7M/S,V2ray/SSR/Shadowrocket/Clash免费节点订阅链接每天更新
- 11月27日|19.2M/S,SSR/Shadowrocket/Clash/V2ray免费节点订阅链接每天更新
- 11月24日|22.5M/S,V2ray/Shadowrocket/Clash/SSR免费节点订阅链接每天更新
- 11月23日|22.6M/S,Shadowrocket/V2ray/Clash/SSR免费节点订阅链接每天更新
- 11月22日|21.3M/S,V2ray/Shadowrocket/SSR/Clash免费节点订阅链接每天更新
- 12月3日|21.7M/S,Shadowrocket/Clash/V2ray/SSR免费节点订阅链接每天更新
- 11月30日|18M/S,Clash/V2ray/SSR/Shadowrocket免费节点订阅链接每天更新
最新文章
- 12月13日|22.8M/S,Clash/SSR/Shadowrocket/V2ray免费节点订阅链接每天更新
- 12月12日|19.2M/S,V2ray/SSR/Shadowrocket/Clash免费节点订阅链接每天更新
- 12月11日|18.9M/S,V2ray/SSR/Shadowrocket/Clash免费节点订阅链接每天更新
- 12月10日|21.8M/S,SSR/V2ray/Clash/Shadowrocket免费节点订阅链接每天更新
- 12月9日|20.5M/S,V2ray/Clash/Shadowrocket/SSR免费节点订阅链接每天更新
- 12月8日|21.5M/S,V2ray/Clash/Shadowrocket/SSR免费节点订阅链接每天更新
- 12月7日|18.5M/S,SSR/V2ray/Clash/Shadowrocket免费节点订阅链接每天更新
- 12月6日|19.9M/S,SSR/Shadowrocket/V2ray/Clash免费节点订阅链接每天更新
- 12月5日|18.5M/S,Clash/SSR/Shadowrocket/V2ray免费节点订阅链接每天更新
- 12月4日|21.8M/S,Clash/SSR/Shadowrocket/V2ray免费节点订阅链接每天更新