麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

Javascript代碼在頁面加載時的執行順序介紹

2019-11-20 22:45:18
字體:
來源:轉載
供稿:網友

一、在HTML中嵌入Javasript的方法
1.直接在Javascript代碼放在標記對<script>和</script>之間
2.由<script />標記的src屬性制定外部的js文件
3.放在事件處理程序中,比如:<p onclick="alert('我是由onclick事件執行的Javascript')">點擊我</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);  //輸出 undefined
var 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中可以利用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之前。

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 久久综合九色综合久久久精品综合 | 在线免费亚洲 | 校花被肉干高h潮不断 | 视频一区国产精品 | 天天夜碰日日摸日日澡性色av | 亚洲成人夜色 | 欧美一级做性受免费大片免费 | 国产精品刺激对白麻豆99 | 黄色午夜剧场 | 黄色aaa视频 | 在线观看福利网站 | 一级做a爱片毛片免费 | 精品一区二区三区在线观看视频 | 久久精品视频网址 | 日本黄色免费播放 | 久久国产秒 | 九色在线78m | 91成人免费看片 | 成人一区二区在线观看视频 | 毛片视频网站 | 亚洲第一成人久久网站 | 国内精品伊人久久 | 叉逼视频| 91一区二区三区久久久久国产乱 | 黄色免费在线网站 | 一级色毛片 | 亚洲成人午夜精品 | 成人福利软件 | 91社区电影 | 99精品视频久久精品视频 | 黄视频网站免费在线观看 | 欧美成人免费 | 免费a级毛片永久免费 | 鲁丝一区二区三区不属 | 国产做爰 | 孕妇体内谢精满日本电影 | 精品国产96亚洲一区二区三区 | 国产黄网 | 日韩精品中文字幕在线播放 | 一级网站 | 久久久婷婷一区二区三区不卡 |