HTML與Javascript在瀏覽器中的加載順序

之前在做項目的時候遇到在不同瀏覽器中運行Javascript腳本出現不同結果的問題。雖然最後解決了(解決方法請參照之前的文章),但對瀏覽器中如何對HTML和Javascript進行加載還是一知半解,在此進行相關總結。

HTML是按照從上到下的順序邊加載邊解析,邊生成DOM對象,同時對於HTML中嵌入的一些語句,如:

document.write("xxxx");

<script type="text/javascript" src="aaa.js"></script>

html會停止解析,並執行這些生成語句,如果中間插入外部鏈接,就轉而解析、執行外部鏈接對應的js文件。同時對於J外鏈的Javascript文件語句,在不同的瀏覽器中存在不同的問題:

<script type="text/javascript" src="aaa.js"></script>

在IE中,瀏覽器不會等待aaa.js下載並解析完,而是會創建另一個線程來執行它,而主線程則越過去繼續執行。

在Firefox中,瀏覽器則會等待,知道aaa.js下載、解析、執行完畢。

下面來分析一個典型的實例,從而來分辨各個瀏覽器執行js文件的順序:

1.js:
    alert("1.1");
3.js:
    alert("3.1");
test.html:
    <html>
        <head>        
            <script>
                document.write("<scr"+"ipt>alert(4.1);</scr"+"ipt>");
                alert(2.1);
                document.write("<scr"+"ipt>alert(4.2);</scr"+"ipt>");
                document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
                document.write("<scr"+"ipt>alert(4.3);</scr"+"ipt>");
                alert(2.2);
            </script>
            <script src="1.js"></script>
        </head>
        <body>
        </body>
    </html>

執行結果:

IE瀏覽器中:    4.1--2.1--4.2--4.3--2.2--3.1--1.1

Firefox瀏覽器的執行順序:4.1--2.1--4.2--2.2--3.1--4.3--1.1

Opera瀏覽器的執行順序: 4.1--2.1--4.2--3.1--4.3--2.2--1.1

IE瀏覽器把在js中引入的js文件——document.write("<scr"+"ipt src='my.js'></src"+"ipt>"),放在當前腳本單元之後接着執行。把同樣在js中引入的js片段——document.write("<src"+"ipt>alert(1)</src"+"ipt>"), 當做宿主腳本單元的一部分,在內部其引入的位置執行;

Opera瀏覽器把js中引入的js文件和js中引入的js片段當做宿主腳本單元的一部分,在內部其引入的位置執行。

Firefox瀏覽器把js中引入的js文件放在當前腳本單元之後接着執行,在宿主引入js中引入的js文件之前,把js中引入的js片段當做宿主腳本單元的一部分,在內部其引入的位置執行。在宿主引入js中引入的js文件之後,把js中引入的js片段當做單獨的一個腳本塊,在宿主腳本執行之後接着執行。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章