之前在做项目的时候遇到在不同浏览器中运行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片段当做单独的一个脚本块,在宿主脚本执行之后接着执行。