1、用户输入关键词,地址栏判断是搜索内容还是 url 地址
- 如果是搜索内容,会使用浏览器默认搜索引擎加上搜索内容合成url;
- 如果是域名会加上协议(如 https)合成完整的 url。
2、然后按下回车。浏览器进程通过 IPC进程间通信把 url传给网络进程(网络进程接收到 url 才发起真正的网络请求)。
3、网络进程接收到 url 后,先查找有没有缓存。(先检查强缓存,如果命中直接使用缓存资源,否则进入 DNS 解析)
- 有缓存,直接返回缓存的资源。
- 没有缓存。(进入真正的网络请求)。首先获取域名的 IP,系统会首先自动从 hosts 文件中寻找域名对应的 IP 地址,一旦找到,和服务器建立 TCP 连接;如果没有找到,则系统会将网址提交 DNS 域名解析服务器来进行 IP 地址的解析。
4、利用 IP 地址和服务器建立 TCP 连接(3 次握手)
5、建立连接后,浏览器构建数据包(包含请求行,请求头,请求体,并把该域名相关 cookie 等数据附加到请求头),然后向服务器发送请求消息
注意:请求体只有在 方法下存在,常见的场景是表单提交
6、服务器接收到消息后根据请求信息构建响应数据(包括响应行,响应头,响应正文).应用层HTTP解析请求头和请求体
- 如果需要重定向,返回HTTP响应数据的状态码301或者302,同时在请求头的Location字段中附上重定向地址,浏览器会根据code和Location进行重定向提作;
- 如果不是重定向,首先服务器会根据请求头中的的值来判断请求的资源是否被更新,如果没有更新,就返回304状态码,告诉浏览器之前的缓存还可以使用,不需要返回新数据,否则,并且如果浏览器需要缓存数据的话,就在相应头中加入字段:
响应数据又顺着应用层——传输层——网络层——网络层——传输层——应用层的顺序返回到网络进程
7、数据传输完成,TCP四次挥手断开连接。如果浏览器或者服务器在HTTP头部加上,TCP就一直保持连接,这样再次传输时不需重新建立连接,提高资源加载速度
8、网络进程接收到响应数据后进行解析,根据响应头中的来判断响应数据的类型,如果是,就将该请求交给下载管理器;如果是,就通知浏览器进程将获取的文档进行渲染
在渲染引擎内部有个 HTML解析器负责将 HTML 字节流转换为 DOM 结构,因为浏览器不能解析 HTML,故会先基于 HTML 编码转换为单个字符,通过分词器将字节流转换为 Token,每个 token 都有自己独特的含义和规则集;然后进行词法分析,将 token 转为对象,这些对象分别定义他们的属性和规则之后进行 DOM 构建。
- 解析 HTML 构建 DOM 时,遇到Javascript 会被阻塞(当没有 async 和 defer 属性时)
- Javascript 执行会被 CSSOM 构建阻塞,也就是说,Javascript 必须等到 CSSOM 构建完成后才会执
为了构建渲染树,浏览器主要完成了以下工作:
- 从 DOM 树的根节点开始遍历每个可见节点
- 对于每个可见的节点,找到 CSSOM 树中对应的规则,并应用它们
- 根据每个可见节点以及其对应的样式,组合生成渲染树
第四步是在渲染树上运行布局以计算每个节点的几何体。
- 渲染树会表示显示哪些节点以及其他样式,但是不表示每个节点的尺寸、位置等信息
- 布局是确定呈现树中所有节点的宽度、高度和位置信息:
- 注意:布局树只包含可见元素,对于 head 标签和设置了 display:none 的元素,将不会被放入其中。