JavaScript执行顺序的小测试

最新推荐文章于 2018-01-11 17:09:22 发布

最新推荐文章于 2018-01-11 17:09:22 发布 · 160 阅读

标签

#JavaScript #jQuery #Windows #浏览器 #HTML

#ViewUI

收录于

本文通过一个简单的HTML示例，详细解析了网页加载过程中不同脚本的执行顺序，包括<head>和<body>标签内的脚本、jQuery及window.onload的触发时机。

<html>
  <head>
    <title>test.html</title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" >
	window.onload=function(){
		alert("5");
	}
	$(function(){
		alert("3");
	});
	alert("1");
	</script>
  </head>
  <body>
  <script type="text/javascript" >
	window.onload=function(){
		alert("6");
	}
	$(function(){
		alert("4");
	});
	alert("2");
  </script>
  </body>
</html>

小测试了一下，依次弹出1，2，3，4，6。

说明执行顺序为

1.<head>

2.<body>

3.<head>中jquery的$(function(){});

4.<body>中jquery的$(function(){});

5.<body>中windows.onload=function(){};

其中

1,2 在页面控件页面元素加载前执行，

3，4 在页面DOM完全就绪时（此时所有元素可以访问，但元素关联的文件不一定都下载完毕）执行，可按顺序执行多个，

5 在网页中所有元素（包括元素的所有关联文件）完全加载到浏览器后执行，且只执行最后一个。