日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程语言 > java >内容正文

java

Javascript在页面加载时的执行顺序(转载）

發布時間：2023/12/9 java 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Javascript在页面加载时的执行顺序(转载） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文：http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/

一、在HTML中嵌入Javasript的方法

  • 直接在Javascript代碼放在標記對<script>和</script>之間
  • 由<script />標記的src屬性制定外部的js文件
  • 放在事件處理程序中，比如：<p onclick="alert('我是由onclick事件執行的Javascript')">點擊我</p>
  • 作為URL的主體，這個URL使用特殊的Javascript：協議，比如：<a href="javascript:alert('我是由javascript:協議執行的javascript')">點擊我</a>
  • 利用javascript本身的document.write()方法寫入新的javascript代碼
  • 利用Ajax異步獲取javascript代碼，然后執行

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

    二、Javascript在頁面的執行順序

  • 頁面上的Javascript代碼是HTML文檔的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記<script />的出現順序， <script />標記里面的或者通過src引入的外部JS，都是按照其語句出現的順序執行，而且執行過程是文檔裝載的一部分。
  • 每個腳本定義的全局變量和函數，都可以被后面執行的腳本所調用。
  • 變量的調用，必須是前面已經聲明，否則獲取的變量值是undefined。 <script type="text/javscrpt">//<![CDATA[ alert(tmp); //輸出 undefined var tmp = 1; alert(tmp); //輸出 1 //]]></script>
  • 同一段腳本，函數定義可以出現在函數調用的后面，但是如果是分別在兩段代碼，且函數調用在第一段代碼中，則會報函數未定義錯誤。 <script type="text/javscrpt">//<![CDATA[ aa(); //瀏覽器報錯 //]]></script> <script type="text/javscrpt">//<![CDATA[ aa(); //輸出 1 function aa(){alert(1);} //]]></script>
  • 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在頁面的執行順序

  • 利用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); ... }
  • IE中可以利用defer，defer作用是把代碼加載下來，并不立即執行，等文檔裝載完畢之后再執行，有點類似window.onload，但是沒有window.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

    當HTML解析器遇到一個腳本，它必須按常規終止對文檔的 解析并等待腳本執行。為了解決這個問題HTML4標準定義了defer。通過defer來提示瀏覽器可以繼續解析HTML文檔，并延遲執行腳本。這種延遲 在腳本從外部文件載入時非常有用，讓瀏覽器不必等待外部文件全部載入之后才繼續執行，能有效的提高性能。IE是目前唯一支持defer屬性的瀏覽器，但 IE并沒有正確的實現了defer屬性，因為延遲的腳本總是被延遲，直到文檔結束，而不是只延遲到下一個非延遲的腳本。這意味著，IE中延遲的腳本的執行 順序相當混亂，并且不能定義任何后面非延遲腳本并須的函數和變量。在IE中所有的defer的腳本執行時間應該都是HTML文檔樹建立以 后，window.onload之前。
  • 利用Ajax。
    因為xmlhttpRequest能判斷外部文檔加載的狀態，所以能夠改變代碼的加載順序。

    • 總結

    以上是生活随笔為你收集整理的Javascript在页面加载时的执行顺序(转载）的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。