SRCの負荷速度を直接設定するよりも、iframesの動的割り当てが遅いSRCがなぜですか？

SRCの動的割り当てとSRCの直接設定のパフォーマンスの違い

Web開発では、IFRAMEが外部Webコンテンツを埋め込むためによく使用されます。ただし、開発者は、IFRAME src属性を動的に割り当てることは、 src属性を負荷に直接設定するよりも遅くなることを発見しました。なぜこれがなぜですか？

ブラウザがページをレンダリングすると、通常は上から下にレンダリングされます。 URLをsrc属性に直接書き込み、ブラウザは最初にIFRAMEを他のページ要素でレンダリングするため、負荷が同期されているように見えます。

ただし、 src属性を動的に変更することは異なります。 iframeリロードとレンダリングをトリガーします。ページの他の部分がレンダリングされているため、IFRAMEの読み込みプロセスが特に顕著になり、速度が遅くなります。さらに、動的荷重は、全体的な同期レンダリングではなく、ページ上のセグメント化されたレンダリングにつながり、この感覚をさらに悪化させます。

ユーザーエクスペリエンスを最適化するために、iframeコンテンツがロードされたときにロードアニメーションを表示し、ロードが完了した後に非表示にできます。次のコードの例は、このアプローチを示しています。

 iframeload（）{
  this.loading = true;
  const iframe = this。$ refs.iframe;
  // IEおよび非IEブラウザーiframe.onload =（）=> {と互換性のある
    this.loading = false;
  };
}

アニメーションをロードすることにより、IFRAMEを動的にロードするときのユーザーエクスペリエンスが効果的に改善されます。

以上がSRCの負荷速度を直接設定するよりも、iframesの動的割り当てが遅いSRCがなぜですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。