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)。