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

Question

在新的CSS属性 content-visibility属性看起来像一个很好的工具，以提高网页加载速度。

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

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

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

然而，我的页面的页脚有很多JS库被加载通过有<script>标签页脚标签内。

有些脚本是预先加载的，有些是延迟加载的，而另一些则是异步加载的。（是的，许多脚本，不幸的是）。

所以我的问题是：

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

或者脚本是否会以相同的方式加载而不管 CSS 属性如何？

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

Answer 1

这将是<footer style="content-visibility:auto">没有<footer content-visibility="auto">。

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

Answer 2

当您认为 Alohci 的答案不完整时，我将添加我的 2 美分，但大多数情况下我只能重新表述已经说过的内容。

我没有Chrome 85，所以无法测试。但在阅读了这个和这个的规格之后，我认为：

1. ...但是如果它是一个向元素添加处理程序的脚本，它可能会出错，例如$(selector).click(...)？

   测试一下吧！尝试单击带有 JS 代码的元素content-visibility: auto，而该元素由于在屏幕外而仍然不可见。我确信处理程序会起作用。规范中没有任何关于此类问题的内容。

2. 该content-visibility属性是否会以任何方式干扰脚本加载？

   没有。规范中没有提到资源加载。但再次 - 测试一下！查看“网络”选项卡。脚本的加载顺序不应更改。

3. 因此，它不会影响一般使用的脚本，例如引导程序等，但是如果它是一个脚本......

   ...一个脚本...

   • 某种程度上取决于元素或其content-visibility: auto后代的大小（Alohci 已经指出了）
   • 某种程度上取决于innerText
   • 与一些辅助功能相关（可能......不太熟悉这些）
   • 在其他一些情况下（如果您对详细信息感兴趣，请阅读规范）
   • 并且可能还有规范中未提及的其他情况，因为该功能仍处于起步阶段。（而 的content-visibility规范实际上是一个草案）

   是的，它可能会破裂

   您甚至可以想象一个读取 css 属性的脚本，查找content-visibility并抛出它未知的内容...甚至抛出只是因为它的作者讨厌那些使用它的人content-visibility:)

   但我认为在你的情况下机会是无限小的，因为我认为你所指的脚本都不会对你的footer.

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