Rumah hujung hadapan web tutorial js js加载之使用DOM方法动态加载Javascript文件_javascript技巧

js加载之使用DOM方法动态加载Javascript文件_javascript技巧

May 16, 2016 pm 05:16 PM
pemuatan dinamik

传统上,加载Javascript文件都是使用<script>标签。 <BR>就像下面这样: <BR><script type="text/javascript" src="example.js"></script>
js加载之使用DOM方法动态加载Javascript文件_javascript技巧 
<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。 <BR>  (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。 <BR>  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。 <BR>为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。 <BR><div class="codetitle"><span><a style="max-width:90%" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><U>复制代码 代码如下:<div class="codebody" id="code78858"> <BR>  function loadScript(url){ <BR>    var script = document.createElement("script"); <BR>    script.type = "text/javascript"; <BR>    script.src = url; <BR>    document.body.appendChild(script); <BR>  } <BR> <BR>这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。 </script>

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue Cara mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue Oct 15, 2023 pm 04:34 PM

Cara mengendalikan pemuatan dinamik dan penukaran komponen dalam Vue

Python melaksanakan pemuatan halaman dinamik dan analisis fungsi pemprosesan permintaan tak segerak untuk aplikasi koleksi pelayar tanpa kepala Python melaksanakan pemuatan halaman dinamik dan analisis fungsi pemprosesan permintaan tak segerak untuk aplikasi koleksi pelayar tanpa kepala Aug 08, 2023 am 10:16 AM

Python melaksanakan pemuatan halaman dinamik dan analisis fungsi pemprosesan permintaan tak segerak untuk aplikasi koleksi pelayar tanpa kepala

Mendedahkan prinsip kemas kini hangat di Golang: penjelasan orang dalam tentang pemuatan dinamik dan pemuatan semula Mendedahkan prinsip kemas kini hangat di Golang: penjelasan orang dalam tentang pemuatan dinamik dan pemuatan semula Jan 20, 2024 am 10:09 AM

Mendedahkan prinsip kemas kini hangat di Golang: penjelasan orang dalam tentang pemuatan dinamik dan pemuatan semula

Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI Jul 21, 2023 pm 11:49 PM

Cara membuat jadual yang memuatkan data secara dinamik menggunakan Vue dan Element-UI

Selesaikan ralat Vue: Tidak dapat menggunakan Penghala Vue dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan Selesaikan ralat Vue: Tidak dapat menggunakan Penghala Vue dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan Aug 20, 2023 am 08:09 AM

Selesaikan ralat Vue: Tidak dapat menggunakan Penghala Vue dengan betul untuk memuatkan komponen secara dinamik berdasarkan parameter penghalaan

Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web? Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web? Jul 22, 2023 am 08:33 AM

Petua praktikal phpSpider: Bagaimana untuk menangani pemuatan dinamik kandungan web?

Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C# Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C# Oct 08, 2023 pm 12:12 PM

Cara menggunakan pantulan dan memuatkan himpunan secara dinamik dalam C#

Cara menggunakan fungsi ClassLoader untuk pemuatan kelas dinamik dalam Java Cara menggunakan fungsi ClassLoader untuk pemuatan kelas dinamik dalam Java Jun 26, 2023 pm 02:10 PM

Cara menggunakan fungsi ClassLoader untuk pemuatan kelas dinamik dalam Java

See all articles