前端高频面试题2：浏览器/计算机网络

 本专栏相关链接

前端高频面试题1：HTML/CSS

前端高频面试题2：浏览器/计算机网络

前端高频面试题3：JavaScript

---

 1.什么是强缓存、协商缓存？ 

• 强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命中，则直接从缓存中读取资源，无需向服务器发送任何请求。（返回200）

• 协商缓存： 当强缓存未命中时，浏览器会向服务器发送请求，询问服务器资源是否发生变化。如果服务器告知资源未改变，则浏览器从缓存中读取资源；如果服务器告知资源已改变，则浏览器会下载新资源并更新缓存。（返回304）

 2.Cookie、Session、LocalStorage、SessionStorage的区别

• Cookie:

  • 存储位置：Cookie存储在客户端的浏览器中。

  • 生命周期：Cookie可以设置过期时间（Expires或Max-Age），到期后自动删除；若未设置过期时间，则为会话级（浏览器关闭后清除）。

  • 容量限制：一般大小限制为4KB左右。

  • 使用场景：主要用于用户身份认证（如记住登录状态）、保存用户偏好设置和跟踪用户行为（如广告点击记录）。

  • 安全性：容易被劫持（如XSS攻击），可以通过设置HttpOnly和Secure属性提高安全性。

  • 登录状态：可以在用户未登录时使用。

  • 跨页面：可以跨多个页面和不同子域共享。

  • 传输数据：每次请求都会携带 Cookie 数据。

• Session:

    高安全性场景：适用于需要保护敏感数据的场景，如在线银行、支付系统等。

  • 存储位置：Session存储在服务端，服务器为每一个用户创建唯一的会话（Session）。

  • 生命周期：Session存在于用户活动的会话期间，当用户退出或者关闭浏览器，会话数据就会被删除。

  • 容量限制：取决于服务器配置。

  • 使用场景：用户会话管理：用于存储用户的会话信息，如购物车数据、用户权限等。

  • 安全性：相对安全，通过加密的 Session ID 进行识别和验证，且客户端不可见。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：通常只能在单个会话期间。

  • 传输数据：仅在初始会话时传输 Session ID，后续请求不再携带全部会话数据。

• LocalStorage:

    前端缓存：用于缓存大量数据，提高应用性能和用户体验。

  • 存储位置：存储在客户端，浏览器内。

  • 生命周期：持久性存储，除非手动删除，否则永久有效。

  • 容量限制：一般为 5-10MB，各浏览器可能不同。

  • 使用场景：长期数据存储：适用于存储长期有效的数据，如用户偏好设置、浏览历史等。

  • 安全性：易受 XSS 攻击，数据存储在客户端。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：可以在同一域下的所有页面中共享数据。

  • 传输数据：不随请求发送，仅在客户端存储和访问。

• SessionStorage:

    多标签页数据隔离：在同一域名下的不同标签页之间实现数据隔离，防止数据污染。

  • 存储位置：存储在客户端，浏览器内。

  • 生命周期：会话级别，浏览器关闭或标签页关闭后失效。

  • 容量限制：一般为 5-10MB，各浏览器可能不同。

  • 使用场景：临时数据存储：适用于存储会话级别的数据，如表单数据、页面状态等。

  • 安全性：易受 XSS 攻击，数据存储在客户端。

  • 登录状态：需要用户登录后才能创建和访问会话数据。

  • 跨页面：手动新建标签页无法共享数据，通过链接打开新页面会复制一套原有数据，但与原数据是独立的。

  • 传输数据：不随请求发送，仅在客户端存储和访问。

3. 输入一个URL到页面过程中发生了什么

1. 通过 DNS 解析域名的实际 IP 地址

2. 检查浏览器是否有缓存，命中则直接取本地磁盘的 html，如果没有命中强缓存，则会向服务器发起请求（先进行下一步的 TCP 连接）

3. 若强缓存和协商缓存都没有命中，则返回请求结果

4. 然后与 WEB 服务器通过三次握手建立 TCP 连接。期间会判断一下，若协议是 https 则会做加密，如果不是，则会跳过这一步

5. 加密完成之后，浏览器发送请求获取页面 html，服务器响应 html，这里的服务器可能是 server、也可能是 cdn

6. 接下来是浏览器解析 HTML，开始渲染页面

   1. 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象

   2. 构建CSS规则树：生成CSS规则树（CSS Rule Tree）

   3. 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）

   4. 布局（Layout）：计算出每个节点在屏幕中的位置

   5. 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

4. DNS解析的过程 

1. 浏览器缓存：浏览器首先检查自身缓存是否有该域名的IP记录，若有则直接使用。

2. 系统缓存与Hosts文件：若浏览器无缓存，操作系统检查本地缓存（如Windows的DNS缓存）及Hosts文件，存在记录则返回。

