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

刺骨的言语ヽ痛彻心扉 2023-07-08 02:35 29阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70 1]

<!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>
    	
    	
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200224141434381.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020022414145013.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA==,size_16,color_FFFFFF,t_70