是否仅在禁用 Javascript 时才下载 noscript 标记中的图像？

Posted 2023-03-05

【中文标题】是否仅在禁用 Javascript 时才下载 noscript 标记中的图像？

【英文标题】：Is an image within a noscript tag only downloaded if Javascript is disabled?

【发布时间】：2013-01-21 01:31:14

【问题描述】：

考虑以下示例：

<noscript>
    <img class="photo" src="example.png">
</noscript>

客户端是否仅在禁用 javascript 时才下载图像文件？ （我知道如果在本例中禁用了 Javascript，客户端只能看到图像）

我问的原因是因为我一直在为外部 CSS 中的几个背景图像属性使用 base64 数据 URI（避免 http 请求）。我还想通过外部 Javascript 更新它们的值，将 base64 数据 URI 用于某些 img 标签的 src 值（以保留缓存的好处）。

本质上，这样做的全部目的是避免/限制 http 请求，所以我想知道我是否可以优雅地降级并且仅在禁用 Javascript 时才获取图像文件？还是无论如何都下载了图片？

【问题讨论】：

“通过外部 Javascript 更新外部值”是什么意思？

【参考方案1】：

简短回答：不，图片不会下载到 <noscript> 元素内

技术答案：

我刚刚在我的个人网站上对禁用 JavaScript 的功能进行了一些测试，并看到了这篇文章……顺便说一句，JavaScript 仍然被禁用。

好吧，在此网页的最顶部，Stack Overflow 有一条警告消息，其中指出：

“堆栈溢出在启用 JavaScript 时效果最佳”

我是那种倾向于在几乎每一个网站上“查看源代码”的网络极客（！），消息的 html 代码如下：

<noscript>
    <div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://example.com/path/to/1x1-pixel.gif"  class="dno"></div>
</noscript>

那里没有什么太开创性的。但是，我感兴趣的是 IMG 元素，它引用了一个 1px x 1px 的不可见图像。

我假设分析/统计软件必须使用此图像来检测有多少用户在没有 JavaScript 的情况下浏览。如果这个假设是正确（并且没有任何其他原因在这里使用我在这里忽略的空白 1x1 像素图像），那么这基本上可以确认以下内容：browsers 不要下载NOSCRIPT元素内的任何内容，除了在JavaScript实际上被禁用的情况下。 （我很高兴地说，似乎没有任何复古的 98 式布局技术在进行中！）;-)

（附注——我希望我不会因为指出这一点而冒犯 Stack Exchange 网络中的任何人！）

【参考方案2】：

HTML 4.01 规范只是说noscript 的内容在某些情况下不会呈现。但是，这表明浏览器在这种情况下不应该根据其内容执行任何 GET 操作，因为这样的操作将毫无意义并且会降低效率。

HTML5 草案更加明确，可能反映了实际的浏览器行为。它强调了noscript element：“它的工作原理本质上是在启用脚本时‘关闭’解析器，以便元素的内容被视为纯文本而不是真实元素”。 （该注释与为什么 noscript 在使用 XHTML 语法时不起作用有关，但它也揭示了它在何时起作用的原理。）

所以我们可以预期，当启用脚本时，noscript 的内容甚至不会被解析（除了识别结束标签）。 Blender 的回答似乎证实了这一点，我对 Firefox 的小实验也证实了这一点：

<img src=foo style="foo: 1">
<noscript>
<img src=bar style="bla: 1">
</noscript>

当启用脚本时，Firefox 对 foo 发出失败的 GET 请求，但对 bar 没有请求。此外，它在错误控制台中显示关于错误 CSS 代码 foo: 1 的警告，但没有关于 bla: 1 的警告。所以显然img 标签甚至没有被解析。

但是，我看不出这个问题与作为提出问题的理由所呈现的场景有何关联。我认为您在noscript 之外使用img 元素并使用data: URL 将所需的初始内容放在那里（作为后备，在禁用脚本时将保留最终内容）。

【讨论】：

抱歉，在未启用 js 的情况下，data: URL 模式内容如何访问？

@Ben, data: URL 不依赖于 JavaScript；它们只是浏览器解析的 URL。

爬虫可以解析noscript里面的图片吗？或者有没有其他方法可以让爬虫索引通过 JavaScript 下载的图像？