本专栏相关链接
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到页面过程中发生了什么
4. DNS解析的过程
浏览器缓存：浏览器首先检查自身缓存是否有该域名的IP记录，若有则直接使用。
系统缓存与Hosts文件：若浏览器无缓存，操作系统检查本地缓存（如Windows的DNS缓存）及Hosts文件，存在记录则返回。
本地DNS服务器查询：
用户配置的本地DNS服务器（如ISP提供的或公共DNS）接收递归查询请求。
若本地DNS有缓存且未过期，直接返回IP；否则开始迭代查询。
根域名服务器指引：本地DNS向根服务器查询，根服务器返回管理该顶级域（如
.com）的顶级域名服务器地址。顶级域名服务器指引：本地DNS询问顶级服务器（如
.com服务器），获取管理目标域（如example.com）的权威服务器地址。权威域名服务器解析：本地DNS向权威服务器查询，获得域名对应的IP（如
www.example.com的A记录），并缓存结果。结果返回与缓存：本地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有长度限制。