JS中文档的加载顺序

燕穗子博客

已于 2022-06-09 22:08:13 修改

阅读量804

点赞数 2

分类专栏： JavaScript

于 2022-04-25 14:11:03 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124403829

版权

页面加载 JS执行时机 DOM对象 onload事件性能优化

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

68 篇文章 14 订阅

订阅专栏

浏览器在加载页面的时候，是按照从上往下的顺序加载的，读取到一行就运行一行，如果将JS代码写到head部分，那么在代码执行时，页面还没有加载，DOM对象也就没有加载，会导致我们无法获取到DOM对象。

将JS代码写到页面的下面，就是为了让其在页面加载完毕以后在执行，确保DOM对象的获取顺利

JS代码写在head部分上面会影响到页面加载的性能，加载页面的时候会先加载，但是没有获取DOM对象，无法执行。写在body的部分就能使其后加载后执行，不会影响页面的加载性能。但是写在head部分方便管理

onload事件会在整个页面加载完成以后才会触发，给window绑定一个onload事件，该时间对应的响应函数，将会在页面加载之后再执行，这样可以确保代码执行时，所有的DOM对象都已经加载完毕了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">		
			/*
			  onload事件会在整个页面加载完成之后才触发
			  为window绑定一个onload事件
			  		该事件对应的响应函数将会在页面加载完成之后执行，
			  		这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			  	
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			
			/*
			 * 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>-->
		
	</body>
</html>