JavaScript思维导图——Day 18(json异步加载，Web加载时间线)

本文链接：https://blog.csdn.net/weixin_45174208/article/details/104476997

本文探讨了HTML文档对象模型(DOM)的加载过程，JavaScript的异步执行机制，以及如何利用DOMContentLoaded事件确保DOM完全加载后再执行JavaScript代码。文章还深入讲解了不同浏览器下JavaScript异步加载的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
	<title></title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded' , function () {
			var div = document.getElementsByTagName('div')[0];
			console.log(div); //dom 解析完
		},false);
	</script>
</head>

<body>
	<div style="width: 100px;height: 100px;background-color: red"></div>
	<script type="text/javascript">
		//ie9以下可以用
		//异步加载JavaScript
		//和html 和 css异步下载同时下载
		// var obj = {
		// 	"name" : "abc",
		// 	"age" : 123
		// }
		// var str = JSON.stringify(obj);
		// var obj1 = JSON.parse(str);

		// var script = document.createElement('script');
		// script.type = "text/javascript";
		// script.src = "tool.js"

		//兼容性非常好IE里面就script没有load
		// IE状态码
		// script.readyState = "loaded"
		// if (script.readyState) {
		// 	script.onreadystatechange = function () {
		// 		if (script.readyState == "complete" || script.readyState == "loaded") {
		// 			test();
		// 		}
		// 	}
		// } else {
		// 	script.onload = function () {
		// 		test();
		// 	}
		// }

		// document.head.appendChild(script);

		// setTimeout(() => {
		// 	test();//延迟才能执行
		// }, 1000);
		// function loadScript(url, callback) {
		// 	var script = document.createElement('script');
		// 	script.type = "text/javascript";
		// 	if (script.readyState) {
		// 		script.onreadystatechange = function () {
		// 			if (script.readyState == "complete" || script.readyState == "loaded") {
		// 				callback();
		// 			}
		// 		}
		// 	} else {
		// 		script.onload = function () {
		// 			callback();
		// 		}
		// 	}
		// 	script.src = url;
		// 	document.head.appendChild(script);
		// }

		// loadScript('tool.js', function () {
		// 	test();
		// });//为了跳过预编译直接执行

		// window.onload = function () {
		// 	document.write('a');
		// } // 消除文档流
		document.onreadystatechange = function () {
			console.log(document.readyState);
		}//dom对象刚建立

		console.log(document.readyState);
		//loading dom 树未建立完成
		window.onload = function () {
			console.log(document.readyState);
		}//domTree 建立完成
		document.addEventListener('DOMContentLoaded' , function () {
			console.log('a');
		},false);

		

	</script>
	<!--  domTree + cssTree = randerTree
		避免重排 reflow
	reflow 重排 dom 节点的增删
	       dom节点的宽高变化，位置变化，display noon -> block 
	       offsetWidth offsetLeft(因为实时 改变ramderTree) -->
	<!-- repaint 重绘 改东西 可以接受 例如颜色啊什么的 -->
</body>

</html>