為什么動(dòng)態(tài)賦值iframe的src會(huì)比直接設(shè)置src加載速度慢？

iframe動(dòng)態(tài)賦值src與直接設(shè)置src的性能差異

網(wǎng)頁(yè)開發(fā)中，iframe常用于嵌入外部網(wǎng)頁(yè)內(nèi)容。然而，開發(fā)者發(fā)現(xiàn)動(dòng)態(tài)賦值iframe src屬性比直接設(shè)置src屬性加載速度慢。這是為什么呢？

瀏覽器渲染頁(yè)面時(shí)，通常自上而下依次渲染。直接在src屬性中寫入U(xiǎn)RL，瀏覽器會(huì)將iframe與其他頁(yè)面元素一起進(jìn)行初始渲染，因此加載看似同步。

但動(dòng)態(tài)修改src屬性則不同。它會(huì)觸發(fā)iframe重新加載和渲染。由于頁(yè)面其他部分已渲染完成，iframe的加載過程就顯得格外突出，造成速度慢的錯(cuò)覺。 此外，動(dòng)態(tài)加載可能導(dǎo)致頁(yè)面分段渲染，而非整體同步渲染，進(jìn)一步加劇這種感覺。

為了優(yōu)化用戶體驗(yàn)，可在iframe內(nèi)容加載時(shí)顯示加載動(dòng)畫，加載完成后再隱藏。 以下代碼示例演示了這種方法：

iframeLoad() {   this.loading = true;   const iframe = this.$refs.iframe;   // 兼容IE和非ie瀏覽器   iframe.onload = () => {     this.loading = false;   }; }

通過加載動(dòng)畫，有效改善動(dòng)態(tài)加載iframe時(shí)的用戶體驗(yàn)。