5. 总结:从输入 URL 到页面展示,这中间发生了什么?

结合HTTP的请求过程完整的导航流程这两篇文章,对整个流程,我做出了如下总结

1. 用户输入关键字,浏览器进程根据用户输入信息判断是搜索内容还是请求URL

    1.1. 如果是搜索内容,就将搜索内容与搜索引擎合成新的URL

    1.2. 如果是请求URL,浏览器进程就会根据URL协议,合成合法的URL

2. 浏览器进程会通过进程间通信(IPC)把URL请求发送至网络进程,由网络进程发起真正请求。

3. 网络进程在发起请求之前,首先检查本地是否存在缓存,如果存在,且缓存还未过期,则把该资源返回给浏览器进程。

4. 如果不存在缓存,或缓存已过期,网络进程则向服务器发起网络请求。

5. 在请求之前,首先对域名进行DNS解析,拿到服务端IP和端口(如果没写端口http默认80,https默认443)

6. 等待TCP队列(如果建立的TCP连接大于6)

7. TCP三次握手与服务器建立连接。

    7.1. 客户端:你能收到我发给你信息(SYN)吗?

    7.2. 服务端:信息(SYN)我收到了,那你能收到我发送给你的信息(ACK)吗?

    7.3. 客户端:OK,我也收到了你的信息(ACK)了,我们可以进行通信了

8. 建立TCP连接后,开始发送HTTP请求

    8.1. 首先构建请求行和请求头,然后经传输层加上TCP头组成TCP包(包括源端口号、目的程序端口号和用于校验数据完整性的序号)

    8.2. 经网络层再加上IP头组成TCP包。最终经物理网络传输到目的服务器。

9. 服务器处理请求

    9.1. 首先目的服务器网络层接收到数据包、解析出IP头部和数据、将解开数据包上传至传输层、解析出TCP头部和数据,识别端口,将解开的数据包上传至应用层

    9.2. 历经千辛万苦,HTTP的请求信息终于被送达了服务器,接下来,服务器会根据浏览器的请求信息来准备相应的内容(准备响应行,响应头,响应体)。

    9.3. 一旦服务器处理结束,便可以返回数据给浏览器了。(先返回响应行,再返回响应头,最后返回响应体)。

10. 重定向

    10.1. 如果服务器返回的状态码是301【永久重定向】或302【临时重定向】,说明服务器需要浏览器进行重定向,那么浏览器就会获取在响应头里的Location字段中的地址,并向该地址重新发送HTTP请求。

    10.2. 如果服务器返回的状态码是304【请求资源未更新】,说明服务器资源未更新,浏览器在本地缓存中拿数据就可以了,就不返回数据了

    10.3. 如果服务器返回200,说明数据成功拿到了

11. TCP四次挥手断开连接,但如果浏览器或服务器在其HTTP头部加上Connection:keep-alive,则TCP连接则继续保持。

    11.1. 客户端:我这边没有数据要传了

    11.2. 服务端:好的,我看看我这边还有没有数据要传

    11.3. 服务端:我这边也没有数据要传了

    11.4. 客户端:好的,那我断开连接了

12. 网络进程将获取到的数据包进行解析,根据响应头中的Content-type来判断响应数据的类型,如果是字节流类型,则将该请求交给下载管理器,该导航流程结束,如果是HTML文件类型,就通知浏览器进程获取到该文档准备渲染。

13. 浏览器进程获取到通知,根据当前页面B是否是从页面A中打开的,并且和A是否是同一个站点(根域名和协议一样就被认为是同一站点),如果满足上述条件,就复用之前网页的渲染进程,否则,则新创建一个单独的渲染进程。

14. 浏览器进程发出提交文档的消息给渲染进程,渲染进程收到消息后,会和网络进程建立数据通信管道,文档数据传输完成后(数据是边传输边进行渲染),渲染进程就返回确定提交的消息给浏览器进程

15. 浏览器收到确认提交的消息后,会更新浏览器的页面状态,包括了安全状态,地址栏的URL,前进后退的历史状态,并跟新web页面,此时的web页面是空白页

16. 渲染进程对文档进行页面解析和子资源加载,HTML通过HTML解析器转成DOM Tree(二叉树结构),CSS按照CSS规则和CSS解析器转换成CSSOM Tree,两个Tree合并形成render Tree(不包含HTML的具体元素和元素要画的具体位置),通过layout计算出每个元素具体的宽、高、颜色、位置、结合起来,开始绘制,最后显示在屏幕中显示出来。


评论 抢沙发

表情
  1. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:31
    1(#17)

  2. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:30
    1(#16)

  3. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:19
    1(#15)

  4. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:17
    11(#14)

  5. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:14
    1(#13)

  6. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:13
    1(#12)

  7. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:12
    1(#11)

  8. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:10
    1(#10)

  9. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:06
    1(#9)

  10. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:05
    111(#8)

  11. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:04
    111111(#7)

  12. 来自广东广州(mytest)用户的评论:2020-12-17 16:49:02
    111(#6)

  13. 来自广东广州(mytest)用户的评论:2020-12-17 10:08:33
    11(#5)

  14. 来自广东广州(mytest)用户的评论:2020-12-17 10:08:32
    11(#4)

  15. 来自广东广州(chenjie)用户的评论:2020-11-18 15:02:36
    11111111(#3)

  16. 来自广东广州(l12345)用户的评论:2020-09-28 16:36:58
    [e6666(#2)

  17. 来自广东广州(guest222)用户的评论:2020-08-24 22:27:22
    (#1)

首页上一页12下一页尾页