一：浏览器运行页面的生命周期
第一步：在浏览器输入URL（或单击链接）
第二步：浏览器生成请求并发送给服务器
第三步：服务器执行某些动作或者获取某些资源：将相应发送回客户端
第四步：浏览器处理HTML和CSS以及JavaScript并构建页面
第五步：监控事件队列，一次处理其中的一个事件
第六步：用户与页面元素交互
第七步：关闭Web页面，应用生命周期结束
二：事件相应demo
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#first {
color: green;
}
#second {
color: red;
}
</style>
</head>
<body>
<ul id="first"></ul>
<script>
function addMessage(element, message) {
var messageElement = document.createElement("li");
messageElement.textContent = message;
element.append(messageElement);
}
var first = document.getElementById("first");
addMessage(first, "Page loading");
</script>
<ul id="second"></ul>
<script>
document.body.addEventListener("mousemove", function () {
var second = document.getElementById("second");
addMessage(second, "Event:mousemove");
});
document.body.addEventListener("click", function () {
var second = document.getElementById("second");
addMessage(second, "Event:click");
});
</script>
</body>
</html>
++
三：页面构建阶段
页面构建阶段的目标是建立Web应用的UI，主要包括两个阶段 1：解析HTML代码并构建文档对象模型（DOM）； 2：执行JavaScript代码
当浏览器执行DOM代码时，遇到script脚本代码时，会暂停HTML到DOM的构建，转而开始执行JavaScript代码， 当HTML元素被处理完了之后，浏览器就会进入到生命周期的第二部分：事件处理~~
