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

Question

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

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

。

Answer 1

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

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

Answer 2

浏览器渲染页面就是从上到下渲染的
你觉得变慢了 可能
一开始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;    };  }}