
1) 【一句话结论】移动端网络请求缓存需分资源类型(静态/动态),静态资源采用强缓存(Expires/Cache-Control max-age)+协商缓存(ETag/Last-Modified),动态数据采用弱缓存(如LRU/TTL),并配合缓存更新(版本号/时间戳)和失效(TTL过期/强制更新)机制,平衡加载效率与数据实时性。
2) 【原理/概念讲解】老师口吻:缓存策略的核心是“缓存控制头”和“缓存状态”。
Cache-Control: max-age=3600(客户端缓存时间)或 Expires(过期时间)控制,客户端在指定时间内无需请求服务器,直接使用缓存(类比:图书馆借阅的书籍,可长期从本地“借阅记录”获取,无需每次都去书店)。ETag(资源唯一标识)或 Last-Modified(最后修改时间)控制,客户端请求时携带标识,服务器判断是否更新,若未更新返回 304 Not Modified(仍用缓存),否则返回新数据并更新缓存(类比:用户查询书籍是否更新,若未更新则告知“无需再查”,继续用旧书)。Cache-Control: no-cache(需验证)、no-store(不缓存)或 max-age=0(立即失效)实现,确保数据强制更新(如用户登录后,用户信息需立即更新)。3) 【对比与适用场景】
| 策略类型 | 控制头 | 缓存行为 | 使用场景 | 注意点 |
|---|---|---|---|---|
| 强缓存 | Cache-Control: max-age/Expires | 客户端直接用缓存,无需请求服务器 | 静态资源(图片、JS、CSS)、不常变配置 | 需合理设置时间,避免过期后频繁请求 |
| 协商缓存 | ETag/Last-Modified | 请求时携带标识,服务器判断是否更新 | 静态/动态资源(如用户列表,需判断是否修改) | 需服务器返回正确标识,否则缓存失效 |
| 弱缓存(动态数据) | Cache-Control: max-age=300(短时间)/no-cache | 缓存时间短,或需验证 | 动态数据(用户信息、订单状态)、实时性要求高的数据 | 需合理设置TTL,避免数据过时或频繁请求 |
| 缓存失效 | Cache-Control: no-cache/no-store/max-age=0 | 强制缓存失效,每次请求都去服务器 | 需强制更新(如用户登录后,用户信息更新) | 需明确失效条件,避免缓存污染 |
4) 【示例】
Cache-Control: max-age=86400(1天),Expires: 2023-12-01T...。If-None-Match: "abc",服务器返回 304 Not Modified,客户端继续用缓存。If-Modified-Since: "2023-11-...",服务器判断是否更新,若未更新返回 304,否则返回新数据并更新缓存。5) 【面试口播版答案】
在移动端开发中,网络请求缓存策略需根据资源类型(静态/动态)区分。对于静态资源(如图片、JS、CSS),采用强缓存(Cache-Control: max-age=1天)+协商缓存(ETag),客户端可长期使用缓存,减少服务器压力;对于动态数据(如用户列表、订单状态),采用弱缓存(如TTL=5分钟),并配合条件请求(If-Modified-Since),避免数据过时。缓存更新时,通过版本号(如V=1.0)或时间戳标识,服务器数据更新时客户端更新缓存;缓存失效则通过TTL过期或强制更新(如用户登录后,设置Cache-Control: no-cache,强制请求服务器)。这样既能保证加载速度,又能确保数据实时性。
6) 【追问清单】
max-age)的区别?max-age是客户端缓存时间,若未过期则直接使用,过期则重新请求。7) 【常见坑/雷区】
max-age,导致用户数据(如订单状态)长时间未更新,影响用户体验。Cache-Control: no-cache或max-age=0,导致缓存一直有效,数据无法更新。