3. 本地DNS服务器查询：

   1. 用户配置的本地DNS服务器（如ISP提供的或公共DNS）接收递归查询请求。

   2. 若本地DNS有缓存且未过期，直接返回IP；否则开始迭代查询。

4. 根域名服务器指引：本地DNS向根服务器查询，根服务器返回管理该顶级域（如.com）的顶级域名服务器地址。

5. 顶级域名服务器指引：本地DNS询问顶级服务器（如.com服务器），获取管理目标域（如example.com）的权威服务器地址。

6. 权威域名服务器解析：本地DNS向权威服务器查询，获得域名对应的IP（如www.example.com的A记录），并缓存结果。

7. 结果返回与缓存：本地DNS将IP返回给用户，浏览器缓存该记录，后续请求可快速响应。 

5.Cookie有哪些配置项 

1.名称和值（Name and Value）

每个Cookie都有一个名称和值，名称和值由服务器设置，并在发送给客户端时存储在浏览器中。

document.cookie = "username=JohnDoe";

2.域（Domain）

指定Cookie所属的域。默认情况下，Cookie属于创建它的域。

document.cookie = "username=JohnDoe; domain=example.com";

3.路径（Path）

指定Cookie的有效路径。只有在该路径下的页面才能访问Cookie。

document.cookie = "username=JohnDoe; path=/account";

4.有效期（Expires）

指定Cookie的过期时间。可以设置为特定的日期和时间，超过这个时间后，Cookie将被删除。

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

5.最大年龄（Max-Age）

指定Cookie从创建开始的有效时间，以秒为单位。这个属性比expires属性更精确。

document.cookie = "username=JohnDoe; max-age=3600";

6.安全性（Secure）

指定Cookie只能通过HTTPS协议发送，确保数据传输的安全性。

document.cookie = "username=JohnDoe; secure";

7.HttpOnly

指定Cookie只能通过HTTP协议访问，客户端JavaScript无法访问，增加安全性，防止跨站脚本攻击（XSS）。

document.cookie = "username=JohnDoe; HttpOnly";

8.SameSite

指定Cookie的SameSite属性，防止跨站请求伪造（CSRF）攻击。取值可以是Strict、Lax或None。

document.cookie = "username=JohnDoe; SameSite=Strict";

6.常见的浏览器状态码有哪些

• 200 OK​​：请求成功，服务器成功处理了请求
• ​​201 Created​​：请求成功，并在服务器创建了新的资源
• ​​301 Moved Permanently​​：请求的资源已永久移动到新位置（客户端应使用新URI进行后续请求，如网站域名永久更改）
• ​​302 Found​​：请求的资源临时移动到另一个位置（客户端应使用新URI进行本次请求，但后续请求可能使用原URI，如临时维护重定向）
• ​​303 See Other​​：服务器指示客户端通过GET方法在另一个URI获取资源（常用于POST请求后的重定向，如提交表单后跳转到结果页面）
• ​​304 Not Modified​​：资源未修改，客户端可使用缓存版本（用于条件GET请求，如浏览器缓存有效时）
• ​​400 Bad Request​​：请求语法错误（多为传参形式错误）
• ​​401 Unauthorized​​：请求需要用户身份认证（未登录）
• ​​403 Forbidden​​：无访问权限
• ​​404 Not Found​​：请求资源不存在
• ​​405 Method Not Allowed​​：请求方式不被允许（如使用Post请求一个Get请求）
• ​​500 Internal Server Error​​：服务器内部错误
• ​​502 Bad Gateway​​：服务器作为网关或代理，上游服务器无法收到响应（如后台通过nginx代理，但后台服务没有启动）
• ​​503 Service Unavailable​​：服务器暂时无法处理请求（通常由于过载或维护，客户端可稍后重试，如服务器重启中）

 7.什么是浏览器的重绘、重排（回流）

• 重绘：重绘是指当元素样式发生改变，但不影响布局，浏览器重新绘制元素的过程。如改变元素的color、background、box-shadow等属性。

• 重排（回流）：重排是指元素的布局属性发生变化，需要重新计算元素在浏览器中的位置，浏览器重新进行布局的过程。如元素宽高度、位置、增删元素等。

8.GET和POST请求的区别

• 区别点：

  • GET请求会被浏览器主动缓存，POST不会；

  • GET在浏览器回退不会再次请求，POST会再次提交请求；

  • GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会；

  • GET请求能由浏览器自动发起（请求image等），POST不能；

  • GET参数放于URL中，POST通常放于Request Body中。

• 相同点：

  • 都不安全，基于http明文传输（可自行进行加密处理）；

  • 参数没有大小限制，但URL有长度限制。