生活随笔
收集整理的這篇文章主要介紹了
Javascript在页面加载时的执行顺序
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、在HTML中嵌入Javasript的方法
直接在Javascript代碼放在標(biāo)記對(duì)<script>和</script>之間由<script />標(biāo)記的src屬性制定外部的js文件放在事件處理程序中，比如：<p onclick="alert('我是由onclick事件執(zhí)行的Javascript')">點(diǎn)擊我</p>作為URL的主體，這個(gè)URL使用特殊的Javascript：協(xié)議，比如：<a href="javascript:alert('我是由javascript:協(xié)議執(zhí)行的javascript')">點(diǎn)擊我</a>利用javascript本身的document.write()方法寫(xiě)入新的javascript代碼利用Ajax異步獲取javascript代碼，然后執(zhí)行
第3種和第4種方法寫(xiě)入的Javascript需要觸發(fā)才能執(zhí)行，所以除非特別設(shè)置，否則頁(yè)面加載時(shí)不會(huì)執(zhí)行。
二、Javascript在頁(yè)面的執(zhí)行順序
頁(yè)面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁(yè)面裝載時(shí)執(zhí)行的順序就是其引入標(biāo)記<script />的出現(xiàn)順序， <script />標(biāo)記里面的或者通過(guò)src引入的外部JS，都是按照其語(yǔ)句出現(xiàn)的順序執(zhí)行，而且執(zhí)行過(guò)程是文檔裝載的一部分。每個(gè)腳本定義的全局變量和函數(shù)，都可以被后面執(zhí)行的腳本所調(diào)用。變量的調(diào)用，必須是前面已經(jīng)聲明，否則獲取的變量值是undefined。 <script type="text/javscrpt">//<![CDATA[
alert(tmp); //輸出 undefined
var tmp = 1;
alert(tmp); //輸出 1
//]]></script>同一段腳本，函數(shù)定義可以出現(xiàn)在函數(shù)調(diào)用的后面，但是如果是分別在兩段代碼，且函數(shù)調(diào)用在第一段代碼中，則會(huì)報(bào)函數(shù)未定義錯(cuò)誤。 <script type="text/javscrpt">//<![CDATA[
aa(); //瀏覽器報(bào)錯(cuò)
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //輸出 1
function aa(){alert(1);}
//]]></script>document.write()會(huì)把輸出寫(xiě)入到腳本文檔所在的位置，瀏覽器解析完documemt.write()所在文檔內(nèi)容后，繼續(xù)解析document.write()輸出的內(nèi)容，然后在繼續(xù)解析HTML文檔。 <script type="text/javascript">//<![CDATA[document.write('<script type="text/javascript" src="test.js"><\/script>');document.write('<script type="text/javascript">');document.write('alert(2);')document.write('alert("我是" + tmpStr);');document.write('<\/script>');//]]></script><script type="text/javascript">//<![CDATA[alert(3);//]]></script> test.js的內(nèi)容是：
var tmpStr = 1;alert(tmpStr); - 在Firefox和Opera中的彈出值的順序是：1、2、我是1、3
- 在IE中彈出值的順序是：2、1、3，同時(shí)瀏覽器報(bào)錯(cuò)：tmpStr未定義
原因可能是IE在document.write時(shí)，并未等待加載SRC中的Javascript代碼完畢后，才執(zhí)行下一行，所以導(dǎo)致2先彈出，并且執(zhí)行到document.write(’document.write("我是" + tmpStr)’)調(diào)用tmpStr時(shí)，tmpStr并未定義，從而報(bào)錯(cuò)。
解決這個(gè)問(wèn)題，可以利用HTML解析是解析完一個(gè)HTML標(biāo)簽，再執(zhí)行下一個(gè)的原理，把代碼拆分來(lái)實(shí)現(xiàn)：
<script type="text/javascript">//<![CDATA[document.write('<script type="text/javascript" src="test.js"><\/script>');//]]></script><script type="text/javascript">//<![CDATA[document.write('<script type="text/javascript">');document.write('alert(2);')document.write('alert("我是" + tmpStr);');document.write('<\/script>');//]]></script><script type="text/javascript">//<![CDATA[alert(3);//]]></script> 這樣IE下和其他瀏覽器輸出值的順序都是一直的了：1、2、我是1、3。
三、如何改變Javascript在頁(yè)面的執(zhí)行順序
利用onload <script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script> 輸出值順序是 2、1。
需要注意的是，如果存在多個(gè)winodws.onload的話，只有最有一個(gè)生效，解決這個(gè)辦法是：
window.onload = function(){f();f1();f2();.....} 利用2級(jí)DOM事件類(lèi)型
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}IE中可以利用defer，defer作用是把代碼加載下來(lái)，并不立即執(zhí)行，等文檔裝載完畢之后再執(zhí)行，有點(diǎn)類(lèi)似window.onload，但是沒(méi)有window.onload那樣的局限性，可以重復(fù)使用，但是只在IE中有效，所以上面的例子可以修改成為 <script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script> 這樣IE就不報(bào)錯(cuò)了，輸出值的順序變成：1、3、2、我是1
當(dāng)HTML解析器遇到一個(gè)腳本，它必須按常規(guī)終止對(duì)文檔的解析并等待腳本執(zhí)行。為了解決這個(gè)問(wèn)題HTML4標(biāo)準(zhǔn)定義了defer。通過(guò)defer來(lái)提示瀏覽器可以繼續(xù)解析HTML文檔，并延遲執(zhí)行腳本。這種延遲在腳本從外部文件載入時(shí)非常有用，讓瀏覽器不必等待外部文件全部載入之后才繼續(xù)執(zhí)行，能有效的提高性能。IE是目前唯一支持defer屬性的瀏覽器，但I(xiàn)E并沒(méi)有正確的實(shí)現(xiàn)了defer屬性，因?yàn)檠舆t的腳本總是被延遲，直到文檔結(jié)束，而不是只延遲到下一個(gè)非延遲的腳本。這意味著，IE中延遲的腳本的執(zhí)行順序相當(dāng)混亂，并且不能定義任何后面非延遲腳本并須的函數(shù)和變量。在IE中所有的defer的腳本執(zhí)行時(shí)間應(yīng)該都是HTML文檔樹(shù)建立以后，window.onload之前。
利用Ajax。
因?yàn)閤mlhttpRequest能判斷外部文檔加載的狀態(tài)，所以能夠改變代碼的加載順序。
總結(jié)
以上是生活随笔為你收集整理的Javascript在页面加载时的执行顺序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
