為什么動態賦值iframe的src會導致內容加載變慢？如何改善用戶體驗？

動態加載iframe的src屬性與靜態寫入URL的性能差異分析

在網頁開發中，iframe常用于嵌入外部內容。然而，動態設置iframe的src屬性往往比直接在src中寫入URL加載速度慢，這是為什么呢？

這主要是因為頁面渲染順序。靜態寫入URL時，iframe與頁面其他元素同時初始化渲染，內容幾乎瞬間顯示。而動態賦值src時，iframe的加載發生在頁面部分渲染之后，瀏覽器需要重新渲染iframe內容，導致內容加載看起來變慢，即使實際加載時間可能相差無幾。 用戶感知到的是iframe內容的延遲出現。

為了優化用戶體驗，建議在iframe加載過程中顯示加載提示（loading狀態），加載完成后再隱藏提示。 以下代碼示例演示了如何使用onload事件來實現這一功能，并兼容ie瀏覽器：

iframeLoad() {   this.loading = true;   const iframe = this.$refs.iframe;   // 兼容IE和現代瀏覽器   iframe.addEventListener('load', () => {     this.loading = false;   }, false); }

通過這種方法，可以有效緩解用戶等待的焦慮感，提升用戶體驗。