两行CSS让页面提升渲染性能

content-visibility是CSS新增的属性，主要用来提高页面渲染性能，它可以控制一个元素是否渲染其内容，并且允许浏览器跳过这些元素的布局与渲染。

content-visibility: hidden的效果与display: none类似其区别在于：

• content-visibility: hidden 只是隐藏了子元素，自身不会被隐藏
• content-visibility: hidden 隐藏内容的渲染状态会被缓存，所以当它被移除或者设为可见时，浏览器不会重新渲染，而是会应用缓存，所以对于需要频繁切换显示隐藏的元素，这个属性能够极大地提高渲染性能。

contain-intrinsic-size 可以为元素指定以下一个或两个值。如果指定了两个值，则第一个值适用于宽度，第二个值适用于高度。如果指定单个值，则它适用于宽度和高度。

• contain-intrinsic-width
• contain-intrinsic-height

<template><div class="card_item"><div class="card_inner"><img :src="book.bookCover" class="book_cover" /><div class="card_item_right"><div class="book_title">{{ `${book.bookName}${index + 1}` }}</div><div class="book_author">{{ book.catlog }}</div><div class="book_tags"><div class="book_tag" v-for="(item, index) in book.tags" :key="index">{{ item }}</div></div><div class="book_desc">{{ book.desc }}</div></div></div></div>
</template><script setup lang="ts">
import { toRefs } from "vue";const props = defineProps<{book: any;index: any;
}>();
const { book, index } = toRefs(props);
</script><style lang="less" scoped>
.card_item {margin: 20px auto;content-visibility: auto;contain-intrinsic-size: 200px;
}
</style>