那么,使用内容可见性来跳过不在视口中的内容以提高页面加载时间,是否有真正的理由阻止其在所有DOM元素上的使用?
与其使用...
.card {
content-visibility: auto;
}
为什么不使用
* {
content-visibility: auto;
}
那么,使用内容可见性来跳过不在视口中的内容以提高页面加载时间,是否有真正的理由阻止其在所有DOM元素上的使用?
与其使用...
.card {
content-visibility: auto;
}
为什么不使用
* {
content-visibility: auto;
}
* {
content-visibility: auto;
}
content-visibility: auto;
应用于.card
将导致3次验证(+300ms),其中一张卡片不会被渲染(-1秒),因此总渲染时间将为2.3秒。content-visibility: auto;
应用于*
将导致30次验证(+3000ms),其中一半的卡片不会被渲染(-1.5秒),因此总渲染时间将为4.5秒。content-visibility
最适用于内部渲染昂贵的元素块。* {
content-visibility: auto;
}
你基本上是在告诉浏览器在渲染之前验证所有内容。这意味着节点及其子节点将被递归验证。 如果你对特定的部分或元素使用content-visibility属性,
section{
content-visibility:auto;
}