html解析过程与readyState

浏览器解析HTML是以从上到下，深度优先的顺序进行解析的
解析阶段：浏览器从上到下解析HTML，当浏览器解析完HTML时，会将readyState变更为interactive，触发DOMContentLoaded事件，开始进行渲染
渲染阶段：浏览器会等待css全部加载完毕，根据解析的DOM树与css进行渲染，当浏览器渲染完成，并且使用资源加载完成时，会将readyState变更为complete，触发onload事件

1.解析过程中若遇到link标签引入外部css，浏览器就会创建一个新线程加载外部资源，并继续解析HTML
该过程不会阻塞HTML的解析，但是会阻塞HTML的渲染，因为浏览器的渲染需要CSS的解析结果

2.解析过程中若遇到script标签
（1）script不是外部引入，且在link引入外部样式之前：解析到该标签时直接同步执行js代码，执行完再解析后面的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			console.log('DOMContentLoaded')
		})

		document.onreadystatechange = () => {
			console.log(document.readyState)
		}
	</script>
	<script type="text/javascript">
		console.log('1')
	</script>
	<script type="text/javascript">
		console.log('2')
	</script>
	<link rel="stylesheet" type="text/css" href="http://192.168.12.121/m.css">
</head>
<body>
	<div>1</div>
</body>
</html>

打印结果

（2）script不是外部引入，且在link引入外部样式之后：等待link标签加载完毕，并阻塞后面的HTML解析

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			console.log('DOMContentLoaded')
		})

		document.onreadystatechange = () => {
			console.log(document.readyState)
		}
	</script>
	<script type="text/javascript">
		console.log('1')
	</script>
	
	<link rel="stylesheet" type="text/css" href="http://192.168.12.121/m.css">
	<script type="text/javascript">
		console.log('2')
	</script>
</head>
<body>
	<div>1</div>
</body>
</html>

打印结果

（3）script为外部同步引入，且在link引入外部样式之前：等待该js文件加载，并阻塞后面的HTML解析，执行完该js后再继续解析

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			console.log('DOMContentLoaded')
		})

		document.onreadystatechange = () => {
			console.log(document.readyState)
		}
	</script>
	<script src="http://192.168.12.121/m.js"></script>
	<script type="text/javascript">
		console.log('1')
	</script>
	<script type="text/javascript">
		console.log('2')
	</script>
	<link rel="stylesheet" type="text/css" href="http://192.168.12.121/m.css">
</head>
<body>
	<div>1</div>
</body>
</html>

打印结果

（4）script为外部同步引入，且在link引入外部样式之后：等待link标签、该js文件加载，并阻塞后面的HTML解析，执行完该JS后再继续解析

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			console.log('DOMContentLoaded')
		})

		document.onreadystatechange = () => {
			console.log(document.readyState)
		}
	</script>
	<script type="text/javascript">
		console.log('1')
	</script>
	<link rel="stylesheet" type="text/css" href="http://192.168.12.121/m.css">
	<script src="./demo.js"></script>
</head>
<body>
	<div>1</div>
</body>
</html>

打印结果

（5）script为外部异步引入：创建线程异步加载js，不会阻塞后面HTML的解析

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', () => {
			console.log('DOMContentLoaded')
		})

		document.onreadystatechange = () => {
			console.log(document.readyState)
		}
	</script>
	<script src="http://192.168.12.121/m1.js" async></script>
	<script type="text/javascript">
		console.log('1')
	</script>
	<link rel="stylesheet" type="text/css" href="http://192.168.12.121/m.css">
	<script src="http://192.168.12.121/m2.js" async></script>
</head>
<body>
	<div>1</div>
</body>
</html>