运行时的页面构建过程
发生在页面生命周期之前
用户输入网址或点击一个链接，浏览器向服务器发送请求，服务器处理了请求后形成了一个通常由HTML，CSS和JS代码组成的响应。浏览器接收响应，此时Web应用就开始了它的生命周期。
web应用的生命周期
1. 页面构建阶段
页面构建阶段的目标是建立Web应用的UI，其主要包括如下两个步骤：
-
解析HTML代码并构建文档对象模型(DOM)/解析CSS构建CSS规则
解析HTML代码并构建文档对象模型(DOM)
在浏览器处理HTML节点的过程中执行，浏览器按照顺序依次处理页面中的节点，并构建DOM(文档对象模型)-以页面中节点为单位节点的树结构，其中HTML节点是DOM的根节点，除此之外DOM中的每个节点都只有一个父节点，但可以有任意数量的子节点。
解析CSS构建CSS规则
解析CSS生成CSS规则，这一步骤是和上一步是并行的，没有前后关系，彼此不会阻塞对方的执行 以上两个步骤完成后会合并生成渲染树进行渲染，渲染树依赖于DOM树和CSS规则
-
执行JavaScript代码 当HTML解析到一种特殊的节点-“脚本节点”时，浏览器会停止构建DOM，转而执行脚本代码。 JS脚本代码由浏览器的JS引擎执行，主流浏览器的JS引擎如下：
- Firefox - SpiderMonkey
- Chrome - V8
- Opera - V8
- Edge - Chakra
为了方便JS代码与页面交互，浏览器提供给JS引擎一个全局对象：window，它代表了包含了一个页面的窗口。 window对象是获取所有其他全局对象，全局变量，浏览器API的访问途径 一般来说，JS代码能够在任何程度上修改DOM结构，它能创建新的节点或移除现有DOM节点，但它依然不能选择和修改还没被创建的节点，这就是为什么要把script元素放在页面底部的原因。这样就不用担心操作到还没加载为DOM的节点。 除了会影响全局应用状态和修改DOM外，还会注册事件监听器，这些事件监听器会在事件发生时，由浏览器调用执行。
以上两个步骤可能会在页面构建过程中交替执行多次。
2. 事件处理阶段
事件队列和事件处理过程
浏览器执行环境的核心思想基于：同一时刻只能执行一个代码片段，即所谓的单线程执行模型。浏览器需要一种方式来跟踪已经发生但是尚未处理的事件，为了实现这个目标，浏览器使用了事件队列。所有已生成的事件（包括用户生成的和服务器生成的等等）都会按照被浏览器检测到的顺序放入事件队列中。 浏览器处理事件队列中的事件的简单流程如下：
- 浏览器检查队列头
- 如果没有检测到事件，就继续检查
- 如果在队头检测到了事件，则取出该事件然后执行对应的事件处理器，处理完该事件后继续检查队头
- 如此循环往复
事件处理的特性和事件的种类
浏览器对事件的处理，以及处理函数的调用是异步的。 事件主要有如下几种类型：
- 浏览器事件
- 网络事件
- 用户事件
- 计时器事件
