CSS使用小技巧

元素不可见性设置小技巧

• display: none：隐藏元素并破坏其渲染状态。 这意味着取消隐藏元素与渲染具有相同内容的新元素一样昂贵
• visibility: hidden：隐藏元素并保持其渲染状态。 这并不能真正从文档中删除该元素，因为它（及其子树）仍占据页面上的几何空间，并且仍然可以单击。 它也可以在需要时随时更新渲染状态，即使隐藏也是如此
• content-visibility: hidden：隐藏元素并保留其渲染状态。这意味着该元素隐藏时行为和display: none一样，但再次显示它的成本要低得多 推荐使用

有三种方式可以设置元素可见不与可见性

1. display
2. visibility
3. content-visibility

display

display取值

visibility

取值如下

content-visibility

content-visibility使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要它为止。因为跳过了渲染，所以如果大部分内容不在屏幕上，则利用该content-visibility属性可使初始用户加载更快。它还允许与屏幕上的内容进行更快的交互。挺整洁的。

这个属性 改变了一个元素的可见性，并管理其渲染状态。 提高了渲染性能。

content-visibility结合了visibility和display的优点。

CSS包含的主要目标是通过提供DOM子树与页面其余部分的可预测隔离来实现Web内容的渲染性能改进。

取值如下

参考连接：web.dev/content-vis…

合理使用will-change

通常情况之下，Web动画（在动的元素）是和其他元素一起定期渲染的，早期在动画开发时，会使用CSS的3D变换（transform中的translate3d()或translateZ()）这样的Hack手段来开启GPU加速，让动画变得更流畅。但这样做其实是将元素和它的上下文提到另一个“层”，独立于其他元素被渲染。代价有可能导致transform动画延迟几百毫秒。

现在可以直接使用CSS的will-change属性，该属性可以表明元素将修改特定的属性，让浏览器事先进行必要的优化。

示例：

<!-- HTML -->
<div class="animate"></div>

/* CSS */
.animate {
    will-change: opacity
}

浏览器渲染上面的代码时，浏览器将为该元素创建一个单独的层。之后，它将该元素的渲染与其他优化一起委托给GPU，即，浏览器会识别will-change属性，并优化未来与不透明相关的变化。这将使动画变得更加流畅，因为GPU加速接管了动画的渲染。

will-change值有：

建议在完成所有动画后，将元素的will-change删除。 示例：

var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
    // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
    this.style.willChange = 'transform, opacity';
}
function removeHint() {
    this.style.willChange = 'auto';
}

让元素及其内容尽可能独立于文档树的其余部分（contain）

该属性允许指定特定的DOM元素和它的子元素，让它们能够独立于整个DOM树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次针对整个页面。即，允许浏览器针对DOM的有限区域而不是整个页面重新计算布局，样式，绘画，大小或它们的任意组合。

取值

scroll-behavior让滚动更流畅

scroll-behavior是CSSOM View Module提供的一个新特性，可以轻易的帮助我们实现丝滑般的滚动效果。该属性可以为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。

scroll-behavior接受两个值：

避免@import包含多个样式表

通过 @import，我们可以在另一个样式表中包含一个样式表。当我们在处理一个大型项目时，使用 @import 可以使代码更加简洁。

关于 @import 的关键事实是，它是一个阻塞调用，因为它必须通过网络请求来获取文件，解析文件，并将其包含在样式表中。如果我们在样式表中嵌套了 @import，就会妨碍渲染性能。

通过多个 link 来实现同样的功能，但性能要好得多，因为它允许我们并行加载样式表。

参考地址： juejin.cn/post/694266…