【面试题】从输入 URL 到页面显示，这中间发生了什么？_从输入地址到页面显示发生了什么web面试

最新推荐文章于 2024-07-25 12:44:48 发布

2401_84435942

最新推荐文章于 2024-07-25 12:44:48 发布

阅读量331

点赞数 4

分类专栏：程序员文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/2401_84435942/article/details/138603140

版权

程序员专栏收录该内容

161 篇文章 1 订阅

订阅专栏

web浏览器中的javascript

客户端javascript
在html里嵌入javascript
javascript程序的执行
兼容性和互用性
可访问性
安全性
客户端框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

计时器
浏览器定位和导航
浏览历史
浏览器和屏幕信息
对话框
错误处理
作为window对象属性的文档元素

如果输入的是内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带
搜索关键字的 URL。

如果输入的是 URL，那么地址栏会根据规则，把这段内容加上
协议，合成为完整的 URL。

2. URL 请求过程

浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。那具体流程是怎样的呢？

网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

接下来就是利用 IP 地址和服务器建立 TCP 连接 (三次握手)。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。

Content-Type 是 HTTP 头中一个非常重要的字段，它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。但如果是 HTML，那么浏览器则会继续进行导航流程。

3. 准备渲染进程

如果协议和根域名相同，则属于同一站点。

但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。

渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

4. 提交文档

所谓提交文档，就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：

首先当浏览器进程接收到网络进程的响应头数据之后，便向渲染进程发起“提交文档”的消息。

渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。

等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。

浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

5. 渲染阶段

一旦文档被提交，渲染进程便开始页面解析和子资源加载。

渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。

渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

创建
布局树，并计算元素的布局信息。

对布局树进行分层，并生成
分层树。

为每个图层生成
绘制列表，并将其提交到合成线程。

合成线程将图层分成
图块，并在光栅化线程池中将图块转换成
位图。

合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

浏览器进程根据 DrawQuad 消息生成