从输入 url 到页面显示
- 输入地址
浏览器首先从浏览器缓存,本地缓存,本地的hosts文件查询对应的ip;
如果在本地没找到,接下来会发送一个DNS请求到本地DNS服务器,本地DNS查询它的缓存记录;
如果没有,本地服务器向DNS根服务器查询(根服务器并没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址);
本地服务器继续向域服务器发出请求,域服务器返回一个解析服务器的地址,然后本地DNS服务器向解析服务器发出请求,就会收到一个域名和ip对应关系,将ip返回给用户,并把对应关系保存在缓存中
- 建立 TCP 连接(三次握手)
第一次握手:客户端A将标志位SYN置为1,随机产生一个值为seq=J(J的取值范围为=1234567)的数据包到服务器,客户端A进入SYN_SENT状态,等待服务端B确认;
第二次握手:服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接,服务端B将标志位SYN和ACK都置为1,ack=J+1,随机产生一个值seq=K,并将该数据包发送给客户端A以确认连接请求,服务端B进入SYN_RCVD状态.
第三次握手:客户端A收到确认后,检查ack是否为J+1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K+1,并将该数据包发送给服务端B,服务端B检查ack是否为K+1,ACK是否为1,如果正确则连接建立成功,客户端A和服务端B进入ESTABLISHED状态,完成三次握手,随后客户端A与服务端B之间可以开始传输数据了.
发送 http 请求
服务器处理请求
后端从在固定的端口接收到 TCP 报文开始,它会对 TCP 连接进行处理,对 HTTP 协议进行解析,并按照报文格式进一步封装成 HTTP Request 对象,供上层使用。
服务器返回一个 HTPP 响应,包括状态行,响应头,响应正文
- 浏览器显示 HTML
浏览器在解析html文件时,会”自上而下“加载,并在加载过程中进行解析渲染。在解析过程中,如果遇到请求外部资源时,如图片、外链的CSS、iconfont等,请求过程是异步的,并不会影响html文档进行加载.
解析过程中,浏览器首先会解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上.
- *浏览器发送请求获取嵌入在 HTML 中的资源(图片、音频、视频、CSS、JS 等)
浏览器是如何进行界面渲染的
- 解析(Parser)HTML,生成 DOM 树(DOM Tree)
- 同时解析(Parser) CSS,生成样式规则 (Style Rules)
- 根据 DOM 树和样式规则,生成渲染树(Render Tree)
- 进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
- 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
- Display: 展示在页面上