“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,涉及到了网络、操作系统、Web 等一系列的知识。下面从浏览器角度分析整个过程:
一、浏览器各个进程
-
浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
-
网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
-
渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。
二、整体过程概览
-
首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。
-
然后,在网络进程中发起真正的 URL 请求。
-
接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。
-
浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程;
-
渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道;
-
最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程:“已经准备好接受和解析页面数据了”。
-
浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态。
三、用户输入
该阶段主要任务是讲用户的输入转换成为完整的URL。
当用户在地址栏中输入一个查询关键字时,浏览器地址栏会判断输入的关键字是搜索内容,还是请求的 URL。
-
如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。
-
如果判断输入的额内容符合URL规则,那么地址栏会根据规则,把输入内容加上协议,合成为完整的 URL。
当浏览器开始加载一个地址后,标签页的图标进入加载状态,此时浏览器页面还是之前的页面。
四、URL 请求过程
该阶段主要任务是获取资源和数据,获取后返回给浏览器进程,未后续渲染进程渲染提供源材料。
当有了完整的URL,浏览器进程会通过进程间通信(IPC)把 URL 请求发送至网络进程,网络进程会首先从本地缓存查找资源,如果有资源直接返回给浏览器进程;如果没有则会从网络中进行查找。
4.1 发送请求
进行DNS解析,获取目标服务器的IP地址;
建立TCP连接;
构建请求行、请求头等信息,向服务器发送构建的请求信息。
4.2 重定向
在导航过程中,如果服务器响应行的状态码包含了 301、302 一类的跳转信息,浏览器会从响应头的 Location 字段里面读取重定向的地址,跳转到新的地址继续导航;如果响应行是 200,那么表示浏览器可以继续处理该请求。
4.3 响应数据类型处理
Content-Type 是 HTTP 头中一个非常重要的字段, 它告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。
如果 Content-Type 字段的值被浏览器判断为下载类型(application/octet-stream),那么该请求会被提交给浏览器的下载管理器,同时该 URL 请求的导航流程就此结束。但如果是 HTML(text/html),那么浏览器则会继续进行渲染。
五、渲染
5.1 渲染进程准备
渲染进程策略是:
-
通常情况下,打开新的页面都会使用单独的渲染进程;
-
如果从 A 页面打开 B 页面,且 A 和 B 都属于同一站点的话,那么 B 页面复用 A 页面的渲染进程;如果是其他情况,浏览器进程则会为 B 创建一个新的渲染进程。
渲染进程准备好之后,还不能立即进入文档解析状态,因为此时的文档数据还在网络进程中,并没有提交给渲染进程,所以下一步就进入了提交文档阶段。
5.2 提交文档
所谓提交文档,就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程。
5.3 渲染
一旦文档被提交,渲染进程便开始页面解析和子资源加载了。一旦页面生成完成,渲染进程会发送一个消息给浏览器进程,浏览器接收到消息后,会停止标签图标上的加载动画。
极客时间《浏览器工作原理与实践》学习笔记 Day06