「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」。
“从URL输入到页面显示,浏览器做了哪些处理” 这类问题在面试中经常被问到,如何回答才是全面的呢,最近在复习浏览器的原理,试着回答一下~
目前的浏览器多采用多进程架构。一个浏览器启动后,通常会包括浏览器主进程、网络进程、渲染进程、GPU进程、插件进程等主要进程。
当用户输入URL地址时,浏览器首先判断当前输入是否符合URL规则,如果不是url地址会使用默认的搜索引擎检索输入的内容,进而会生成新的URL地址;如果是url地址,那就接着走下边的流程。
stateDiagram-v2
[*] --> 是否符合URL规则
是否符合URL规则 --> 是
是 --> 默认搜索引擎检索输入的内容,生成新的URL地址
是否符合URL规则 --> 否
否 --> 接着走浏览器的处理流程
浏览器的处理流程
-
首先判断用户输入的内容是符合URL规则的,浏览器进程会补充协议,构成完整的url地址
-
浏览器的页面在替换成新的页面之前会触发beforeunload事件,通过监听这个事件可以添加是否需要退出当前页面的判断等,如果不需要添加退出前的处理,则浏览器会显示loading的状态,但页面还临时显示之前的页面。
-
接下来,会进入资源的请求过程。浏览器进程通过进程间的通信(IPC)把URL的请求发送给网络进程。
-
网络进程接受到URL请求,先判断本地是否缓存了该请求的资源。如果有缓存就把资源直接返回给浏览器进程;如果没有缓存那么直接进入网络请求流程。
-
网络进程中,先进行DNS解析,获取服务器IP和端口号。如果没有端口号,http默认是80,https默认是443。如果是https请求,还需要建立TLS链接。
-
根据获取的IP地址和端口号,建立TCP连接。TCP连接的生命周期包括:建立连接、传输数据、断开连接
-
网络进程收到响应头数据(响应行,响应头,响应体等信息)之后,就开始解析。
-
浏览器进程接收到网络进程的响应头数据之后,发送”提交文档“(CommitNavigation)的消息到渲染进程,发送commitNavigation消息是会携带响应头等基本信息。
提交文档就是浏览器进程将网络进程接收到的HTML数据提交给渲染进程
-
渲染进程接收到CommitNavigation消息之后,便开始准备接收HTML数据,接收数据的方式是直接和网络进程建立数据通道,HTML数据接收结束后,渲染进程会返回”确认提交“的消息给浏览器进程。
-
浏览器进程在收到”确认提交“的消息后,会更新浏览器的页面状态,包括了安全状态,地址栏的URL,前进后退的历史状态,并更新Web页面,接着进入渲染进程。
下一节跟大家唠一下渲染进程的处理过程 ~
响应头中的keep-alive怎么理解
在HTTP 1.0时代,http请求都是短连接的形式,也就是每请求一个服务器的资源都需要建立连接,传输数据,断开连接,走一遍TCP连接的生命周期。
通常,建立和断开连接的时间就有可能超过传输数据的时间了,这种短连接比较低效。 所以就出现了长连接,也就是keep-alive。
keep-alive 指的是在一个http请求结束后,不会断开连接,下个请可以复用该连接,这样就省去了断开+连接的时间,符合IP+端口号规则的资源都可以复用该连接。
长连接也存在着问题,如果同一域名下的需要的资源过多,即便是复用了长连接也是相当耗时的。这就出现了同一时刻并发连接服务器的需求,为了服务器的性能考虑,只可以并行6个请求。
接着了解浏览器的渲染进程的处理过程 ~