浏览器是否缓存锚点href、动态HTML及JS fetch获取的资源？

好问题！咱们逐个拆解你提到的这几个场景，看看浏览器缓存是怎么工作的：

1. 锚点<a href>指向的资源 #

这里要分两种情况看：

• 如果锚点指向的是外部资源（比如 <a href="report.pdf"> 或者 <a href="/page.html">），那和img/script标签的src完全一样，浏览器会严格遵循HTTP缓存规则来缓存这些资源。只要资源URL没变化且缓存未过期，浏览器就会直接用本地缓存，不会发起新请求。
• 如果是页面内锚点（比如 <a href="#section-2">），这种情况只是让浏览器跳转到当前页面的指定位置，不会触发任何新的HTTP请求，自然也就不存在缓存的问题。

2. 动态生成的HTML中的资源 #

不管是通过document.createElement()动态创建的标签，还是用innerHTML插入的HTML片段，里面的img、script等标签的资源请求，缓存规则和静态写在HTML里的完全一致。浏览器不会因为是动态生成的内容就特殊对待——只要资源URL不变且缓存有效，就会复用本地缓存；如果想强制更新，同样需要修改资源名称或者添加哈希后缀（比如把cat.jpg改成cat-v2.jpg）。

举个例子，你用JS动态插入：

const img = document.createElement('img');
img.src = 'cat.jpg';
document.body.appendChild(img);

如果cat.jpg已经被缓存过，浏览器就会直接用缓存的版本，不会重新下载。

3. JavaScript fetch()获取的资源 #

fetch()发起的HTTP请求，同样会被浏览器缓存，遵循标准的HTTP缓存机制。不过你可以通过配置fetch的cache选项，灵活控制缓存行为：

• fetch('/api/data', { cache: 'default' })：默认行为，优先使用缓存，只有缓存过期时才重新请求
• fetch('/api/data', { cache: 'no-cache' })：会向服务器验证缓存是否仍然有效，有效就用缓存，无效则重新请求
• fetch('/api/data', { cache: 'no-store' })：完全不使用缓存，每次请求都从服务器获取最新资源
• fetch('/api/data', { cache: 'reload' })：强制跳过缓存，直接发起新请求获取资源

简单来说，只要是触发了HTTP请求的资源，不管是通过静态标签、动态生成内容还是fetch发起的，浏览器都会按缓存规则处理；只有不触发新请求的场景（比如页面内锚点）才不会涉及缓存。

内容的提问来源于stack exchange，提问作者Jonathan002