JS引入方式及性能

JS引入方式

1.在页面中直接写入

<script type="text/javascript">js代码</script>

2.在页面中引入外部文件

<script src="xx.js"></script>

3.在js中引入外部js，通过

document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">

4.在js中引用其他js片段，

document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")

5.通过DOM添加：

var scr=document.createElement("script"); scr.src="xxx.js";

//注意:
在js中引入外部js，通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。此时：<script></script>被拆解为"<scr"+"ipt .....</scr"+"ipt">，如果不这样拆解，浏览器可能会把父级js片段关闭掉，从而导致出错。

性能问题

五种引用脚本的方式：

1.惯例的做法

head标签内插入<script>标签—阻塞方式

2.经典的做法

<script>标签放到所有页面内容之后,尽量避免对页面其余部分下载的影响

然在IE8+浏览器上已经实现了脚本并行下载，但在某些浏览器中（即使脚本文件放到了标签底部），页面中脚本仍是一个接着一个加载的。

3.动态脚本

通过文档对象模型（DOM),–无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程（包括脚本加载）

缺点:加载的脚本会在下载完成后立即执行，那么意味着多个脚本之间的运行顺序是无法保证的（除了Firefox和Opera）。当某个脚本对另一个脚本有依赖关系时，就很可能发生错误了。比如，写一个jQuery代码，需要引入jQuery库，然而你写的jQuery代码文件很可能会先完成下载并立即执行，这时浏览器会报错——‘jQuery未定义’之类的，因为此时jQuery库还未下载完成。于是做出以下改进：

function loadScript(url,callback){

var script=document.createElement(‘script’);

script.type=”text/javaScript”;

if(script.readyState){//IE

 script.onreadystatechange=function(){ 

if(script.readyState==”loaded”||script.readyState==”complete”){ 

script.onreadystatechange=null; callback(); } };

}else{//其他浏览器

script.onload=function(){ callback(); }; } script.src=url; 

document.getElementsByTagName(‘head’)[0].appendChild(script);
}

上述代码改进的地方就是增加了一个回调函数，该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了，写法如下（假设file2依赖file1，file1和file3相互独立）：

loadScript(‘file1.js’,function(){ loadScript(‘file2.js’,function(){}); });

loadScript(‘file3.js’,function(){}); 

file2会在file1加载完后才开始加载，保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的，互不影响。 虽然loadScript函数已经足够好，但还是有些不尽人意的地方——通过分析这段代码，我们知道，loadScript函数中的顺序加载是以脚本的阻塞加载来实现的(正如上述红字部分指出的那样)。而我们真正想实现的是——脚本同步下载并按相应顺序执行，即并行加载并顺序执行。

4.LABjs

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>

5.requireJS

<script src="require.js"></script>
　　<script type="text/javaScript">
　　　　require([
　　　　　　"script1.js",
　　　　　　"script2-a.js",
　　　　　　"script2-b.js",
　　　　　　"script3.js"
　　　　　],
　　　　　function(){
　　　　　　initScript1();
　　　　　　initScript2();
　　　　　　initScript3();
　　　　　}
　　　　);
　　</script>