传统上,加载Javascript文件都是使用<script>标签。
就像下面这样:
<script type="text/javascript" src="example.js"></script>
<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。
(1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。
(2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。
为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。
function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); }
这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。
查看本栏目更多精彩内容:http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/
外部函数库LABjs和RequireJS,可以帮助我们更有效地管理Javascript加载。
下面根据ScriptJunkie的文章,举一个最简单的例子,来说明这两个函数库的基本用法。更高级的用法,请参阅它们的文档。
<script src="script1.js"></script> <script src="script2-a.js"></script> <script src="script2-b.js"></script> <script type="text/javascript"> initScript1(); initScript2(); </script> <script src="script3.js"></script> <script type="text/javascript"> initScript3(); </script>
上面这段代码,将依次加载4个javascript文件:script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后,运行两个函数initScript1()和initScript2();加载完第四个文件后,再运行函数initScript3()。
下面,用LABjs对其进行改写:
<script src="LAB.js"></script> <script type="text/javascript"> $LAB .script("script1.js").wait() .script("script2-a.js") .script("script2-b.js") .wait(function(){ initScript1(); initScript2(); }) .script("script3.js") .wait(function(){ initScript3(); }); </script>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 文件
, 函数
, 浏览器
, requirejs
, script
, 运行
, requirejs实现原理
, script标签
, requirejs多页面
, 加载读取
, javascript加载js
, javascript加载文件
javascript文件加载
,以便于您获取更多的相关知识。