每天学习三个前端面试题,多了我是真看不下去,今日份知识点是从【字节跳动面试经验分享】获取
什么是预检请求?
option请求也叫预检请求,通常发生在跨域的时候。
在实际请求之前,浏览器会发送一个 OPTIONS 请求,以确认服务器是否允许该跨域请求。
预检请求的作用
-
检测服务器支持的 HTTP 方法:OPTIONS 请求可以获取服务器支持的 HTTP 方法(如 GET、POST、PUT 等)。
-
确认跨域请求的安全性:通过预检请求,浏览器可以确认服务器是否允许当前网页所在的域名访问跨域资源
预检请求会在以下条件满足时触发:
- 使用了非简单请求方法:请求方法是 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等
- 请求方法是 POST,但 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
如何避免预检请求:
-
使用 GET、HEAD 或 POST 方法
-
确保 Content-Type 是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
-
不使用自定义 HTTP 头部。
浏览器的协商缓存和强缓存
浏览器缓存机制是指浏览器在接收到服务器返回的资源后,根据设置的缓存策略来决定是否缓存该资源以及如何缓存。
强缓存
-
强缓存是利用 HTTP 头信息中的 Expires 和 Cache-Control 来控制的。当浏览器发起请求时,会先根据这些头信息判断是否命中强缓存。
-
如果资源命中强缓存,浏览器直接从本地缓存中读取资源,并不会向服务器发送请求,节省了网络流量和请求时间。
-
常见的强缓存响应头有:Cache-Control 的 max-age 和 s-maxage,Expires 等。
协商缓存
-
协商缓存是利用 Last-Modified 和 ETag 等响应头信息来控制的。当资源未命中强缓存时,浏览器会向服务器发送请求,服务器会根据这些头信息来验证资源是否仍然有效。
-
如果资源未发生变化,服务器会返回 304 Not Modified 状态码,告诉浏览器可以使用本地缓存,浏览器再次从本地缓存中读取资源。
总结:强缓存是通过设置响应头信息来告诉浏览器在一定时间内直接使用本地缓存,而协商缓存则是通过与服务器进行验证来确定是否可以使用缓存。合理地配置强缓存和协商缓存可以提高网页加载速度,减少网络流量消耗。
Cache-Control里面有哪些属性?
Cache-Control 是 HTTP 协议中的一个头部字段,用于控制缓存的行为。它可以在 HTTP 请求和响应中使用,以指示缓存策略。Cache-Control 的值由一系列指令组成,这些指令定义了资源的缓存方式和有效期。
Cache-Control: max-age=3600
max-age=<seconds>:指定资源的最大缓存时间,单位为秒。
s-maxage=<seconds>:与 max-age 类似,但仅适用于共享缓存(如 CDN 或代理服务器),而不影响私有缓存(如浏览器缓存)。
no-cache:指示缓存必须在使用前验证资源的新鲜度。缓存不会直接使用缓存的响应,而是向服务器发送请求以确认资源是否已更新。
public:指示响应可以被任何缓存存储,包括私有缓存和共享缓存。
private:指示响应只能被私有缓存(如浏览器缓存)存储,而不能被共享缓存(如 CDN 或代理服务器)存储。
还有更多完整的面试题,详情可查看:# 字节跳动面试经验分享