主要分为三个阶段,分别是 请求响应阶段、页面构建阶段、和事件处理阶段。
请求响应阶段
请求响应阶段大体上就是，当用户输入url请求地址或者点击超链接a标签的时候，浏览会形成请求并发送到服务器，服务器给出响应。
页面构建阶段
页面构建阶段就是，当浏览器拿到 HTML css js这些代码的时候，就会渲染页面，主要工作内容是对DOM结构的渲染，HTML和js会像接力赛一样配合完成工作。当HTML中的标签
遇到script标签的时候，js就会执行，执行到代码的最后，HTML又拿起了接力棒。如此循环往复完成页面的渲染WEB应用的生命周期
- DOM树的特点:除了第一个节点(html根节点)外,所有节点都只有一个父节点,同时,一个节点可以有多个孩子节点,这些孩子节点之间互相称为兄弟节点
- 尽管DOM是根据HTML创建来的,两者有密切的关系,但两者并不相同,HTML代码是浏览器页面UI构建初始的DOM蓝图
- js代码执行的切入点:
由于js执行的主要目的是提供动态页面,故浏览器通过全局对象提供的API使js引擎可以和页面进行交互并改变页面的内容.浏览器暴露给引擎的全局对象是window对象.window是获取全局对象,全局变量,浏览器API的途径.
window对象最重要的属性是document,它代表了当前页面的DOM,通过使用这个对象,js代码可以修改DOM,包括修改和删除现存节点,以及创建和插入新的节点
- js代码的分类:js代码基本分为全局代码和函数代码
其中全局代码是由js引擎以一种直接的方式自行执行.
函数代码一般有多种被执行方式,分别是被 其他全局代码执行、被其他函数执行、也可以是浏览器执行
事件处理
1.事件注册:写代码的时候 定义的事件,addEventListener(相当于在网站上订票,但是票没有取)
2.浏览器等待事件处理(火车站客服等待有人来取票)
3.浏览器使用了一种机制来跟踪事件的发生,这种机制被称为 事件队列.(去车站取票排队)
事件列队的原理:假设有事件A发生(例如用户点击鼠标),又有事件B发生.这两个事件就会加入到事件列队中,(它们的顺序是被浏览器检查到顺序排列,)注意将事件推入队列的过程不参与事件处理线程.这时候浏览器会检查事件队列头.如果有事件存在,将事件取出并执行此事件处理器.其他事件需要内心等待被执行.也就是说浏览器对事件的处理(加入列队中)以及对事件函数(事件处理线程)的处理是异步的.
4.浏览器执行事件(此时也就相当于买票的人排到头了,并将票取走)
注意:之所以将js事件处理称为异步处理,是因为事件的排队和事件的处理不在一个线程上