从输入url到页面展示发生了什么(面试)

2024-10-30 17:21

浏览器的多进程架构

从浏览器输入 URL 到页面渲染的整个过程都是由 浏览器架构中的各个进程之间的配合完成。

  1. 浏览器主进程: 管理子进程、提供服务功能

  2. 渲染进程:将HTML、CSS、JS渲染成界面,js引擎v8和排版引擎Blink就在上面,他会为每一个tab页面创建一个渲染进程

  3. GPU进程:本来是负责处理3Dcss的,后来慢慢的UI界面也交给GPU来绘制

  4. 网络进程:就是负责网络请求,网络资源加载的进程

  5. 插件进程:负责插件的运行的,因为插件很容易崩溃,把它放到独立的进程里不要让它影响别人

浏览器的多进程架构

从用户输入信息到页面展示的不同阶段,是不同的进程在发挥作用,示意图如下:图片从图中可以看出,整个过程是需要各个进程之间相互配合完成的,过程大致可以描述为:

  1. 用户输入url,处理输入信息,主进程开始导航,交给网络进程干活

  2. 网络进程发起网络请求,其中有可能会发生重定向

  3. 服务器响应URL之后,主进程就要通知渲染进程,你要开始干活了

  4. 渲染进程准备好了,要想渲染进程提交数据,这个时间叫做提交文档

  5. 渲染进程接受到数据,完成页面渲染。

具体过程

  1. 输入url

    • 用户输入url,处理输入信息:

    • 如果为非url结构的字符串,交给浏览器默认引擎去搜索改字符串;

    • 若为url结构的字符串,浏览器主进程会交给 网络进程 ,开始干活。

  2. 查找浏览器缓存

    • 网络进程会先看看是否存在本地缓存,如果有就直接返回资源给浏览器进程,无则下一步 DNS-> IP -> TC

  3. DNS解析

    • 网络进程拿到url后,先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS,那么还需要建立TLS连接。

  4. 建立TCP连接,三次握手

    • 接下来就是利用IP地址和服务器建立TCP连接。连接建立之后,向服务器发送请求。

  5. 服务器响应

    • 服务器收到请求信息后,会根据请求信息生成响应行、响应头、响应体,并发给网络进程。网络进程接受了响应信息之后,就开始解析响应头的内容。

    • 网络进程解析响应行和响应头信息的过程:

      • 重定向如果响应行状态码为301(永久重定向)和302(临时),那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址,并重新发起网络请求。

  6. 响应数据处理

    • 导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。比如:若为application/octet-stream,则会按照下载类型来处理这个请求,导航结束。若为text/html,这就告诉浏览器服务器返回的是html格式,浏览器会通知渲染进程,你要干活了。

  7. 准备渲染进程

    • 默认情况,每个页面一个渲染进程。但若处于同一站点(同根域名+协议),那么渲染进程就会复用。

  8. 提交文档

    • 渲染进程准备好后,浏览器进程发出“提交文档的消息”,渲染进程接受了消息之后,会跟网络进程简历传输数据的管道。

    • 等数据传输完成了,渲染进程会告诉浏览器进程,确认文档提交,这时候浏览器会更新页面,安全状态,url,前进后退的历史。

    • 到这里导航结束,进入渲染阶段。

注:当浏览器刚开始加载一个地址之后,标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容,并没立即替换为百度首页的页面。因为需要等待提交文档阶段,页面内容才会被替换。

相关文章
热点文章
精彩视频
Tags

站点地图 在线访客: 今日访问量: 昨日访问量: 总访问量: