CSS 新的“内容可见性”属性是否会干扰脚本加载行为？答案

【问题标题】：Does CSS new 'content-visibility' property interfere with scripts loading behavior?CSS 新的“内容可见性”属性是否会干扰脚本加载行为？
【发布时间】：2020-11-30 11:27:59
【问题描述】：

new CSS propertycontent-visibility 属性看起来是提高页面加载速度的好工具。

我想将它添加到我的页脚：

<footer style="content-visibility: auto;">
  (...)
</footer>

因为它可以稍后在屏幕上绘制（它出现在我所有网站页面的文件夹下方）。

但是，我的页面页脚有许多js库通过<script>标签在页脚标签内加载。

有些脚本是预先加载的，有些是延迟加载的，还有一些是异步加载的。（是的，很多脚本，不幸的是）。

所以我的问题是：

content-visibility 属性会以任何方式干扰脚本加载吗？

或者无论 CSS 属性如何，脚本都会以相同的方式加载？

在这里询问，因为它是新的，对我来说看起来有点“神奇”，但我没有找到太多相关文档。提前感谢您对此的任何见解。

【问题讨论】：

我认为您正在混合渲染和加载。内容可见性只会对渲染产生影响。与 display: none 相同。但其中任何一个都不会对正在加载的元素或其中执行的脚本产生任何影响。

标签： javascript html css dom browser

【解决方案1】：

应该是<footer style="content-visibility:auto"> 而不是<footer content-visibility="auto">。

它是一个 CSS 属性，所以它不会影响脚本加载，但是因为它有可能影响布局，如果它可能会影响脚本执行，例如，依赖于特定的基于布局的操作，例如获取矩形的边界框。

【讨论】：

谢谢@Alohci，你是对的！！！我已经用修复更新了问题，因为它不是主要问题。但是您的回答也解决了主要问题！ :) 谢谢
所以它不会影响一般使用的脚本，例如引导程序等，但是如果它是一个向元素添加处理程序的脚本，它可能是错误的，例如 $(selector).click (...) ?

【解决方案2】：

由于您认为 Alohci 的回答不完整，我会加我的 2 美分，但大多数情况下我只能改写已经说过的话。

我没有Chrome 85，所以无法测试。但是在阅读了this 和this 的规范后，我认为：

...但是如果是给元素添加处理程序的脚本，可能是有问题的，比如$(selector).click(...) ?

只是测试它！尝试使用 JS 代码单击带有 content-visibility: auto 的元素，同时由于屏幕外它仍然不可见。我确信处理程序会起作用。规范中没有关于此类问题的任何内容。
content-visibility 属性会以任何方式干扰脚本加载吗？

没有。规范中没有关于资源加载的消息。但再次 - 测试它！查看网络标签。脚本的加载顺序不应改变。
因此，它不会影响一般使用的脚本，例如 bootstrap 等，但 [what] if 这是一个...

...一个脚本...
- 不知何故取决于content-visibility: auto 或其后代元素的大小（Alohci 已经指出）
- 不知何故依赖于innerText
- 与一些辅助功能相关（可能...不太熟悉这些）
- 以及在其他一些情况下（如果您对详细信息感兴趣，请阅读spec）
- 可能还有其他未在规范中提及的情况，因为该功能仍处于起步阶段。（而content-visibility 的规范实际上是一个草稿）
是的，它可以破坏

您甚至可以对读取 css 属性、找到 content-visibility 并在它不知道的情况下抛出...甚至仅仅因为它的作者讨厌那些使用 content-visibility 的人而抛出的脚本进行成像 :)

但我认为，在您的情况下，机会微乎其微，因为我认为您所指的脚本中没有一个对您的 footer 感兴趣。

无论如何，任何更改都应该经过测试（理想情况下）。但你也永远不能确定没有错误。所以只要尝试一下，如果值得的话，看看效果如何。

【讨论】：