Why is the src with dynamic assignment of iframes slower than setting src loading speed directly?

Performance difference between dynamic assignment of src and direct setting of src

In web development, iframes are often used to embed external web content. However, developers found that dynamically assigning the iframe src attribute is slower than directly setting src attribute to load. Why is this?

When a browser renders a page, it is usually rendered from top to bottom. Write the URL directly into the src attribute, and the browser will initially render the iframe with other page elements, so the load seems to be synchronized.

But dynamically modifying src attribute is different. It triggers iframe reload and rendering. Since other parts of the page have been rendered, the iframe loading process becomes particularly prominent, causing the illusion of slow speed. In addition, dynamic loading may lead to segmented rendering on the page rather than overall synchronous rendering, further exacerbating this feeling.

In order to optimize the user experience, you can display the loading animation when the iframe content is loaded and hide it after the load is completed. The following code example demonstrates this approach:

 iframeLoad() {
  this.loading = true;
  const iframe = this.$refs.iframe;
  // Compatible with IE and non-IE browser iframe.onload = () => {
    this.loading = false;
  };
}

By loading animations, the user experience when dynamically loading iframes is effectively improved.

The above is the detailed content of Why is the src with dynamic assignment of iframes slower than setting src loading speed directly?. For more information, please follow other related articles on the PHP Chinese website!