输入url网址到页面渲染的过程

98 阅读2分钟

1. DNS解析,将域名地址解析成ip地址

2. TCP连接(TCP三次握手)(客户端和服务器建立连接)

  1. 客户端告诉服务器我要发送请求了
  2. 服务器告诉客户端我准备接收你的请求了
    • 作用:如果服务器没准备好,客户端发了请求也不会接收
  3. 客户端告诉服务器我要发送请求了
    • 作用:服务器已经准备接收请求,当请求中断或者异常了,那服务器就只能等待,接收不到到请求,所以需要客户端再次确认要发送

3. 浏览器发送请求

请求报文:HTTP协议的通信内容

4. 服务器接收,处理,响应请求

5. 渲染页面

  1. 解析HTML形成dom树
  2. 解析css,形成cssom树
  3. 解析js,处理js代码(绑定事件,修改dom/cssom)
  4. 将dom和cssom合并成一个渲染树
  5. 根据渲染树来计算布局,计算每个节点的几何信息(布局)
  6. 将各个节点绘制到屏幕上(渲染)

6. 断开连接(tcp四次挥手)

  1. 浏览器告诉服务器,我的请求报文发送完了,你准备关闭吧
  2. 服务器告诉浏览器,你的请求报文我接收完了,我准备关闭了,你也准备关闭把
  3. 服务器告诉浏览器,我的响应报文发送完了,你准备关闭吧
  4. 浏览器告诉服务器,你的响应报文我接受完了,我准备关闭了,你也准备吧

注意:

前五个步骤不一定是按照顺序执行的,如果dom树或者cssom树被修改了,可能会执行多次布局和渲染。实际页面中,这些页面都会执行多次

image.png