Kenapa SRC dengan tugasan dinamik iframes lebih perlahan daripada menetapkan kelajuan pemuatan Src secara langsung?

Perbezaan prestasi antara tugasan dinamik SRC dan tetapan langsung SRC

Dalam pembangunan web, iframes sering digunakan untuk membenamkan kandungan web luaran. Walau bagaimanapun, pemaju mendapati bahawa secara dinamik menyerahkan atribut IFRame src adalah lebih perlahan daripada secara langsung menetapkan atribut src untuk dimuatkan. Mengapa ini?

Apabila pelayar membuat halaman, ia biasanya diberikan dari atas ke bawah. Tulis URL terus ke atribut src , dan penyemak imbas pada mulanya akan menjadikan iframe dengan elemen halaman lain, jadi beban nampaknya disegerakkan.

Tetapi secara dinamik mengubah suai atribut src adalah berbeza. Ia mencetuskan iframe tambah nilai dan rendering. Oleh kerana bahagian lain halaman telah diberikan, proses pemuatan iframe menjadi sangat menonjol, menyebabkan ilusi kelajuan perlahan. Di samping itu, pemuatan dinamik boleh membawa kepada rendering tersegmentasi pada halaman dan bukannya rendering segerak secara keseluruhan, seterusnya memburukkan lagi perasaan ini.

Untuk mengoptimumkan pengalaman pengguna, anda boleh memaparkan animasi pemuatan apabila kandungan iframe dimuatkan dan menyembunyikannya selepas beban selesai. Contoh kod berikut menunjukkan pendekatan ini:

 iframeload () {
  this.loading = true;
  const iframe = this. $ refs.iframe;
  // Sesuai dengan pelayar IE dan bukan IFRame.onload = () => {
    this.loading = false;
  };
}

Dengan memuatkan animasi, pengalaman pengguna apabila memuatkan iframes secara dinamik meningkat dengan berkesan.

Atas ialah kandungan terperinci Kenapa SRC dengan tugasan dinamik iframes lebih perlahan daripada menetapkan kelajuan pemuatan Src secara langsung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!