js加载之使用DOM方法动态加载Javascript文件_javascript技巧
May 16, 2016 pm 05:16 PM传统上,加载Javascript文件都是使用<script>标签。 <BR>就像下面这样: <BR><script type="text/javascript" src="example.js"></script>
<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>

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment gérer le chargement et la commutation dynamiques des composants dans Vue

Python implémente le chargement dynamique des pages et l'analyse des fonctions de traitement des requêtes asynchrones pour les applications de collecte de navigateurs sans tête

Révéler le principe de la mise à jour à chaud dans Golang : explication privilégiée du chargement et du rechargement dynamiques

Comment créer une table qui charge dynamiquement des données à l'aide de Vue et Element-UI

Résoudre l'erreur Vue : impossible d'utiliser correctement Vue Router pour charger dynamiquement des composants en fonction des paramètres de routage

Conseils pratiques de phpSpider : Comment gérer le chargement dynamique du contenu web ?

Comment utiliser la réflexion et charger dynamiquement des assemblys en C#

Comment utiliser la fonction ClassLoader pour le chargement dynamique de classes en Java
