题解JS时间线与异步加载，隐式转化

最新推荐文章于 2024-08-24 03:26:06 发布

原创最新推荐文章于 2024-08-24 03:26:06 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析JavaScript的执行流程，重点讲解JS时间线机制，包括同步与异步操作的执行顺序，以及宏任务与微任务的区别。通过具体代码示例，详细解释了文档解析过程、事件循环机制和DOMContentLoaded事件触发时机。

原题：

<body>
		<p>1</p>
		<script>document.write(2)</script>
		<p>3</p>
		<script>
			window.onload = function(){
	            document.write(5);

	            
	            setTimeout(function(){
	                document.write(9);
	            }, 1000);
        	};
        	
			setTimeout(function(){
			    document.write(8);	
			}, 1000);

			setTimeout(function(){
			    document.write(6);
				setTimeout(function(){
				    document.write(7);
				}, 0);
			}, 0);
			console.time();
			for(let i = 0; i < 1000; i++){}
			console.timeEnd();
			document.write(4);
		</script>
	</body>

这里先公布答案吧~
在这里插入图片描述

有没有想到呢？

来看看解析吧~

解析：

首先我们需要了解JS 时间线.对于时间线的理解，前文我有做过一片解析。（JS 时间线理解.传送门：）
JavaScript引擎解析代码时的流程，所涉及的专有名词、标签仅仅是一个个机制，不涉及思想层面。了解名词、标签的目的在于理解通过这些机制所产生的逻辑思维。
当程序开始执行的时候。流程图如下所示：
文档由上而下逐行执行，遇到setTimeout将其挂起，在宏任务中，等待文档加载完毕后在执行宏任务中挂起的任务。
在这里插入图片描述

step1:

.同步执行:输出123，故有重绘!二段脚本执行按同步操作依次挂起onload、setTime、DOMC，readyState: loading, 逐行同步解析完，主程序闲置，readyState: interactive (文档解析完成)。

step2：

执行异步操作:首先js引擎一个机制EventLoop时间循环机制，当主线程闲置就去EventQueue中找异步代码，推去主栈执行，依次循环。

step3：

DOMContentL oaded:根据时间线文档解析结束触发DOMC事件。

step4:

onLoad:时间线aysnc及img加载完，readyState: complete,即触发onl oad事件。打印5，再挂起setTime。

step5：

setTimeout:按照顺序异步执行…此时。宏任务中的任务被提到主栈中进行执行。流程图如下：
在这里插入图片描述

step6:

因为：

		<p>1</p>
		<script>document.write(2)</script>
		<p>3</p>

以上在程序执行时，同步执行:输出123，故有重绘!所以输出的至会被覆盖。
任务: macro task、micro task ,事件及定时器均在宏任务中，promise async/await 在微任务中。

step7:

顺序:解析引擎机制下先执行同步操作，文档解析完，先解决微任务，完了再解析宏任务。

总结~

引擎解析流程均是逻辑推理的过程，处理解析流程核心，要求的是逻辑分析需要环环相扣，不可模棱两可!后续的异步学习远比这些复杂，这些是基础，在后续复杂学习中，需要继续保持细致分析，自我批判，不断答疑解惑。