首页 > web前端 > js教程 > 正文

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

WBOY
发布: 2016-05-16 17:16:48
原创
845 人浏览过

传统上,加载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>

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板