Javascript在網頁頁面載入時的執行順序

來源:互聯網
上載者:User
javascript|載入|網頁|頁面|執行

一、在HTML中嵌入Javasript的方法

  1. 直接在Javascript代碼放在標記對<script>和</script>之間
  2. 由<script />標記的src屬性制定外部的js檔案
  3. 放在事件處理常式中,比如:<p >點擊我</p>
  4. 作為URL的主體,這個URL使用特殊的Javascript:協議,比如:<a href="javascript:alert('我是由javascript:協議執行的javascript')">點擊我</a>
  5. 利用javascript本身的document.write()方法寫入新的javascript代碼
  6. 利用Ajax非同步擷取javascript代碼,然後執行

第3種和第4種方法寫入的Javascript需要觸發才能執行,所以除非特別設定,否則頁面載入時不會執行。

二、Javascript在頁面的執行順序

  1. 頁面上的Javascript代碼是HTML文檔的一部分,所以Javascript在頁面裝載時執行的順序就是其引入標記<script />的出現順序, <script />標記裡面的或者通過src引入的外部JS,都是按照其語句出現的順序執行,而且執行過程是文檔裝載的一部分。
  2. 每個指令碼定義的全域變數和函數,都可以被後面執行的指令碼所調用。
  3. 變數的調用,必須是前面已經聲明,否則擷取的變數值是undefined。
    <script type="text/javscrpt">//<![CDATA[alert(tmp);  //輸出 undefinedvar tmp = 1;alert(tmp);  //輸出 1//]]></script>
  4. 同一段指令碼,函數定義可以出現在函數調用的後面,但是如果是分別在兩段代碼,且函數調用在第一段代碼中,則會報函數未定義錯誤。
    <script type="text/javscrpt">//<![CDATA[aa();            //瀏覽器報錯//]]></script><script type="text/javscrpt">//<![CDATA[aa();//輸出 1 function aa(){alert(1);}//]]></script>
  5. document.write()會把輸出寫入到指令碼文檔所在的位置,瀏覽器解析完documemt.write()所在文檔內容後,繼續解析document.write()輸出的內容,然後在繼續解析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的內容是:

    var tmpStr = 1;    alert(tmpStr);
    • 在Firefox和Opera中的彈出值的順序是:1、2、我是1、3
    • 在IE中彈出值的順序是:2、1、3,同時瀏覽器報錯:tmpStr未定義

    原因可能是IE在document.write時,並未等待載入SRC中的Javascript代碼完畢後,才執行下一行,所以導致2先彈出,並且執行到document.write(’document.write("我是" + tmpStr)’)調用tmpStr時,tmpStr並未定義,從而報錯。

    解決這個問題,可以利用HTML解析是解析完一個HTML標籤,再執行下一個的原理,把代碼拆分來實現:

    <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在頁面的執行順序

  1. 利用onload
    <script type="text/javascript">//<![CDATA[window.onload = f;function f(){alert(1);}alert(2);//]]></script>

    輸出值順序是 2、1。

    需要注意的是,如果存在多個winodws.onload的話,只有最有一個生效,解決這個辦法是:

    window.onload = function(){f();f1();f2();.....}

    利用2級DOM事件類型

    if(document.addEventListener){window.addEventListener('load',f,false);window.addEventListener('load',f1,false);...}else{window.attachEvent('onload',f);window.attachEvent('onload',f1);...}
  2. IE中可以利用deferdefer作用是把代碼載入下來,並不立即執行,等文檔裝載完畢之後再執行,有點類似onload,但是沒有onload那樣的局限性,可以重複使用,但是只在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就不報錯了,輸出值的順序變成:1、3、2、我是1

  3. 利用Ajax。
    因為xmlhttpRequest能判斷外部文檔載入的狀態,所以能夠改變代碼的載入順序。


相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。