為什么通過(guò)JavaScript動(dòng)態(tài)賦值iframe的src比直接在HTML中寫(xiě)入src加載速度慢？

iframe動(dòng)態(tài)加載與靜態(tài)加載的渲染速度差異

在網(wǎng)頁(yè)開(kāi)發(fā)中，使用iframe嵌入外部?jī)?nèi)容很常見(jiàn)。然而，動(dòng)態(tài)使用JavaScript賦值iframe的src屬性與直接在html中寫(xiě)入src屬性，加載速度存在差異，動(dòng)態(tài)加載往往顯得較慢，且內(nèi)容渲染順序是從上到下依次進(jìn)行，而非整體呈現(xiàn)。

這種差異源于瀏覽器的渲染機(jī)制和JavaScript的執(zhí)行流程。靜態(tài)加載時(shí)，瀏覽器會(huì)將iframe與其他頁(yè)面元素同時(shí)加載和渲染，因此iframe內(nèi)容的出現(xiàn)較為迅速。

而動(dòng)態(tài)加載時(shí)，iframe會(huì)在頁(yè)面初始渲染后才加載內(nèi)容。修改src屬性后，瀏覽器需要重新加載和渲染iframe內(nèi)容。由于頁(yè)面其他部分已完成渲染，iframe的加載過(guò)程就顯得更為明顯，尤其當(dāng)iframe內(nèi)容復(fù)雜時(shí)，這種感覺(jué)更加突出。

為了改善用戶(hù)體驗(yàn)，建議在iframe加載期間顯示加載動(dòng)畫(huà)，加載完成后再隱藏。以下是一個(gè)示例代碼：

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

iframeLoad() {   this.loading = true;   const iframe = this.$refs.iframe;   // 兼容性處理   if (iframe.attachEvent) { // ie瀏覽器     iframe.attachEvent("onload", () => {       this.loading = false;     });   } else { // 其他瀏覽器     iframe.onload = () => {       this.loading = false;     };   } }

通過(guò)此方法，可以有效地提升用戶(hù)體驗(yàn)，并減少動(dòng)態(tài)加載src屬性帶來(lái)的渲染速度差異感知。 這使得用戶(hù)在等待iframe內(nèi)容加載時(shí)，不會(huì)感到頁(yè)面卡頓或無(wú)響應(yīng)。

以上就是