js时间线_1、时间线的第一步: 中间这句话忽略。这个阶段document.readystate的状态是lo-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52378257/article/details/119153301

js时间线

创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState 为loading。
遇到link外部css，创建线程加载，并继续解析文档。并发加载
遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。（js拥有修改dom的能力）
遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。（defer属性等于是把脚本丟置到尾部）
遇到img等，浏览器会创建线程加载，并继续解析文档。并发加载
当文档解析完成时，document.readyState 为interactive。
文档解析完成后，所有设置有defer的脚本会按照顺序执行。
document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState 为 complete，window对象触发load事件。
此后，以异步响应方式处理用户输入、网络事件等。

script标签放在head中的问题

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/06.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

	var idDom = document.getElementById('container')
	console.log(idDom) // null

输出的为null，因为此时dom树并没有绘制完成，主线程碰到script标签会停下自己去加载，直到script标签里的脚本加载执行完成后在继续解析文档。

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/06.js"></script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

	document.addEventListener('DOMContentLoaded',() => {
	    var idDom = document.getElementById('container')
	    console.log(idDom) //<div id="container"></div>
	})
	window.onload  = () => {
	    var idDom = document.getElementById('container')
	    console.log(idDom)//<div id="container"></div>
	}