从输入一个url后到页面加载完成都发生了什么

浏览器查询缓存，如果有没过期的缓存则直接获取内容开始渲染

浏览器通过DNS查找域名的IP地址

首先查找缓存

连接目标IP并建立TCP连接

HTTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解包提取出HTTP报文。

向目标服务器发送http请求

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口。
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。

服务器处理请求并返回HTTP报文

它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

浏览器检测返回的状态码来决定如何处理响应

浏览器检测http相应是否是重定向（http状态码为3xx），授权相应（401），错误相应（4xx和5xx）等；浏览器对这些状态码的处理与正常的相应（2xx）是不同的

---

从上到下解析HTML文件，生成DOM树。在这个过程中，同时也会解析外部CSS文件和样式内容来构建CSS规则树。

当遇到script标签时会立即解析和执行脚本，这时会阻塞渲染过程。

浏览器会结合DOM树和CSS规则树构建渲染树。

接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。
最后，通过Painting环节将所有的节点内容呈现到屏幕上。

浏览器为了让用户更快的看到页面，是边解析html生成局部的DOM tree，浏览器就生成部分render tree然后展示出来。

js脚本在执行的过程中会通过DOM API修改DOM树，通过CSSDOM API去修改渲染树。
每次修改会造成Render Tree的reflow和repaint。

• 只要修改DOM或修改了元素的形状或大小，就会触发Reflow
• 单纯修改元素的颜色只需Repaint

---

渲染完成后开始page的onload事件
整个页面load完成