Why is it slower to dynamically assign src to iframes to load by dynamically assigning src to Iframes directly than to write src in HTML?

Difference in rendering speed between dynamic loading and static loading of iframe

In web development, it is common to use iframes to embed external content. However, dynamically using JavaScript to assign src attributes to iframes is different from writing src attributes directly in HTML. Dynamic loading often seems slower, and the content rendering order is carried out from top to bottom, rather than overall rendering.

This difference stems from the browser's rendering mechanism and JavaScript execution process. When loading statically, the browser will load and render the iframe with other page elements at the same time, so the iframe content appears more quickly.

When dynamically loading, the iframe will load the content only after the page is initially rendered. After modifying the src attribute, the browser needs to reload and render the iframe content. Since other parts of the page have been rendered, the loading process of the iframe appears more obvious, especially when the iframe content is complex, this feeling is more prominent.

To improve the user experience, it is recommended to display the loading animation during the iframe loading and hide it after the loading is completed. Here is a sample code:

 iframeLoad() {
  this.loading = true;
  const iframe = this.$refs.iframe;
  // Compatibility processing if (iframe.attachEvent) { // IE browser iframe.attachEvent("onload", () => {
      this.loading = false;
    });
  } else { // Other browsers iframe.onload = () => {
      this.loading = false;
    };
  }
}

Through this method, the user experience can be effectively improved and the rendering speed difference perception brought about by dynamic loading of src attributes can be reduced. This allows users to not feel the page stuttering or unresponsive when waiting for the iframe content to load.

The above is the detailed content of Why is it slower to dynamically assign src to iframes to load by dynamically assigning src to Iframes directly than to write src in HTML?. For more information, please follow other related articles on the PHP Chinese website!