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

Question

新的CSS property 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(...)？

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

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

   没有。规范中没有关于资源加载的字眼。但再次 - 测试它！查看“网络”选项卡。脚本的加载顺序不应改变。

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

   ...一个脚本...

   是的，它可以打破

   你甚至可以想象一个读取 css 属性的脚本，发现content-visibility并抛出它不知道的......甚至抛出只是因为它的作者讨厌那些使用content-visibility:)

   但我认为在你的情况下，机会是无限小的，因为我认为你所指的脚本中没有一个对你的footer.

• 不知何故取决于元素及其content-visibility: auto后代的大小（Alohci 已经指出）

• 不知何故取决于innerText

• 与一些可访问性功能相关（可能......不太熟悉这些）

• 在其他一些情况下（如果您对细节感兴趣，请阅读规范）

• 并且可能还有其他未在规范中提及的情况，因为该功能仍处于起步阶段。（而content-visibility的规范实际上是一个草案）

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