为什么iframe动态赋值src比直接在src中写死 url 然后 渲染内容要慢一些 ？

Question

为什么iframe动态赋值src比直接在src中写死 url 然后 加载内容要慢一些 ？

我说的慢， 是里面的元素渲染慢。
现在呈现的是页面从上往下依次渲染 ， 而不是整个页面的内容全部同时渲染。

。

Answer 1

浏览器渲染页面就是从上到下渲染的
你觉得变慢了 可能
一开始iframe和页面其他节点一起渲染，所以看起来是一下子出来，后面你只改了src只是重新渲染iframe，看起来就变慢了
你觉得缓慢加载会有问题的话可以加载一个loading 在加载之后取消掉
参考：

iframeLoad() {
  this.loading = true;
  const iframe = this.$refs.iframe;
  // 兼容处理
  if (iframe.attachEvent) {
    // IE
    iframe.attachEvent("onload", () => {
      this.loading = false;
    });
  } else {
    // 非IE
    iframe.onload = () => {
      this.loading = false;
    };
  }
}

Answer 2

<iframe> 元素在 HTML 页面加载时会被解析和加载。当浏览器解析到包含 <iframe> 标签的部分时，它会开始加载 <iframe> 中指定的源（src）内容。这意味着在主页面加载时，浏览器会同时加载 <iframe> 中指定的内容。

如果使用 JavaScript 动态地更改 <iframe> 的 src 属性，那么 <iframe> 的加载将会在这个改变后发生，而不是页面一开始加载时，会显得慢一些

Answer 3

以下结果来自AI的解答：
在动态赋值iframe的src属性时，浏览器会执行以下步骤：

解析JavaScript代码，找到动态赋值src的语句。
根据新的URL，发起网络请求，从服务器获取新的内容。
等待服务器响应，并下载新的内容。
将新的内容加载到iframe中进行渲染。
相比之下，直接在src中写死URL的方式，浏览器在加载页面时会立即发起网络请求，并开始下载内容。这样可以减少了解析JavaScript代码和动态赋值的时间。

因此，动态赋值src的方式相对于直接写死URL的方式，会增加一些额外的网络请求和解析时间，从而导致加载内容的速度稍慢一些。

另外，还需要考虑到浏览器的缓存机制。如果使用动态赋值src的方式，每次赋值都会导致浏览器重新请求内容，而直接写死URL的方式可能会利用浏览器的缓存，从而提高加载速度。