之前在做項目的時候遇到在不同瀏覽器中運行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片段當做單獨的一個腳本塊,在宿主腳本執行之後接着執行。