前端面试必备——从输入URL到浏览器展示网页的过程

最新推荐文章于 2023-10-24 21:54:22 发布

_时雨_

最新推荐文章于 2023-10-24 21:54:22 发布

阅读量630

点赞数

分类专栏：面试文章标签：前端面试服务器

本blog上原创文章未经本人许可不得商用，转载请注明出处

本文链接：https://blog.csdn.net/qq_45881272/article/details/125980789

版权

面试专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

网络请求部分
浏览器渲染页面部分

网络请求部分

1、用户输入关键词，地址栏判断是搜索内容还是 url 地址

如果是搜索内容，会使用浏览器默认搜索引擎加上搜索内容合成url;
如果是域名会加上协议(如 https)合成完整的 url。

2、然后按下回车。浏览器进程通过 IPC进程间通信把 url传给网络进程(网络进程接收到 url 才发起真正的网络请求)。

3、网络进程接收到 url 后，先查找有没有缓存。(先检查强缓存，如果命中直接使用缓存资源，否则进入 DNS 解析)

有缓存，直接返回缓存的资源。
没有缓存。(进入真正的网络请求)。首先获取域名的 IP，系统会首先自动从 hosts 文件中寻找域名对应的 IP 地址，一旦找到，和服务器建立 TCP 连接;如果没有找到，则系统会将网址提交 DNS 域名解析服务器来进行 IP 地址的解析。

4、利用 IP 地址和服务器建立 TCP 连接(3 次握手)

5、建立连接后，浏览器构建数据包(包含请求行，请求头，请求体，并把该域名相关 Cookie 等数据附加到请求头)，然后向服务器发送请求消息

注意：请求体只有在 POST 方法下存在，常见的场景是表单提交

6、服务器接收到消息后根据请求信息构建响应数据(包括响应行，响应头，响应正文).应用层HTTP解析请求头和请求体

如果需要重定向，返回HTTP响应数据的状态码301或者302，同时在请求头的Location字段中附上重定向地址，浏览器会根据code和Location进行重定向提作;
如果不是重定向，首先服务器会根据请求头中的If-None-Match的值来判断请求的资源是否被更新，如果没有更新，就返回304状态码，告诉浏览器之前的缓存还可以使用，不需要返回新数据，否则返回新数据和200的状态码，并且如果浏览器需要缓存数据的话，就在相应头中加入字段:Cache-Control:Max-age=
响应数据又顺着应用层——传输层——网络层——网络层——传输层——应用层的顺序返回到网络进程

7、数据传输完成，TCP四次挥手断开连接。如果浏览器或者服务器在HTTP头部加上Connection:Keep-Alive，TCP就一直保持连接，这样再次传输时不需重新建立连接，提高资源加载速度

8、网络进程接收到响应数据后进行解析，根据响应头中的Content-type来判断响应数据的类型，如果是字节流类型（application/octet-stream），就将该请求交给下载管理器;如果是text/html类型，就通知浏览器进程将获取的文档进行渲染

浏览器渲染页面部分

1. 解析 HTML 并构建 DOM 树

在渲染引擎内部有个 HTML解析器负责将 HTML 字节流转换为 DOM 结构，因为浏览器不能解析 HTML，故会先基于 HTML 编码转换为单个字符，通过分词器将字节流转换为 Token，每个 token 都有自己独特的含义和规则集;然后进行词法分析，将 token 转为对象，这些对象分别定义他们的属性和规则之后进行 DOM 构建。