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>