前端技术 · wiblog

HTTP 缓存中的 immutable 与 stale-while-revalidate：静态资源更新场景下的新鲜度与性能平衡

本文以静态资源更新场景为例，分析 Cache-Control 的 immutable 与 stale-while-revalidate 指令如何控制浏览器缓存行为，减少重复请求并提升加载速度。你将理解启发式缓存、显式过期与后台重新验证的机制，并获得配置建议与适用边界。

本文从 V8 引擎的隐藏类与内联缓存机制出发，解释对象形状如何影响属性访问性能，并通过数据处理场景展示动态添加属性、delete 等操作导致的去优化，给出保持形状一致等实践建议。

本文以实时协作界面为贯穿场景，解析浏览器事件循环中任务、微任务、渲染步骤（rAF、样式计算、布局、绘制）的调度顺序，说明微任务过长为何会延迟渲染导致掉帧，并给出避免长微任务、合理使用 rAF 的工程实践。

本文以长列表商品页为贯穿场景，解析 CSS contain 属性中 layout、paint、size 等值的隔离机制，说明它们如何缩小样式、布局与绘制的计算范围，并对比 content-visibility 的异同，帮助你在实际项目中做出正确的性能优化决策。

本文以首屏商品页为例，解释主 HTML 解析器遇到阻塞脚本时为何会暂停，以及预加载扫描器如何提前发现资源。通过对比 async、defer 和 preload 的适用场景，给出减少阻塞的实践与权衡。